React Dropzone and upload images Part 12 Styling the react dropzone

In this article, we are going to add style to the input box and also the button.

You will get unlimited access to all source code in the YouTube channel and free Udemy courses by joining the channel.

Style the input field

<input type="text"
className="border rounded focus:ring-0 w-full text-xs p-3 my-4 "
ref={captionRef} placeholder='Enter a caption'/>

We add the border to the input field, add a rounded corner, set the ring width to zero when focus, the width of the input field is 100%, the text is extra small so you can see the placeholder text is extra small. Add the padding, so placeholder text will not close to the edges of the input field. We also add the margin vertically, which leave some pace between the dropbox and the button.

Style the button

Next, we are going to style the “post” button, add the blue background color and white text color when hover over the…