Style a Pin Input through Data Attributes in React

Instructor: [0:00] Now that we have the Vite project setup, let's run pnpm dev to start dev server.

[0:08] Here, we have the Vite and React dev server running. Because we're designing the pin input, let's clean up this template and pair it with the pin input element.

[0:18] The first thing I'm going to do is to remove most of these templates here and create a first container here. Let's give it a data part attribute of container.

[0:29] Next, I'm going to create a label here to give this entire input a label. Let's call this enter verification.

[0:40] Next, we create a div in there with a couple of inputs, so maybe four different input types in there. Then we can give these a data part attribute of input group.

[0:57] Next, all imports would have a data attribute of input. We go here, we drop this here, we drop this here, and finally, right there. Now we have the basic structure of our components. I just cleaned up all of this use state, and most of the fusible templates.

[1:17] Now, head over to CSS to style this component pretty fast. Again, I'm going to delete all of this boilerplate code, and I'll start by styling the container part with the display flex. Flex direction column and a gap. Next, I will style the input group part. Call it the input group right there and we give that as well a display flex and a gap of 1 ram. That way, we have all our inputs spread out horizontally.

[2:01] Hey, it's currently overflowing the screen at the moment. Let's style our inputs. Our style today is about inputs. Give it a width of four rams and give it a height of six ram. Next I'll make sure it's center aligned by putting text align center and increasing the font size, as well, to something like two rams.

[2:26] Now, we'll set up the basic boilerplate of our paint input. You can see it looks pretty good.