So I'm making use of Vite here to scaffold out our Vue app. And if you're not familiar with Vite, just go to the documentation and you can use this command to scaffold out a new project. And I've also already installed Tailwind CSS, and you can see the instructions for that on the documentation page. So let's get started. Let's start with the layout of the table. And I'm actually not using a table here, I'm just using Flexbox. And if you take a look at source here, they are also using Flexbox. So let's open up VS Code.

Let's give it some padding as well. And actually, let's give it some more padding on desktop. So extra large px-48 is what I have. And let's give it some margin on the top and the bottom. So this will be our centered container. So let me just put some text in here. That should be our container. And I'm not running the server. So let's make sure we do npm run dev. And that should have reloaded.

So let's make sure we do npm run dev. And that should have reloaded. There it is. And let's go ahead and start. And for the actual table, like I said, we'll use Flexbox. And this will be the first flex item here. And then this will be the second flex item. So let's go ahead and do that. So let's say flex. And let's give it some margin on the top and the bottom.

And let's just duplicate that a few times. And let's see what we have here. Okay, so that's looking decent. Actually, the first one is not showing up. Let me put a non-breaking space in here. Okay. And we also want the borders in between the different cells. So let's make use of the divide helpers or classes in Tailwind, which are great. So we can say divide-y. And then we want the dividers to be white.

This looks smaller because I'm actually zoomed out here a bit. So let me zoom out here as well a little bit. Okay. And let me just change some of this content here. Okay, now let's work on a section with the actual events, which will be our second flex item. So all of this. So right here, let's say width full. And it has a lighter gray background. So this background right here.

And it has a lighter gray background. So this background right here. So we can do, I have it within this div, say bg-gray-500. It has those white dividers as well. So we can also do divide-y and divide-white, okay. And then the first item is going to be the times. And this has the same background as this over here. So let's do that first. bg-gray-900. Let's give it the same height as this cell here.

Now let's work on the horizontal scrolling. So you can scroll horizontally, so you can see the different times and the different events. So let's see what we can do here. Let's try overflow-x: auto on this container, which is the thing we want to scroll. And let's add a bunch of new times here to see if it scrolls horizontally. Okay, and it doesn't. As you can see, it's just trying to fit as many here. So I think what we have to do is set a width or a hard-coded width on each one of these rows here.

Let's make it a button. Let's call it eventBlock, just so we have a name. And let's give it a background, say red-600, and say hover, red-700. And text white. And let's just say event for now. And let's see how that looks. Okay. So like I said, we want to make sure it's the same width as these time slots here. So right now I have them as width: 32. So let's see if we can match that.

So we want them to line up, like I said. So what's the problem here? So the problem is this hard-coded width that I set of 1600 is too small. So let me just select all of these. And for example, if I add something pretty large, say 3000 pixels, then it does line up. But when we get to the end, it's too much. So what we have to do is find the correct width that corresponds to the number of time slots that we have. So this isn't the most dynamic solution, but if you know the bounds of your times, then

So again, if you had more time slots, you just have to find the correct width. So now for the event, if it was half an hour, like I said, it's width 32, which is what we have here. If it was one hour, it'd be width 64. That should line up, and it does. And then for one hour and a half, it should be 96. That should be lined up as well. And 128 for two hours, which I don't believe is in the Tailwind config, but we can add that or we can make use of the compiler if we were using that, but I'm not using that. So let's just add it to the Tailwind config.

that or we can make use of the compiler if we were using that, but I'm not using that. So let's just add it to the tailwind.config.js. So we want to extend the spacing scale. So let's do that spacing. And let's add that new one for that custom width that we have. And I'm going to name it table. So we can say w-table in our class, and that's going to be 2560. Okay, let's save that. Let's change our inline style to use that instead. So let me just select all of these style width 2560.

So it has multiple lines. So I'm going to put it on its own div. So let's say div with a padding-left. And then the first line will be the title. And I'll make that semi bold, say title of event. And then the next one is the details. And this will be small text or extra-small text. And an off white. And this will have the times. So let's just add that.

We have our table layouts for our different events. We can scroll horizontally to see the different time slots that we have here. And we can add or remove events in half an hour time slots. So I think this is a good place to break. In the next video, we'll work on adding the models and the tabs using headless UI. So I'm going to make a commit here. So let's git add, git commit. Let's say table layout complete.