Let's go ahead and add the rules. That is our job cards into the application. So far we have the navigation bar heading, paragraph, and the search input. So down here, let's start adding those job cards. We have a wrapper div, and within that we have each of the job cards. Let me paste the markup so we don't end up, uh, wasting time typing all of these. And let's start with styling This, uh,

wasting time typing all of these. And let's start with styling This, uh, particular paragraph here that is, we have remote and we have the small tot and part-time. Let's style this using flexbox so that we can use some gap and, uh, give it a gap if needed. Let's say flex and gap one. And, uh, yes, of course. Now we need to style this entire card and the text with it. So let's start with the outer card. Let's first give it some white color BG white.

So let's start with the outer card. Let's first give it some white color BG white. Now you can make out the subtle difference between this background color and the white. We can make it more evident by adding some padding, so an overall padding of six, and then once again, some rounded corners using rounded lg. And then a slight shadow around the card using the shadow utility classes. So I'll choose a very small shadow that is shadow excess.

around the card using the shadow utility classes. So I'll choose a very small shadow that is shadow excess. Let's add the similar shadow for the input as well. That gives it a different look. Like it's, it, it comes out of the page. So here, after padding, let's add shadow excess. And for this also, let's add a white background. BG white. All right, now let's separate these two. Um, using the margin utility class, I'd like to give a margin to the entire set of, uh, job cards.

Um, using the margin utility class, I'd like to give a margin to the entire set of, uh, job cards. So here we can say MT eight or something. Yeah, that's great. Um, time to also give a border to this card, I suppose along with shadow. Let's give a border, border zinc 300 or maybe 200 to make it a little subtle. Let's refresh. Yeah. And now time to style these, uh, text here.

Let's refresh. Yeah. And now time to style these, uh, text here. Let's give this an amber color. Let's say text sm text amber five 600 maybe. Yeah. And, uh, let this paragraph that is the full start developer be a little bold. So let's give it a class font bold and increase the text size a little by saying text Excel.

font bold and increase the text size a little by saying text Excel. Hmm. Yeah, I think bold is a little too much. Uh, we can go for semi bold. That looks better. And let's add a margin on the top, maybe MT two or mt one refresh. Okay. And, uh, this remote and part-time, I would like it. I I would like a much su subtle look. So I'll change the text color to text zinc, uh, maybe 600 and also the size text SM and now that looks really good.

So I'll change the text color to text zinc, uh, maybe 600 and also the size text SM and now that looks really good. Finally, let's add a button here called view details. So in case we wanna add more details, of course, the job description and everything, we can add that here. So let's use the button for it and save view details. This button can have a background color of amber. Again, BG amber 600. Let's add some horizontal padding. PX four vertical padding, maybe BY one. And then text, uh, white

PX four vertical padding, maybe BY one. And then text, uh, white because we have a darker background color. Let's add a lighter text refresh. Okay, let's make it a little smaller using text sm once again, rounded corners. Rounded md. And, uh, let's space it a little using MD two. All right, that looks good. We are almost there like within just a few minutes.

All right, that looks good. We are almost there like within just a few minutes. We have styled this entire page by staying in index html, right? Alright, the final thing we need to do is add a, you know, bookmark icon here, like a bookmark or a star so that, uh, when a user clicks on it, they'll be able to bookmark this, right? So for that, let's head to hero icons. Hero icons, where you can, uh, copy the SVG for, um,

So for that, let's head to hero icons. Hero icons, where you can, uh, copy the SVG for, um, the star icon. Let me look for star and yeah, this looks good. So I'll simply say copy SVG. And here I'm going to paste this SVG at the top right here. Let me refresh. Yeah, we are able to see this right here. And since this is a button, I'm going to wrap it, wrap the SVG within the button tag.

And since this is a button, I'm going to wrap it, wrap the SVG within the button tag. Uh, at this point I think I'll full screen the, uh, editor so we are able to see much here. So this entire SVG goes inside the button. Okay. And let me minimize this so I'm not seeing the entire thing. Great. So this button, uh, needs to be on the right. So if you notice, um, it would be great to have acne corporation on the left

So if you notice, um, it would be great to have acne corporation on the left and this button aligned exactly, uh, in the same line, but on the right. So that means we can wrap these two in Flexbox and then justify them accordingly. So I'll wrap these two inside a diviv D and then close the diff here. And then these two. Great. And now let's say div class flex. And you can say justify between to make, uh,

And then these two. Great. And now let's say div class flex. And you can say justify between to make, uh, both the children spread apart. So now if we check, oh yeah, we have the reverse of it, of course. Um, so what we can do is we can either change the mockup or we can say flex reverse. Both of them works. Uh, let me just say flex roll reverse, which will make it reverse this way. And I can also add item center

which will make it reverse this way. And I can also add item center to make them align at the center. It already looks like it is, but let's, anyway, do that justify between and then items center. And let's also reduce the size of this icon. It looks a little too big. Um, we can do that. Here you see the size six. This is a tailwind CSS class. So hero icons follows, uh, tailwind classes.

Here you see the size six. This is a tailwind CSS class. So hero icons follows, uh, tailwind classes. We can change this. It's setting a width of the same, uh, six spacing scale, 24 pixels and 24 pixels. We can change that to size five to make it look great. And we can also change the color, um, by setting the button color here. So here, if you say text Zinc 400, that will be the color of the start.

So here, if you say text Zinc 400, that will be the color of the start. Great. So, um, now we can even make this responsive right here in the markup. Say for example, we have these headings and all these text, let's say for a much bigger screen, we might want it to look even bigger for now. We have designed it for a slightly large mobile or a slightly smaller tablet, something like that.

We have designed it for a slightly large mobile or a slightly smaller tablet, something like that. But if you wanna increase the size, we can do this using the responsive modifiers of Tailwind. Say for example, H one, this is what you need to increase. Now this text for Excel applies to a mobile because tail when we design mobile first. Now if you wanna increase the size for a larger device, you can specify the device size using these modifiers like SM or MD or LG

you can specify the device size using these modifiers like SM or MD or LG or Excel, followed by a colon, right? So let's change it to MD for, um, I can show you for a demo. So if we say MD Colon and then add Text five Excel for a screen size that is larger than 7 68 pixels, you will see this particular utility class apply. And if I make this, uh, full screen, you'll see that it got bigger, right?

And if I make this, uh, full screen, you'll see that it got bigger, right? So if you wanna see this, uh, clearly let's change the text color itself so you can see this better. Indigo 500 and then increase refresh. See, um, you see that for a larger screen size, you're able to change the text color, the text size, uh, anything, you know, even the layout like flex and you change, uh, flex box row to flex box column. So many such things. You can do everything without having

and you change, uh, flex box row to flex box column. So many such things. You can do everything without having to write media queries because Tailwind writes them for us. So let me change this spac, I don't want to make this responsive for now. You can explore more about responsiveness on your own. One last thing I would want to change is currently all this text, it looks kind of, uh, bold to me right now. I can make it look much better by using this single

bold to me right now. I can make it look much better by using this single utility class called Antis. It just sets the font smoothing to antis. I don't know exactly what it does, but trust me, the moment you add it, everything starts looking much better. All right, so now I hope you've got a much better understanding of Tailwind css and also know why to use it. First reason is we didn't even move away from our

understanding of Tailwind css and also know why to use it. First reason is we didn't even move away from our index html file. We stayed in one single file and styled this entire application really beautifully. Second, we didn't have to think of class names, like, you know, job card, you know, favorite I icon, blue button, things like that. You don't have to think about class names and waste your time there.

You don't have to think about class names and waste your time there. Thirdly, we typed very less, you don't have to type display. Flex Tailwind did it for us. We probably only typed ffl and auto suggestions. Uh, suggested flex. Same goes with all the other utility classes. You don't have to type justify content flex, and so you're typing much lesser, which means you're saving time.

and so you're typing much lesser, which means you're saving time. And don't worry, this isn't making your application bloated. Because if you check, if you go to Styles CSS and scroll down completely here, right here, you can see within this utilities layer, all those utility classes that you have added, only those get generated. So this is about, um, you know, maybe a hundred lines of s which is exactly

So this is about, um, you know, maybe a hundred lines of s which is exactly what you would get even if you start naming your things like card or button and things like that. So it's not increasing your CSS file size, it's not really increasing your t ml file size. You're only getting, uh, benefits out of these. And you'll see some more benefits as we've progressed further in the course in the next chapter, especially when we talk about the A in tall stack.

as we've progressed further in the course in the next chapter, especially when we talk about the A in tall stack.