← 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-gray-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-gray-900">
            full access
          </p>
          <p class="font-semibold text-4xl tracking-tighter text-gray-900 mt-8">
            $9/month
          </p>
        </div>
        <p class="text-sm text-gray-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!

Reviews and opinions

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

No subscription required!

Lexington

Beautifully designed HTML, Astro.js and Tailwind themes! Save months of time and build your startup landing page in minutes.