And there is a hover as well. Cool. So the next item is the search input. So let's go ahead and work on that. So that's going to be the next flex item. So it's after this <a> tag, make a <div>, and I'm going to make a relative, because we're going to absolutely position this square with a slash inside. And let's go ahead and make a search box. And let's give it some appropriate classes. It's going to be rounded, going to be bg-gray-700 is what I went with.

And let's give it some appropriate classes. It's going to be rounded, going to be bg-gray-700 is what I went with. And it doesn't match GitHub's gray exactly. But I'm happy with how it looks. Let's make the placeholder white. Actually, I'm blindly copying this text sm, but I don't need it because it's on the root node. And I have a custom width here. And if you look at my IntelliSense, it is showing up because I have this width from a previous project.

And if you look at my IntelliSense, it is showing up because I have this width from a previous project. So if you see my tailwind.config.js, you'll see width 72 here, because I use it somewhere else before. And let's give it some padding, px-3 and py-1. And let's go ahead and add the placeholder. Okay, say search, or jump to. Okay, let's see how this looks. Okay, it looks pretty good. Now let's add this square with a slash inside.

See how that looks. Okay, it looks pretty good. We just have to bump it to the left a bit. So let's say margin-right, 2. Okay, and we have to center that. So we can go up here and say, flex items, center height, full, that should center it. And it does. Cool. Now let's work on this sub nav here. So we have these four items.

Now let's work on this sub nav here. So we have these four items. So let's work on that. So that will be after this container here. So I used an unordered list here. So let's go ahead and do that. flex items, center. And it's a font semi bold. And again, some space utilities. And let's go ahead and make a list item with an anchor tag.

So move on to the next thing. And that's going to be this section over here. So again, that's going to be flex box and we have three flex items. Let's go ahead and define this container flex items center space-x-4 and say text-white. And the first flex item is this bell icon. And initially I was using the Heroicons icon set from Steve Shoger. But then later on, I just started ripping the icons directly from GitHub. So I'll start with these first. So bell, I'm going to copy this. And now we can paste that in.

So bell, I'm going to copy this. And now we can paste that in. And the first flex item is going to be a link. And I am going to give it a class of relative. Because we have to absolutely position this little circle badge up here. So let's paste that SVG in. And I think it's already optimized. So I am going to just add a class here. Let's say width of 4. And let's see if that renders.

Let's say width of four. And let's see if that renders. Okay. It looks pretty good. I'm going to make a bit bigger. Okay. And let's go ahead and add that little blue badge. So after the SVG, I'm going to make a div here. Say bg-blue-600 is the color I gave it. Let's make a rounded-full to make it a circle.

Okay. Next thing is a plus icon. And there's also a Chevron down next to it. Actually, there's a hover on this. Did I add that? I did not. So let's say class equals hover. Say text-gray-400. And I'm going to duplicate this. But since there's a Chevron down, we have to make this a flex container.

And I'm going to duplicate this. But since there's a Chevron down, we have to make this a flex container. So they're next to each other. So I'm going to say flex items-center. And the first item is going to be the plus icon. And the second one is going to be the Chevron down. So let's find those icons. So plus. Okay, let's grab this. Let's give it a width.

Okay, let's move on to the next section. So that would be this section right here. So let's add that. It's going to be after the nav here. And I'm going to name it just so I can see where I am when I'm scrolling. So let's name it repoStats. Let's end that comment here. And repoStats. And let's give it some classes. flex items center.

And let's give it some classes. flex item-center. Same deal as before. We have this section on the left. And then this section on the right with these buttons. Okay. justify-between. And let's give it some padding. px-8, py-4. So the flex, I mean the first flex item is this.

And this is going to be a flex container as well. And the first item is the SVG. Let's paste that in. And let's get rid of the classes because we're going to add our own. Let's get rid of the version and the height and the width because that's going to be added in our classes. Let's go ahead and add our classes. So width of 4. Fill current. And let's say text gray-600.

Fill current. And let's say text-gray-600. And let's see how this looks. Okay. And then the next flex item is going to be the organization. So I believe the next flex item is this whole thing. So let's do that. So after the SVG, let's do flex. Actually, I made this a flex container as well. So let's do items-center.

Actually, I made this a flex container as well. So let's do items-center. Make it text-xl. Let's give it a ml-2 to separate it from the icon. And the first flex item is going to be the organization name. So let's say <a>. Let's give it a class. And it's text-blue-600 is what I'm using for the link colors. And there's also a hover underline on it. And the name is Tailwind CSS.

And there's also a hover underline on it. And the name is Tailwind CSS. And then the next flex item is just the slash. And I have a margin-left of 1 on it. I don't think you have to make this a flex container, but that's the way I did it. So I'll just stick to that. So let me just grab this. Paste it in. And let's say margin-left of 1.

And I'll just paste the other two in to save some time. So that would be after this flex. So let me just move this up. And let's make this a flex container. And let's give it some spacing in between. And like I said, each button is going to have two sections. So it's going to be flex as well. And then the first section will be, say, border, border-gray-400. Let's make it rounded.

it looks pretty similar. Now let's move on to the next section, which is this nav. So let's go ahead and work on that. That's going to be after our repo stats here. So let's make a new section. I called it repoNav. Or you can make it a nav as well. I actually have it as an unordered list. So let's stick to that.

And let's give it a padding and a margin top. And let's start with the first one, which is going to be the active state. So it's code. And this one is semibold. So let's say font semibold. Let's give it a anchor tag. And this one's going to be flex as well, because there's an icon and text. flex items center.

And give it a padding bottom as well, to separate the border. Okay. So let's see how that looks. Okay, it looks good. But I forgot to add the text in here. So the first one is going to be the icon. But the second item is going to be code.

But the second item is going to be code. Okay. And I'm going to give it some space. Let's say space X2. Actually I'm just going to put the margin on this directly. Because that's what I have in my finished project, so I'll just stick to that.

So yeah, looking pretty good and pretty close to the original GitHub. And I think this is a good place to break. And we'll continue on in the next video. So I'm going to make a commit here. So if you want to follow along, you can see the different commits. So I'm going to say git add, git commit, say GitHub,