DEV Community

Cover image for Tailwind CSS 3 Badges Example
saim
saim

Posted on • Originally published at larainfo.com

Tailwind CSS 3 Badges Example

In this section we will create badges with tailwind css 3. We will create badges with shadow, badges ring style with Tailwind CSS 3.

Example 1

tailwind v3 simple and circle badge.



<div class="space-x-4">
    <span class="px-3 py-1.5 text-xs text-slate-800 bg-slate-100 rounded"> Badge</span>
    <span class="px-3 py-1.5 text-xs text-purple-800 bg-purple-100 rounded-full"> Badge</span>
    <span class="px-3 py-1.5 text-xs text-cyan-800 bg-cyan-100 rounded-full"> Badge</span>
</div>


Enter fullscreen mode Exit fullscreen mode

tailwind v3 badge

tailwind v3 badge with border style.



<div class="space-x-4">
    <span class="px-3 py-1.5 text-xs border border-slate-400 text-slate-800 bg-slate-100 rounded"> Badge</span>
    <span class="px-3 py-1.5 text-xs text-purple-800 bg-purple-100 border border-purple-400 rounded-full"> Badge</span>
    <span class="px-3 py-1.5 text-xs text-cyan-800 bg-cyan-100 rounded-full border border-cyan-400"> Badge</span>
</div>


Enter fullscreen mode Exit fullscreen mode

tailwind v3 badge with border

Example 2

tailwind v3 badge with ring style.



<div class="space-x-4">
    <span class="px-3 py-1.5 text-xs ring-2 text-slate-800 bg-slate-100 rounded"> Badge</span>
    <span class="px-3 py-1.5 text-xs ring-2 ring-purple-500 text-purple-800 bg-purple-100 rounded-full"> Badge</span>
    <span class="px-3 py-1.5 text-xs ring-2 ring-cyan-500 text-cyan-800 bg-cyan-100 rounded-full"> Badge</span>
</div>


Enter fullscreen mode Exit fullscreen mode

tailwind badge ring

tailwind v3 badge with shadow style.



<div class="space-x-4">
    <span class="px-3 py-1.5 text-xs shadow shadow-slate-500/50 text-slate-800 bg-slate-100 rounded"> Badge</span>
    <span class="px-3 py-1.5 text-xs shadow shadow-purple-500 text-purple-800 bg-purple-100 rounded-full"> Badge</span>
    <span class="px-3 py-1.5 text-xs shadow-lg shadow-cyan-500/40 text-cyan-800 bg-cyan-100 rounded-full"> Badge</span>
</div>


Enter fullscreen mode Exit fullscreen mode

tailwind v3 badge shadow

Buy Me A Coffee

Read Also

👉 Tailwind CSS Halloween Buttons Tutorial Example

👉 Tailwind CSS List Style Marker Example

👉 Create a Google Clone UI using Tailwind CSS

👉 Tailwind CSS Use Custom Fonts Example

👉 Tailwind CSS Line Chart Example

👉 Tailwind CSS Gradient Button Example

👉 Tailwind CSS Text Gradient Example

👉 Tailwind CSS Simple POST CRUD UI Example

👉 Tailwind CSS Thank You Page Example

👉 Tailwind CSS 3 Breadcrumb Example

👉 Tailwind CSS 3D Button Example

👉 How to Use Custom Colors in Tailwind CSS

👉 How to Use Strike Tag (cut text) in Tailwind CSS

👉 Tailwind CSS Headings Typography Examples

👉 Tailwind CSS Product List Example

👉 How to Center a Div in Tailwind CSS

Top comments (0)