Here you can see we haven't done anything. We're pulling in Tailwind, but beyond that, no CSS has been written. Okay, well, to start, I know I need a wrapper for all of the plans, and we're probably going to set that to Flexbox. Next we'll have a wrapper where each one of these represents a single plan. So that means ultimately we would have four of those. We're just going to start with the one, though. Alright, next, within here, you can do header if you want. It's just a matter of if you want to think of that as a header. I don't in this case, so I'm just going to do a div there.

It's just a matter of how you think of it. Next we will do an H5, monthly, and then over here is the cost, maybe a span, and we'll say $15. Alright, so that's the basic markup here. So if I switch over to our test project, this is what we get. Okay, let's get started. I'm going to begin with a couple of things. So I'm going to go to my app.scss file. Here we have the basic Tailwind directives, I'm not sure what you'd call them. If you're not familiar with this, it's just the basic installation steps.

Okay, let's get started. If I switch back to welcome, just to give us a little more room here, let's set some padding all around of about six. Yeah. Okay. Now, within here, we're going to add a class of container, and then mx-auto. So we've learned this is fairly standard. You set a maximum width, and then you center it on the page. All right, it didn't move much because I'm on a very low resolution, but you can see that we are, in fact, centering that.

So that's a good use case for extracting a component in Tailwind. But in our case, we don't have a real project, so I'm okay doing it inline. So let's say that to begin, I want a background color of blue. All right, and then why don't we do this inline together? So background color of blue, text of white, no underline. Let's see, if we switch back, it looks like this text here is all in uppercase. So we'll say right here, uppercase. We definitely need some padding. So how about py-2, yeah, and then maybe on the x-axis, 6, yeah, not too bad. It should be rounded, so I'm going to do rounded, or we could do rounded-full.

Maybe even extra small, yeah, not too bad. So we can grab that, and if I were to switch back, we can paste all of that in. And if we come back and give it a refresh, we're slowly getting there. Now, like I said, if this is a one-off button, then definitely keep it as utility classes. But on the other hand, if it's something where you will want this style in literally a hundred different places throughout the site, I think that's a good example for extracting a component. So if you want a quick example of what that might look like, we could do it here. I could say button, and then we can use this apply syntax here, and let me add the period before each. Okay, so now we have a class that applies all of these child utility classes, which

before each. Okay, so now we have a class that applies all of these child utility classes, which means I could switch that back to a standard Button component, and if I were to come back and give this a refresh, we're still going to get the exact same thing. But now, needless to say, I can create another one there without having to duplicate all of these classes. Now you probably want to make this as minimal as you can. So if you'll have buttons that aren't blue, well, that would be a good use case for extracting things like this out. Now you can have the base styles that all Button components will share, but then you could have

So here we could say text-blue to change that color. We can then make it a little larger. So right here, how about text-large? Give it a refresh. Yeah. Well, now let's give this a shot. Once again, I'll set a display of flex. So that's what we get by default. But now let's adjust the flex alignment. So we'll say align-items and once again, I'm just going to cycle through until we find

and almost always this is line height. So if I were to say letting none, if we scroll down, you'll see that resets the line height to one and it does push it up. That looks good. So we'll add that on. So if I close this out, it's starting to look pretty good. So that means what I could do here, let's do this. Let's grab all of this and I'll extract it to something called plan. Now this is a Laravel specific thing, but don't worry about it. We're just moving it to another file just for convenience.

Now here we can once again use Flexbox left to right. And then finally each plan should have a little breathing room. So maybe mx-2, yeah, and at this point we're just playing around to find what we need there. So now at this point you would substitute all of the other items. So you can do that manually. So you'll have one there, you'll just repeat it for all four plans. If you want it to be more dynamic, like I said earlier, you could pass in the plan details here. Even if you wanted to say name is monthly, you know, if you're using Laravel and Blade, something like that, then you could say name and then just slowly make it dynamic.

Even if you wanted to say name is monthly, you know, if you're using Laravel and Blade, something like that, then you could say name and then just slowly make it dynamic. So we'd have four of those. Maybe this would be yearly, this would be lifetime maybe, this would be teams, you get the idea. Anyways, if we come back, we're slowly making that dynamic. But that's for another lesson. So hopefully you learned a bit. If you have any questions, let me know in the comments below. Otherwise I'll see you in the next lesson.