So keep in mind, there won't be php in this series. There's no Blade, there's no Laravel, there's not even JavaScript. The most I'm going to reach for is an index.html file, and I will pull in Tailwind to keep things as quick as possible. So if you'd like to join me, I'm going to start on this now. I'll make a directory called blog, a cd in there, and we'll have our overview page, and then another one for the post itself. All right, here's what we got. Let's open this in my editor, and let's get going. Now a quick little note, this isn't a how to write HTML and CSS series, so I'm not going

Let's open this in my editor, and let's get going. Now a quick little note, this isn't a how to write HTML and CSS series, so I'm not going to go as slow as you might expect for a series like this. This is more of a come along for the ride, and I'll explain as I go. Okay, we'll call it Laravel from scratch blog, and I will pull in Tailwind, and we'll start with hello world, and have a look. Blog.test, or drag the index.html file to your browser window, and here we go. All right, what are the first steps? Well, should we begin with the assets? That's what I usually do.

But notice it's right up against the edge. So it sounds like all sections should have a little bit of padding. Maybe on the left and right of 6, and on the top and bottom of 4. I'm making this up on the fly, so let's see. We scroll up, and there we go. Now a quick little note here. When I add px-6, Tailwind is going to add, on the x-axis, padding left and right of 1.5rem. If you're not familiar with rems, that stands for root m, so the root font size, basically. And if that's 16, as it usually is, 1.5rem would be 16 times 1.5, is 24.

Let's get going. Yeah, we're looking out here. So class text-4xl. And then I think I saw Laravel from scratch itself is blue. So let's say blue. Again, I'm just kind of, whenever I don't know the color, I default to 500. It seems like the thing in the middle. It's probably not exact. Actually, it looks weirdly close. But again, it's close enough for our needs.

Okay, but notice it's way too wide here. So maybe, let's have a look here. Maybe the header specifically, yeah. So maybe the container will have a max width of 4xl, but then within it, hmm, do we want to do... Maybe the header could do this, 4xl, and then mx-auto, and then this one could have a max width of... I'm just shooting out loud here. Something like that. All right, let's see.

Let's just grab that, put it on the style. So what can we put as a class here? We're going to do, let's see if I can figure this out. and rotate 90 degrees, but I want the opposite of 90, right? Let's see. absolute, pointer-events. Usually you can guess the tailwind classes, which is why I like it. Some people think there's so much to learn, but really there's a little learning curve, but then the rest of it, you just sort of figure out on the fly. Little tip, XML, you only need that for SVG documents.

do. I will document this and this will be category. And then later, of course, these could become partials or Blade components or things like that. So this one is other filters. And let's see, this would be other filters. Remember, all of this is meant to be dynamic. All right, how's that look? Good. Yeah, so you notice now it saves us a little time.

Okay, what's that look like? Okay, we don't need the SVG. We want the background color though. Let's see, we have our span. Now I want that background color. Inputs will have a background color of white by default, right? So if we just set transparent, yeah, and then we just need to add the padding. So before it was here, padding-left of 3. So can we say px-3, py-2, and then down here, class. I don't know if I have to do appearance-none.