← Back to all tutorials

How to create a ribbon for a pricing card with Tailwind CSS

Ribbon
Published and written on Aug 02 2024 by Michael Andreuzza

Today, is Friday! And we are doing a ribbon using only Tailwind CSS.

What is a ribbon?

A ribbon is a decorative element that is typically used to indicate the status of an item or a message. It is a great way to add a touch of elegance and personality to your website or app. It is commonly used in business and marketing websites, as well as in social media platforms. A ribbon can be used to indicate the status of an item, such as a new feature, a new product, or a new service.

Use cases:

  1. Business and Marketing Websites:

    • Product Launch: Highlight new products or features with a “New” or “Just Launched” ribbon.
    • Sales and Promotions: Indicate items on sale with a “Discount” or “Special Offer” ribbon.
    • Top Seller: Showcase best-selling items with a “Bestseller” ribbon.
    • Limited Time Offer: Emphasize limited-time promotions with a “Limited Time” ribbon.
  2. E-commerce Platforms:

    • New Arrival: Mark newly arrived products with a “New Arrival” ribbon.
    • Exclusive: Highlight exclusive items with an “Exclusive” ribbon.
    • Out of Stock: Show products that are currently unavailable with an “Out of Stock” ribbon.
    • Pre-Order: Indicate items available for pre-order with a “Pre-Order” ribbon.
  3. Social Media Platforms:

    • Verified Account: Display a “Verified” ribbon on profiles of verified users.
    • New Post: Highlight new posts or stories with a “New” ribbon.
    • Top Influencer: Identify top influencers with a “Top Influencer” ribbon.
  4. Content Management Systems (CMS):

    • Featured Article: Highlight featured articles with a “Featured” ribbon.
    • Trending: Mark trending topics or posts with a “Trending” ribbon.
    • Editor’s Pick: Indicate articles or posts selected by editors with an “Editor’s Pick” ribbon.
  5. Event Management:

    • Upcoming Event: Announce upcoming events with an “Upcoming” ribbon.
    • Sold Out: Show sold-out events with a “Sold Out” ribbon.
    • Early Bird: Highlight early bird tickets or offers with an “Early Bird” ribbon.
  6. Educational Platforms:

    • New Course: Mark newly added courses with a “New” ribbon.
    • Top Rated: Showcase top-rated courses with a “Top Rated” ribbon.
    • Featured Instructor: Highlight courses by featured instructors with a “Featured” ribbon.
  7. Software and Applications:

    • Beta Version: Indicate beta versions of apps or features with a “Beta” ribbon.
    • Update Available: Show available updates with an “Update Available” ribbon.
    • Trial: Highlight trial versions with a “Trial” ribbon.
  8. Non-Profit and Charity Websites:

    • New Campaign: Announce new fundraising campaigns with a “New Campaign” ribbon.
    • Urgent: Emphasize urgent causes or needs with an “Urgent” ribbon.
    • Thank You: Show appreciation to donors with a “Thank You” ribbon.

Now, let’s get started with the markup for the ribbon itself

The ribbon is a simple div element that is positioned absolutely at the top right corner of the page. It has a background color of blue, a white text color, and a font-semibold font.

Thge ribbon’s wraopper

  • absolute: This is a utility class that sets the element to be positioned absolutely.
  • right-0: This is a utility class that sets the right property of the element to 0.
  • top-0: This is a utility class that sets the top property of the element to 0.
  • h-16: This is a utility class that sets the height property of the element to 16.
  • w-16: This is a utility class that sets the width property of the element to 16.

The ribbon itself

  • absolute: This is a utility class that sets the element to be positioned absolutely.
  • transform: This is a utility class that sets the element to be transformed.
  • rotate-45: This is a utility class that sets the element to be rotated 45 degrees.
  • text-center: This is a utility class that sets the text-align property of the element to center.
  • py-1: This is a utility class that sets the padding-top and padding-bottom properties of the element to 1.
  • right-[-35px]: This is a utility class that sets the right property of the element to -35px.
  • top-[32px]: This is a utility class that sets the top property of the element to 32px.
  • w-[170px]: This is a utility class that sets the width property of the element to 170px.
<div class="absolute right-0 top-0 h-16 w-16">
  <div
    class="absolute transform rotate-45 bg-blue-600 text-center text-white font-semibold py-1 right-[-35px] top-[32px] w-[170px]">
    50% off
  </div>
</div>

The whole markup for the card witht he ribbon

<div
  class="relative overflow-hidden p-8 lg:p-10 max-w-xs bg-white shadow-xl shadow-neutral-500/30 border rounded-xl">
  <div class="absolute right-0 top-0 h-16 w-16">
    <div
      class="absolute transform rotate-45 bg-blue-600 text-center text-white font-semibold py-1 right-[-35px] top-[32px] w-[170px]">
      50% off
    </div>
  </div>
  <section class="flex flex-col h-full justify-between">
    <div>
      <div class="flex flex-col gap-2 w-full">
        <div class="flex flex-col gap-2">
          <p
            class="text-base font-medium uppercase tracking-tight text-neutral-900">
            full access
          </p>
          <p class="font-semibold text-4xl tracking-tighter text-neutral-900 mt-8">
            $9/month
          </p>
        </div>
        <p class="text-sm text-neutral-500 mt-4">
          This subscription tier caters to individuals and hobbyists seeking
          fundamental features.
        </p>
      </div>
    </div>
    <div class="mt-8 flex w-full">
      <a
        class="rounded-full bg-blue-50 px-8 py-2 h-12 text-sm font-semibold text-blue-600 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 items-center flex w-full justify-center"
        >Get started</a
      >
    </div>
  </section>
</div>

Conclusion

This is a simple ribbon that demonstrates how to use Tailwind CSS to create a ribbon with a predefined set of styles. You could use this ribbon to highlight new products, promotions, or special offers. It’s a great starting point for building more complex ribbons.

Hope you enjoyed this tutorial and have a great day!

/Michael Andreuzza

Did you like this tutorial? Please share it with your friends!

Get lifetime access to every theme available today for $199 $139 and own them forever. Plus, new themes, lifetime updates, use on unlimited projects and enjoy lifetime support.

— No subscription required!