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.

How to install & setup Tailwind CSS v3


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>
tailwind v3 badge

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>
tailwind v3 badge with border

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>
tailwind badge ring

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>
tailwind v3 badge shadow

tailwind v3 badge shadow


Read Also

Tailwind CSS 3 FAQ Accordion UI Example

Tailwind CSS 3 Alert Message Example

Tailwind CSS 3 Avatars Example

Tailwind CSS 3 Breadcrumb Example

Tailwind CSS v3 Button Examples

Tailwind CSS v3 Cards Examples

How to use dark mode toggle switch in Tailwind CSS 3

Tailwind CSS 3 Login Page UI Example