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

Rotation and Alignment

We're going to work on rotating and positioning our banner correctly next. This is where those imaginary rectangles we drew in Figma can come in handy. We've got a container and our banner that we want to rotate.

If we look at the outlines of these shapes, you can see that both shapes have the bottom-right corner meeting in the same spot here.

Conner Ribbon OutlineLoading
Loading exercise

Transcript

0:00 We're going to work on rotating and positioning our banner correctly next. This is where those imaginary rectangles that we drew in Figma can come in handy. We've got a container here, and then our banner that we want to rotate.

0:11 If we look at the outlines of these shapes, you can see that both shapes have the bottom-right corner meeting in the exact same spot, here. Here's where we're at code-wise. You're going to try to take this element, rotate it, and align bottom-right corners of both elements.