How to create a ribbon for a pricing card with Tailwind CSS
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:
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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