So we're going to take a minute just to go through this just so we feel comfortable with it and then we're going to go ahead and tweak it along the way as we start to pull Alpine into this to make it work. At the moment there is no Alpine on the page.

So the first thing to mention is we're using Tailwind. We're just pulling this directly in from the content delivery network which means we're going to have a huge style sheet. We can always fix that up later but of course we're just focusing on the Alpine stuff here.

If you've not worked with Tailwind before, feel free to switch this out. You may be uncomfortable with the amount of utility classes here but again, we'll talk about them as we go through because we'll have to toggle certain classes based on different states of our app.

So we'll be changing them around and then you can go ahead and apply your own custom CSS if you want to. Okay, let's go through each kind of section of this. So the first one and the most important is this kind of area here where we can write

the title of our note and the content. So this is represented by an input here and a text area here. Let's just go over to this first section, this entire div here. You can see that we've got that input here that is for the title, has a placeholder here

of untitled notes. You see that text before we start writing. We've got the text area just underneath that, of course, so we can start writing our note. And then just down here in this wrapper, we have a button which will allow us to delete

our notes. We can hook that up with our Alpine functionality a little bit later. So that's that kind of right-hand section. The left-hand section is this aside just down here.

So the first thing that we've got is this title. So we have a title of notes which of course you can change. You can see next to that we have another button which will of course allow us to create a new note.

So again, we'll be hooking that up to a method on our store which will push a new note into the stack and then allow us to start editing it. Just below that, you can see that we've got this body preview note title and this timestamp here which of course at the moment is just completely static and that has that hover

effect so we can kind of see what we're doing. That's going to be duplicated. So just down here, this list item is going to be duplicated, this entire thing for every single note we have.

And inside of here, we just have an anchor which represents the clickable area for the note title. That could be a button but we're just going to leave it as an anchor. The time next to it, so of course just here, these two are in line.

And then just underneath that within a simple paragraph, we have the body preview. So there's not really much going on here. If you're not used to Tailwind, it will look like a lot but we have the right-hand section, the left-hand section, header, and then the left-hand section, list items for each of

our notes. So once you've got that pulled into your editor and you can see what I see, it's ready to start pulling it together to actually get it working into a working notes app. Let's start doing that in the next part.