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

Getting Started

Welcome to this Pro Tailwind tutorial!

Step by step, we're going to build a Ribbon Banner element that can be used in many different scenarios. For example, on a pricing section or to draw attention to a new product in an e-commerce store.

Conner Ribon ImageLoading

Exercise

Here’s a link to a Figma file. This is just here for reference. No need to build a pixel-perfect implementation.

I've broken down the tutorial into a series of small challenges. If you're ready, jump into the first one!

Transcript

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.

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