up being 30 pixels exactly. So that works out well for us. OK, next, we have this getStarted link. But of course, that should be displayed as a nice button here. All right, so let's do that. Class. Now, I do have a custom component for Laracasts I use called TailwindButton. So I can do things like this. If I want my standard blue button, you can see that there. But in our case, let's see.

There we go. That looks good. But now when I hover over it, we don't have any styling there. So let's say when you hover over it, let's set the text to white. We're not going to change that. But I am going to change the background color to blue, and then maybe also the border to blue. All right, that's a lot. I still don't think it's much of an issue there. But yeah, if this is a recurring button type, then we would refactor that to maybe something

So we might consider putting the height here on the container instead. So if we were to try that out, yeah, that will extend it. All right, let's zoom back in. So let's switch back and we'll say for the container, or we might even want to give that a better class name. But until then, we can set the height here. All right, let's give it a refresh. And now we don't see any difference. However, let's come back here. Now what I will often do is we have our section that will add some padding-left and padding

However, let's come back here. Now what I will often do is we have our section that will add some padding-left and padding-right against the edges. And this is especially useful for having some space on mobile devices. But then we have our container. So then here is maybe where we can apply Flexbox. So we can say something like, give me a display: flex, and I will align the items to the center. However, now all of these items here are going to display left to right. If I give it a refresh, yeah, now you can see it.

But here, once again, it's not taking up the full height. We could hard code it. Yeah, there we go. Take up the full height. So we can use a class name of h-full, height, and then the full height, 100%. There's also a screen if you ever want it to be the height of the screen, which is useful in a lot of cases. Give it a refresh, zoom out a click or two, and now we're getting there. Next, I want some breathing room below this paragraph. So once again, I will hard code that.

I have it in a folder called call_to_action, and we want the robot_illustration.svg. Okay, so if we leave it like that and give it a refresh, here's what we get. So by default, background images will tile. If you don't want it to tile, you have to explicitly say, don't do that. So we can say background-repeat to none, or I think you can do no-repeat if you want. Either should work. Anyways, give it a refresh, and now you'll see this little guy is in the top left-hand corner, but we actually want him in the bottom left-hand corner. So this is where you can use background-position. So you'll accept two values here.