Loading
Build a Flexible Ribbon Banner in 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

Here's where we're at code-wise.

You're going to try to take this element, rotate it, and align the bottom-right corners of both elements.

It should looke like this:

Rotation and alignmentLoading

Transcript

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.

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.