Okay, let's continue and work on the sidebar. So if you look at the real GitHub, you'll see a bunch of sections in the sidebar. So let's go ahead and get started. So I'll start with the About section. Go into our code. Here is our sidebar. Let's make a section for About. About. And as always, let's close that. And let's go ahead and make that heading.

And as always, let's close that. And let's go ahead and make that heading. I'm going to make it an H4. And I'm going to give it the base text size and make it semi-bold, say, About. And then underneath that, there is a paragraph tag, say, text-base as well. Let's give it a margin-top and a utility. Okay. See how that looks? Okay. Looks pretty good.

Okay. Looks pretty good. It's a bit wider here on my version, but I'm okay with that. Next is the link with an icon. So let's work on that. So as always, flex items center space-x to margin-top four. And the icon is the first item. And we'll start with the second item. And it's a link, text-blue-600, like we've been using. What else?

Now let's work on this tag section here. So let's go ahead and make a section for that. Underneath this, say tags, let's move this up and give it some classes. So text-xs, they look like they're bold and I'm going to make it flex items-center. And we're going to flex-wrap it and give it a margin-top. Okay. And if you see, there is a slight bg-blue-100 background and it is a pill shaped and it's a link. So let's do that. Say bg-blue-100 and hover slightly darker. Give the text a text-blue-600, rounded-full to give it that pill shape, px-2, py-1 and margin.

It looks pretty good. I want some spacing in between the tags. And usually I would use the space-x utilities. But if you do that, you'll see there's a small issue with that. When we use flex-wrap, there is a margin on the left here for the items that wrap. And I don't want that. So we're going to have to do it the old fashioned way and just give each item a margin-right. So if there's a better way to do this using the space-x utilities, which I really like, definitely let me know. But for now, it's going to do margin-right: 2 on each of these.

Now we have these two links and as always, just an icon with some text. So let's go ahead and do that. And they are links too. So after the tags, let's go ahead and make an anchor link. Let's make it flex. Let's make it items center. space-x to mt-4. And we want group-hover on this as well. So the icon can be hovered as well as the text. So I'll just put the text in here and then I'll paste in the icon and then I'll paste.

So I pasted in the other one and I'm pretty happy with how that looks. Okay. Moving on. Let's work on the releases section. So let's make a section for that. So after about, let's make one for releases. And this has a border on the top. So let's say border-t. Let's give it the border-gray-400 and let's give it a margin and let's give it a padding to separate the border as well. Okay.

give it a padding to separate the border as well. Okay. And let's give it an H4 for the heading, but I'm going to make this flex because there is a pill beside it. So let's do text-base, font-semibold, flex, and items-center. Okay. And the first flex item is releases. And the second flex item is the pill. So let's do that. text-xs, rounded-lg, bg-gray-300, bx-2, and give it a margin-left of 1 and

Let's say latest. And let's see how this looks. Okay. That's pretty good. And let's go ahead and add the days ago. So I'm going to make another. So I'm going to change this to a span because it's within anchor tag. And technically speaking, I think that's incorrect. So let's make it a span. It doesn't really matter, I think.

So that will be in our used by section. So after this, or after the H4, let's make a new div. Let's give it a margin top of four. And this whole thing is going to be one anchor link. So let's do that. Let's make it flex as well. Let's make it items center. Okay. And to start, let's put an image in here. So I'm going to do image source.

And to start, let's put an image in here. So I'm going to do image source. We'll use Faker here. Faker avatar, and say avatar here, and let's give it some classes. So it's going to be width-8, and we want it to have a white border. If you look at it closely, they overlap each other, but there is a white border. So the overall width of the image is going to be slightly smaller than 8, but that's fine. Say border-2 for that white border, border-white, and rounded-full for the circle. Okay.

So let's do that. I used a unordered list. So let's add that after this. Add a UL, margin top of two, flex, space X of eight, items, center, text, access. Okay. And this is going to be the first item in the legend. It's going to be flex as well because we need the circle and then the text. So let's say flex again, items, center. And then the first flex item is the circle. So let's say width two, height two, rounded full and say BG purple.

And then the first flex item is the circle. So let's say width 2, height 2, rounded full and say bg-purple-700. Okay. So that's the circle and it looks like I use spans here. So I'm going to change this to a span. And then the next section is just the text. So ml-4. And then we have two sections here. We have the CSS and then the percentage.

And I'm just going to paste in the other one and everything is looking pretty good. And that's our sidebar. So if we compare it to the real GitHub, I'm pretty happy with how that looks. So again, we'll break here. I am going to make a commit message or make a commit. So git add, git commit, GitHub, finish sidebar.