Loading
Flexible Ribbon Banner with Tailwind CSS 10 exercises
solution

Ribbon Container Positioning

The very first thing we need to do is position our banner element correctly in relation to the card.

We can start start by adding a position of relative to the card wrapper:


<div class="bg-white relative ...">
<!-- TODO: Build the ribbon banner -->
</div>

Now, let’s build this rib

Loading solution

Transcript

0:00 To place the square to the top-right of the card, we need to give it the position of absolutes. I'll give you the class. Then, let's go with top- and right-. As you can see, there's an issue. The square is positioned to the top-right of the entire view board.

0:14 We want to position it relatively to the card. Let's add the class of relative to the card container. Now, our square is positioned to the top-right of the card. We want a negative offset of .5rem.

0:27 Instead of top-, I'll go with -top, and here choose level two, which is .5rem, and the same, -right-2. Now the square is exactly where we want it to be.