Loading
Flexible Ribbon Banner with Tailwind CSS Tutorial (10 exercises)
solution

Create Ribbon Banner Element

The ribbon inside the container

We can now think about our next rectangle. Once again, drawing an imaginary boundary around that shape will really help us think about it pragmatically:

boundary shapeLoading
Loading solution

Transcript

0:00 We're going to use an anchor tag element for the ribbon, so the banner can be clicked to take the user somewhere. Let's go with A. For the text, let's go with "My cool ribbon". Nice.

0:11 We wanted to give these a background of amber-300, which is currently the color of the container. We want to reduce the container to be amber-100 only. Up here, let's change amber-300 to amber-100.

0:23 In the anchor tag, let's give a class of bg-amber-300. Let's make the anchor behave as a block level element with display, block.