Today, is Friday! And we are doing a ribbon using only Tailwind CSS.
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:
E-commerce Platforms:
Social Media Platforms:
Content Management Systems (CMS):
Event Management:
Educational Platforms:
Software and Applications:
Non-Profit and Charity Websites:
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.
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.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>
<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>
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
"I bought a beautiful theme from Lexington a couple weeks ago. I didn't know Astro at the time, but Michael helped me get set up and really went above and beyond with his support. Now I'm happily redoing my site to look gorgeous with his template."
Stuart
Creator of saasydb.com
"Michael is one of the best designers on Twitter, would highly recommend his Lexington Themes if you want something in tailwind that doesn’t look the same as everyone else!"
Alex Hughes
letsloopin.com
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!
Beautifully designed HTML, Astro.js and Tailwind themes! Save months of time and build your startup landing page in minutes.