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.