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
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.