Loading
Build a Flexible Ribbon Banner in Tailwind CSS Tutorial (10 exercises)
Exercise

BONUS: Add Multiple Style Options

You've made it. Congratulations. 🎉

You've built a pretty cool ribbon banner element. With a little bit of extra work, you could turn this into a reasonable, flexible ribbon component.

In this bonus exercise, you must duplicate the code for the ribbon and create additional components.

It should look like this:

BONUS- Multiple style optionsLoading

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

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.

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.

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.