Okay, let's start off by building our UI using Tailwind CSS. So I have a fresh Laravel app here, and all I've done is added some image assets in the public folder, which we're going to be making use of in our design. So let's go ahead and install Tailwind into our Laravel app, and just do this. Okay, that's done. Let's add Tailwind to our CSS. So I'm going to copy this, and I'm going to make a new file in our resources, let's make a new folder in here called css, and let's make a new file called main.css, and let's paste this in. Okay, let's go ahead and initialize our Tailwind config file, okay?

let's paste this in. Okay, let's go ahead and initialize our Tailwind config file, okay? And let's get everything working with Laravel Mix, okay? So we just have to do this, add .postCSS and require Tailwind in our webpack.mix.js. So I'm not going to be using Sass here, so let's erase that, and let's paste this in. Okay. And this is the correct path here, so that should be good. So let's go ahead and run, I'm going to run my watcher actually, npm run watch. You can run browserify here if you want auto-reloading as well, but I'm just going to stick to npm run watch and just manually reload the page.

You can run browserify here if you want auto-reloading as well, but I'm just going to stick to npm run watch and just manually reload the page. Okay, that's done. Let's just check if Tailwind is working, so let's go to our welcome.blade.php, and let's go ahead and import Tailwind here. So <link>, it'll be /css/main.css, and let's just get rid of these styles here. And let's just see if we can get one of its utilities working, so let's see, bg-blue-500, see if this works. And it does, cool. So let's go ahead and make a layout, and I have a screenshot of our design for reference.

And it does, cool. So let's go ahead and make a layout, and I have a screenshot of our design for reference here. So our layout will house the header, and you can't see the footer here, but the footer just has a link to the IGDB API, so let's do that. So in our views folder, let's make a new file, or a new folder here called layouts, and let's just make a new one called app.blade.php, and let's just do this, and let's give it a title of LaraCast's video games, and I'm also going to paste in the correct viewport here, so responsive works as well, and let's go ahead and start. So let's give the body a class of bg-gray-900, so we have that nice dark theme, and

responsive works as well, and let's go ahead and start. So let's give the body a class of bg-gray-900, so we have that nice dark theme, and let's make the text white, and if you have a custom font, I'd usually set it here too, or set it in the Tailwind stack and put it here, but I'm just using the default Tailwind font, which is the default on whatever system you're on, and let's go ahead and start with the nav up here, so let's start with that, header, and let's give this a class of border-b, for border on the bottom, let's give it border-gray-900, actually it's 800 in my design, and let's go ahead and make a nav element here for the navigation, and let's give it a container, let's say mx-auto to center it, and we're going to make it flex, and it'll have two flex items, this on the left and this on the right, so let's do that, so flex

a container, let's say mx-auto to center it, and we're going to make it flex, and it'll have two flex items, this on the left and this on the right, so let's do that, so flex-items-center to make sure they're vertically centered and justified between, so we have two on the left and the right, and let's give it some padding, and padding on the top and bottom, and this first flex item is going to be flex as well, and it will have these items, so let's do that, so let's say .flex, and make it items-center as well, and the first item is going to be the logo, so let's go ahead and make a link to that, let's just say homepage, and within here it's going to be an image, and I have the Laracasts logo here, so let's just put that in there, Laracasts-logo.svg, say Laracasts, and let's say width 32, and flex-none, so it just doesn't change size based on the other flex children, and

here, so let's just put that in there, Leracast's logo.svg, say Leracast's, and let's say width 32, and flex none, so it just doesn't change size based on the other flex children, and after this, let's go ahead and make an unordered list for the rest of the nav, and this is going to be flex as well, okay, and for each item, it will just be these, so the first one is games, and let's give this a class as well, and it's going to have hover text gray 400, and let's add the other two as well, and reviews, and coming soon, okay, see how this looks, okay, obviously this is not going to render anything yet, because we have to change our routes file, so let's change this, we'll make one called index, so let's make this right now, index.blade.php, and this will extend our layout that we just made, so layouts.app, and we'll have a section for content, index here, we'll do this in

this right now, index.blade.php, and this will extend our layout that we just made, so layouts.app, and we'll have a section for content, index here, we'll do this in a second, and we'll end this section, okay, and let's see if this renders, and we have to import Tailwind in our layout, let's go ahead and do that, so let's do a link, css, main.css, okay, see if this renders, and there is what we have so far, so I'm going to separate this logo from the menu, so I'll give the menu a margin-left, so the ul will have a margin-left of say 16 or something, okay, and we just want to have some space in between these menu items, so before we could just set a margin-left on say these two, but one of my favorite new additions to Tailwind CSS is this new spacing utility, so instead of adding margins on each of the individual items, you just set it on the parent, and it will

so I'm going to make a div with a class relative, because we have to absolutely position the search icon, and we'll do that in a second, so let's just put the avatar in a container here, say ml-6, and this will be a link, let's just say that for now, and this will be an image of the avatar, and avatar.jpeg, avatar, and let's make it a circle, so rounded-full, and width of 8, see if that looks okay, okay, and I'm going to zoom out here a bit, just because my resolution is high when I'm recording, my resolution is low is what I meant, just so the text is bigger, so let's go ahead and do the input here, our search input, input type is text, say class equals bg-gray-800, text-small, rounded-full, and give it a px-3, and a py-1, and say placeholder equals search, see how that looks, okay, looks pretty good, let's give it a width, say 64 is what I have, okay, and just want to make

pretty good, okay, let me just add the footer in here, and then we'll work on the index, so the footer just has a link to the IGDB API, so let's quickly do that, so after the header, we'll make a section for the content, so let's put it in a <main> tag, and let's give it some padding like this, and we'll yield the content in here, and underneath this we can put the footer, footer, say border-t, border-gray-800, like I made the nav border, and within here we can just do container mx-auto px-4 py-6, and we can just say powered by, and let's just say, let's make it underline hover:text-gray-400, and say IGDB API, okay, see if that looks okay, and it does, but I have some typos, I spelled yield wrong and powered, powered and yield, okay, so now we can start working on this actual index page that shows the popular games, and there's more underneath here, and I have another screenshot for that, but let's start with these popular games, let's go

start working on this actual index page that shows the popular games, and there's more underneath here, and I have another screenshot for that, but let's start with these popular games, let's go into our index.blade.php, and it start right here, so we need a container as well, say mx-auto and px-4, like we've been doing, and let's make this an h2, and let's give it a color of text-blue-500, let's make it uppercase, let's make the letter spacing a bit wider, and let's make it semi bold, and this will be, and my Emmet didn't work, oh, I'm missing spaces, I'm missing dots here, sorry, and say popular games, see how it looks, okay, it looks pretty good, and we want to have our grid of games here, and for that, I'm gonna be making use of Tailwind CSS grid utilities, which are pretty awesome, so before you had to use Flexbox, which wasn't very difficult, but you had to do this trick with a negative margin to get grids working correctly, but with grid support, it's

correspond to grid gap, and you can give it a value as well, so it's a 12, and I want a border as well, on the bottom of everything, so border-b, and border-gray-800, like we've been doing with our other borders, okay, now we just have to give it as many children as we want, and the grid should render correctly, so I'm gonna give it a div with class of game, and also give it a mt-8, and say game goes here, so if I just duplicate this however many times, then you can see our grid in action, and there it is, cool, so now we just have to substitute that with each game here, so let's do that, okay, let's start here, and I have a class of relative, because we have to absolutely position the ratings thing here, which for now, we're just gonna make a circle, and then later on, we'll add the actual library that adds that animation in, but we have to make it relative, and we have to use, make use of absolute positioning in a second, and we also