0:00 Step one is pretty easy. We've already done it before in this tutorial. I'll add a class of overflow-hidden, remembering the shape of that square remind the ribbon. This will crop out the elements. Immediately, this thing starts to look really cool.

0:13 Next, I want to add darker elements behind the corners. We want one little square here and one little square there. If we look at the parent component, remember, we are offset by top-2 and right-2 negative. Technically, if we had a square of level 2 by level 2, which is eight pixel by eight pixel, it should fill this exact little gap here.

0:37 Once again, the container here has a position of absolute. If I create a child element inside of it, it'll treat that container as its relative context. I have a div with a position of absolute, a height of 2, and a width of 2. Let's give it a bg-amber. The banner itself is 300, so let's go with 500.

0:56 Look at this! Straight off the bat, it looks really good. If I zoom in in the browser, it looks exactly like what we want. Notice how this shape appears behind the ribbon, which is what we want. We didn't have to specify any index value.

1:09 This is because the source order of the HTML already dictates that. If I had these elements after my anchor tag, the square would now appear above the banner, which completely kills the wrap-around illusion we're going for. Let's move that back up.

1:23 Also, note that I did not have to specify top- and left- since it's the default, but I think we should actually do it to be more explicit -- top-, left-. Nothing's going to change, but now we have the blueprints to create the other dark spot on the bottom-right corner. As you can imagine, I'll change this to bottom- and right-. Boom, this by itself is already a perfectly acceptable ribbon.

1:48 Let's maybe add some hover state as well to sell it even more. Here we have bg-amber-300. Perhaps on the hover, we could change this to bg-yellow-300, which is slightly different. It would give it this extra little element of attention when you hover over it. I can add this checkmark.

2:06 Our last task is to round the ribbon corners. That might seem trickier than it actually is. You may think that you need to start using rounded corner on the bottom-right corner of the little shape there and top-left corner here, but remember we have this invisible container element here that has an overflow-hidden class.

2:23 If we round the corners of this element, the cropping will respect the rounded corners. All I have to do is go in the parent container here and go rounded. Let's try lg to make it really obvious. You can see the rounded corners are definitely there. That's probably too much. I think just rounded here will do. It's still a bit too much, so even rounded-sm for small. Here, that's looking really good.

2:50 There you have it. Let me remove these comments, and this is all of our code. In about 10 lines of HTML and CSS, we've created this really cool ribbon element that looks great and, as you can imagine, can be quite flexible. You can change the dimensions, the colors, the contents, and also think about changing the positioning.

3:09 We're going to have one more bonus lesson where we're going to look at just that.