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-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>
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
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!