## 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:

![](http://res.cloudinary.com/pro-tailwind/image/upload/v1667990257/tutorials/Corner%20Ribbon%20Banner%20Tutorial/boundary-shape.png)

Just by drawing this shape outline in my head (or in Figma if needed!), I can derive some very useful information:

* The shape is “clipped” by the parent square shape. What spills out of that original square is invisible.
* The bottom of the new shape aligns with the top-left and bottom-right corners of the parent square. This knowledge will come super handy in a minute!

Let’s create a new HTML element for this inner banner. We likely want the entire thing to be clickable, and assuming it will _link_ to some page on the internet, we’ll use an anchor tag for it:

```html
<div class="relative ...">
	
	<div class="absolute h-32 w-32 -top-2 -right-2 bg-amber-100">
    <a href="#" class="bg-amber-300 block">
			My cool ribbon
		</a>
  </div>
</div>
```

I’ve changed the container square’s background color to `bg-amber-100`, since our banner is now using that `amber-300`.

The container square will eventually be transparent, but for now it helps being able to visualise it.

I also gave the anchor tag a `block` display (it’s `inline` by default), so that is uses the full width of the container. We’ll remove that later.

Here’s what we have:

![](http://res.cloudinary.com/pro-tailwind/image/upload/v1667989926/tutorials/Corner%20Ribbon%20Banner%20Tutorial/my-cool-ribbon.png)

Ok. Not quite there yet. But now, the real fun begins!

Create Ribbon Banner Element

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.

Are you productive with Tailwind CSS but find your interfaces somewhat boring?

Do you shy away from building custom decorative elements that require a deep level of CSS knowledge?

If any of the above cases apply to you, check out this Pro Tailwind Tutorial!

## What You'll Build

In this exercise-driven tutorial, you will build a corner ribbon banner from scratch—step by step. You won't use magic numbers. Instead, you'll have a scientific explanation to support your approach!

![](http://res.cloudinary.com/pro-tailwind/image/upload/v1668121879/tutorials/Corner%20Ribbon%20Banner%20Tutorial/Ribbon_thumbnail.jpg)

Corner ribbon banners are great attention-seeking decorative UI elements. They're especially useful in a pricing section or highlighting a new product on an e-commerce store.

This was an essential decorative component when building the [Pro Tailwind Calendar App](https://calendar-app.protailwind.com).

![](http://res.cloudinary.com/pro-tailwind/image/upload/v1668121914/tutorials/Corner%20Ribbon%20Banner%20Tutorial/select-a-date-alt-background_2x.png)

There are quite a few tricky technical bits to building those banners, though. But together, we’ll explore the creative complexities.

## An Exercise-Driven Tutorial

This tutorial is split into several exercises. Each features a **`problem`** that encourages you to take an active, exploratory learning approach to find an `exercise`.

To solve the problem and implement the solution:

1. Watch and read the `exercise` introduction. Each problem contains an embedded editor with a starting point.
2. Implement the solution (there may be more than one solution!)
3. Watch the `solution` and see how I approach solving the exercise. I’ll explain in-depth the technique, trade-off, and my thought process.

Ready to get started? 

Let's jump in and have some fun!

An exercise-driven tutorial to learn the highly technical and creative aspects of building flexible Tailwind CSS components. 

Getting Started

0:00 Hello, and welcome to this ribbon banner tutorial. Step by step, we're going to build these pretty cool UI elements that can be used in many different scenarios, like, for example, on a pricing section or maybe to draw attention to a new product on an e-commerce store.

0:16 I've broken down the tutorial in a series of small challenges, and whenever you're ready, let's jump into the first one.

Ribbon Container Positioning

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.

0:00 We're going to start with a simple square that represents the container of our ribbon. Your job is to take this square, and then position it to the top-right of the card with a negative offset of .5rem. Something that looks a little bit like this.

0:00 We've got the ribbon container in the right place. Now, let's create the actual ribbon element. We can see here in Figma I drew some imaginary rectangles. We have our container that we've just built.

0:09 Now, we're going to focus on that part. We're not going to do the rotation just yet. Let's start by having an element that sits at the top of our rectangle, like so.

Rotation and Alignment

0:00 The first thing we're going to do is give this anchor tag a width of w-40. That's going to help us visualize things a little bit better. Now the banner sticks out of the container square. That's on purpose so we can figure out where the edges should align.

0:14 Let's try rotate the banner. Then we'll try to do this bottom right edges alignment. I'll go with rotate. I think we can go rotate 45 degrees here. That's not looking quite like what we want just yet.

0:27 To be honest, when building this ribbon myself, I got stuck for quite a while trying to figure out a good way to rotate and position this element properly. I've tried magic numbers, flexbox, lots of things. I'll show the solution that worked great for me.

0:40 Let me remove the rotate-45 class for a second because that was one of the reasons why it got so complicated when I was prototyping this component. I was trying to position it while rotated. This really led to a lot of confusion. Let's position it first and then rotate it.

0:57 Let's try to line up these two bottom right edges, here and there, at the bottom of the container. The parent container, the square here, has a position of absolute. Inside of it, this element is a child.

1:10 If I give a class of absolute here, it will take its absolute parent, this element, as its own relative context, which means that I can position the element to the bottom right with bottom- and right-.

1:24 That's a great start. Now we can try rotate the element once again with rotate-45. We're still not quite there yet. If you look at how the element rotates, you might notice something. Let me change the value of the rotation. Let's go with rotate- to start with and then 3, 6, 12.

1:44 It looks like the rotation is happening right around the center of the element. Imagine if you had a pin and you put it right in the middle of this ribbon element. Then you took the edges and started moving them with your hands. It pivots around the center point. This is exactly what's happening because of the transform-origin property, which is set by default to center.

2:07 If you could take that pin away from the center of the element and place it anywhere you want it, where would you place it on the element to make the rotation happen like we want? Let's not actually put a real pin on our screen, please.

2:22 The bottom right of the element sounds like an ideal place to put that pin. We will put it right in the bottom right corner and then take the top left edge and pivot it around. If I type the word origin, you can see that we set it to origin-center. We have top, top-right, right, and bottom-right.

2:38 If I hit save, you might notice that now our bottom right corners are perfectly aligned. If I go through the rotation increments again with , 3, 6, 12, you can see that it's always right where it should be. If we go with 45, we have the perfect alignment that we were looking for.

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.

Precise Banner Width Calculation

0:00 The first thing we should do is move away from an absolute unit value like pixels and use something like a percentage-based value. Right now, we're using w-40, but look at what happens if I change the dimension of the container element to something like 48.

0:14 As you can see, the ribbon banner itself is not going to adapt to this, so let's go back to 32, and we're going to use a percentage-based value. I'll start with w-full, which is 100 percent. That's going to be too short, but now, if the container width changes, the ribbon width will remain proportional to the container. 

0:34 100 percent width is obviously not enough. What about 200 percent? We don't have that value out of the box, but we can use arbitrary values to go width 200 percent. Whoa, this is clearly too much now. It's breaking out of our view port. 

0:49 What about 150 percent? It's getting close. You might think that we can get away with this, especially because we're going to crop out the excess of the ribbon. Yeah, if we look at the figma file for a second, we can see that our banner rectangle here is being cropped to the area of the container. 

1:07 We'll eventually translate this in CSS by using overflow-hidden on the container. Let me show you that real quick. On the container element here, I'll add overflow-hidden. Eventually, this would not have a background color either. We just have it to see what happens now. 

1:23 Our text is still cropped, but if we also had a text-center class on the ribbon, you would likely get away with this. We're not going to settle for that here. We want to have the exact value, and we want to be able to explain why, which is the key part. While we need the overflow-hidden class eventually, I'll remove it for now. I'll bring back the background color of bg-amber-100. 

1:45 150 percent is too much. What about 140 percent? Ooh, it's getting really close. Let me open this in a browser so I can zoom in real close. You can see we're not quite there, but it's getting really close. Maybe 141 percent? Mm, that looks very, very close. 

2:05 What are we doing here? Magic numbers, [gasp] that's what we're doing here. To this, I say stop. [electronic stop sound] Let's figure out the real, logical value that our banner should have. Instead of nudging our width one percent at a time like we started doing, let's start thinking about what we're trying to measure here. 

2:22 Let's go back to drawing imaginary shapes in our figma file. Take a look at that shape here, a right-angled triangle to be precise. All of a sudden, it's pretty clear what we're trying to measure. We're measuring the length of a right-angled triangle's longest edge, which is also called the hypotenuse. 

2:39 You probably learned at some point about the Pythagorean theorem. That's pretty hard to say for me in English, and it's also probably been a long while since you used that theorem last. If you take a right-angled triangle where the longest edge is C, A^2 + B^2 = C^2. 

2:55 In our case, let's say the value of A was one and B was one as well. You can see the value of C would be approximately 1.41. Wait, remember the width we've used in our code? 141 percent. If our container's height and width were both 100 percent, the diagonal of that square would be roughly 141.42 percent. 

3:18 I can copy that value and use that here. You can see that now width is set with extreme precision. More importantly, we have an explanation for this value. We went from nudging our width bit by bit to having a scientific explanation for why we have an exact value with a theorem to back it up.

0:00 We've worked out the rotation and position of our banner. The next thing we want to figure out is what width it should have. Currently, our ribbon has a width of w-40. As you can see, it's not quite enough. It's a little bit too short.

0:11 What we want to try and avoid doing here is nudge the width until we find the right value using magic numbers. If you look at implementations of ribbons in the world, if you search for CSS ribbon, then look at most code examples, you will find that width set as a random value, something like 276 pixels, which is typically a magic number.

0:34 What you need to try to do is figure out the exact width the ribbon should have, but also be able to explain why you've chosen that number. Good luck.

Meaningful Value Extraction

0:00 We want to transform this arbitrary value here into a class called w-square-diagonal. Obviously, we broke the design since that doesn't exist yet, but let's work on that. Here's what we want the calculation to be doing. 

0:14 If we agree that both the height and the width of the container is one, the value of the diagonal, which is the square root of A^2 + B^2, is also the square root of 1^2 + 1^2. 1^2 is 1, so that value here is, in fact, the square root of 2. While it's pretty tricky to calculate the square root of a number in CSS, it's really easy to do with JavaScript. 

0:38 A good place to do this abstraction would be in a Tailwind config. Inside the config, I will extend the theme. We could consider extending the entire spacing object, but right now, this squared diagonal width we only want to set as a width. 

0:52 I'll open the width object and create a new square-diagonal key, and here we'll do some maths with JavaScript. I can get the square root of 2 with math.sqrt and pass the number 2. With that, we've created a new w-square-diagonal utility class, but it looks kind of broken. 

1:10 If we hover over that class to see what was generated, it generated a width of 1.41421356-blah-blah-blah pixels. We don't want pixels, and we don't want 1.41. We want 141. What we can do is multiply it by 100 and then convert this into a percentage value by adding a string of percent. 

1:30 Now, the entire value will be coerced into a string. You can see that the width works perfectly now. If I hover over the class, we have that width set correctly. Arguably, there's a few too many decimals here. Let's stick to just two decimals. 

1:45 To do so, we're going to take this math expression and run it through toFixed, which will let us define how many fraction digits we want. Here, we'll go with two. Now, we have this really tidy 141.42 percent set as the width of the w-square-diagonal utility class. 

2:03 I think we solved a pretty tricky problem here, and we've solved it in a really elegant manner.

0:00 We've worked out the exact width that our ribbon banner should have. We wrote an arbitrary value for that. Now, we know why we're using this value, but if someone else was to jump into this code base, that value, honestly, would feel magic.

0:13 For that reason, the next thing we're going to do is abstract away this magic value into a w-square-diagonal utility class, which will let its name convey the intent of the class.

Add Bespoke Ribbon Styles

0:00 To make the ribbon look nicer, I'll start by changing the text color a little bit. I'll use text ember, and let's go with something like 800 probably. It seems a bit light, but if we changed the font weights that might look better. 

0:14 Font, semi-bold. Yeah. That's nice. Let's make it uppercase. I probably want the text a bit smaller with textsm or even text extra-small. I'll increase the letter spacing with tracking. Let's go with wider. Nice. I also probably want to add some vertical padding, so I'll go with PY-2. 

0:37 That's a bit too much, so let's try PY-1. Actually, let's go with 1.5, which is in between. That's nice. Let me also remove this BG ember 100 class on the parents, so we have a better idea of what the ribbon actually looks like, and I think we can add a shadow as well. Nice. I'll go really subtle with shadow SM. That's great. 

0:58 One thing I notice here is the text is dangerously close to the edge of the card. What we could do is increase the size of the parents square. Perhaps instead of 32 Let's go with 36. That's better. This is why we have defined our width as a percentage-based value, so we can increase the container and everything follows along. 

1:17 By the way, our entire design here assumes that the container here is square and has a perfect aspect ratio of one by one. For example, if I had 36 in width, but the height was 24, you can see that everything is thrown out. 

1:29 One thing we can do instead of having to change both the width and height equally is remove one of them like the height, and use aspect ratio and use aspect square which is one by one. Defining the width only will dictate what size the ribbon is, and we only have to change one value for that. Let's go back to 36, which I think fits nicely. I'm pretty happy with these stars and ready to move along.

0:00 Great job. We're getting closer to having a really cool ribbon banner. Let's take it over the finish line. In this step, we're going to add some styles to the banner itself. There are no guidelines here. It's up to you to style it like you want. Maybe do some typographic styles, add some padding, etc. Let's make it nice. Just have fun with that one.

Create a Wraparound Effect

0:00 Step one is pretty easy. We've already done it before in this tutorial. I'll add a class of overflow-hidden, remembering the shape of that square remind the ribbon. This will crop out the elements. Immediately, this thing starts to look really cool. 

0:13 Next, I want to add darker elements behind the corners. We want one little square here and one little square there. If we look at the parent component, remember, we are offset by top-2 and right-2 negative. Technically, if we had a square of level 2 by level 2, which is eight pixel by eight pixel, it should fill this exact little gap here. 

0:37 Once again, the container here has a position of absolute. If I create a child element inside of it, it'll treat that container as its relative context. I have a div with a position of absolute, a height of 2, and a width of 2. Let's give it a bg-amber. The banner itself is 300, so let's go with 500. 

0:56 Look at this! Straight off the bat, it looks really good. If I zoom in in the browser, it looks exactly like what we want. Notice how this shape appears behind the ribbon, which is what we want. We didn't have to specify any index value. 

1:09 This is because the source order of the HTML already dictates that. If I had these elements after my anchor tag, the square would now appear above the banner, which completely kills the wrap-around illusion we're going for. Let's move that back up. 

1:23 Also, note that I did not have to specify top- and left- since it's the default, but I think we should actually do it to be more explicit -- top-, left-. Nothing's going to change, but now we have the blueprints to create the other dark spot on the bottom-right corner. As you can imagine, I'll change this to bottom- and right-. Boom, this by itself is already a perfectly acceptable ribbon. 

1:48 Let's maybe add some hover state as well to sell it even more. Here we have bg-amber-300. Perhaps on the hover, we could change this to bg-yellow-300, which is slightly different. It would give it this extra little element of attention when you hover over it. I can add this checkmark. 

2:06 Our last task is to round the ribbon corners. That might seem trickier than it actually is. You may think that you need to start using rounded corner on the bottom-right corner of the little shape there and top-left corner here, but remember we have this invisible container element here that has an overflow-hidden class. 

2:23 If we round the corners of this element, the cropping will respect the rounded corners. All I have to do is go in the parent container here and go rounded. Let's try lg to make it really obvious. You can see the rounded corners are definitely there. That's probably too much. I think just rounded here will do. It's still a bit too much, so even rounded-sm for small. Here, that's looking really good. 

2:50 There you have it. Let me remove these comments, and this is all of our code. In about 10 lines of HTML and CSS, we've created this really cool ribbon element that looks great and, as you can imagine, can be quite flexible. You can change the dimensions, the colors, the contents, and also think about changing the positioning. 

3:09 We're going to have one more bonus lesson where we're going to look at just that.

0:00 All right. Let's now create a wraparound effect to finish off our ribbon banner. We'll do this in three steps. First, we'll crop the ribbon to the container area, which is this element here, and then we'll add darker elements behind the corners and around those corners, to create this illusion that the ribbon wraps around. 

0:17 Looking at a design example, imagine a real ribbon wrapping around a piece of cardboard, and the light would come from up here. These parts here and there would be in the shade and therefore a bit darker, and also rounding the corners a little bit sells the effect even more. That's your task for this final challenge. Good luck.

BONUS: Add Multiple Style Options

0:00 Let me walk you through my thought process here. First thing I'll do is add a comment on this one, which is Top Right. I will duplicate everything, and this one is going to be Top Left. Right now, we have two elements exactly overlapping, so we don't see the difference, but let's start the migration to the top-left corner and see what sort of elements we have to change. 

0:22 The first thing we have to do is, instead of -right-2, I'm going to go -left-2 here. Here's the second ribbon showing up. Next, I think we should change the rotation. Down here, instead of rotate-45, I will go -rotate-45. With that, we have absolutely destroyed our component for the time being, but let's fix that. 

0:43 Remember, we put our pin on the bottom right here, which is down here, and our ribbon, which was up here like this, went [jjjooop], and how is like that. We need to change the pin from bottom-right to bottom-left. Instead of absolutely positioned to bottom and right-, once again, we want to change to bottom and left-. Nice. 

1:06 We can see so far a lot of the changes are just changing right to left. Finally, we want to fix up our dark shade spots here. The first one should go to bottom- and left-, and the second one should go from top- and right-. Just for fun, let's change all the instances of amber for this one to green, and perhaps the yellow on hover could be emerald. 

1:29 We'll also change the text. This one will say Top left, and we'll make it a bit smaller with w-, let's try 24. It might be a bit too small. Eh, that's all right. 

1:42 Let's do the process one more time, but hopefully, you're already noticing the sort of elements that need to change. This one will be -bottom-2 and -left-2. The rotation will go back to positive, rotate-45, but this time, the origin should be origin-top-left, I think, and so should the absolute positioning of top-, left-. Nice. 

2:04 Let's fix our darker shade, so top-, left-, and bottom-, right-. Let's change this one from green to purple, and the hover state will be violet. That's pretty good. This one can say Bottom left. We need to increase the size a little bit, so 28. 

2:24 Look at our ribbons. They look pretty cool. As you've noticed, switching the corner of the ribbon was pretty simple. There's not that many classes changing. We've noticed a pattern. It's mostly the top-left bottom-right positioning and rotate that changes and then the width and colors, of course. 

2:41 Now, we have our three blocks of HTML representing these three ribbons. We could stop there, but we may as well create a quick little component with some props.

0:00 You've made it. Congratulations. You've built a pretty cool ribbon banner element. With a little bit of extra work, we could turn this into a reasonable, flexible ribbon component. 

0:10 In this bonus challenge, what you have to do is duplicate the code for the ribbon, which is here, and create additional components. Make one go on the top-left corner and one go on the bottom-left corner. 

0:22 Doing so is going to expose what styles have to change from ribbon to ribbon. Hopefully, this will trigger some thinking about what options and parameters you would allow to pass through this ribbon component if you were to reuse it in multiple scenarios.

Transcript

Create Ribbon Banner Element

The ribbon inside the container

Transcript