Loading
Build a Flexible Ribbon Banner in Tailwind CSS Tutorial (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:

Now, let’s build this ribbon thing! Uuum, okay, but… how exactly are we going to build this?

Positioning our shape

Inside the relative card wrapper, I’ll create a square shape and set its position to absolute, and slightly offset from the top and right edges of the relative container:

Note that I have temporarily added a bg-amber-300 background color class, so we can actually see where the shape is positioned:

how the end result should look likeLoading

And that’s our ribbon container!

Thinking in “rectangles”

Something that helps me wrap my head around CSS challenges is to imaging rectangle shapes around different elements.

For example, while looking at the ribbon itself may leave you confused about where to start, drawing an imaginary rectangle around the container shape really helps think about potential implementations:

Drawing imaginary lines around a rectangle shape in FigmaLoading

Immediately, instead of a ribbon, I can think about positioning this rectangle - it’s actually a square in this case - where it needs to be.

And I can figure out the rest later. I have a starting point.

Transcript

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.

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.

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.