Tailwind CSS Badge Examples

In this section we will see few tailwind CSS badge examples. badge is use show status, message,notification, inbox etc .


Tailwind CSS Badge Examples


Setup Tailwind CSS

Simple Badge

Button with Badge

Icon with Badge



Setup Tailwind CSS

First you need to install tailwind css on your system or you can use CDN

👉 The Easiest way to install Tailwind CSS with Tailwind CLI

<link href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


Simple Badge

<span class="text-xs px-2 py-0.5 font-bold bg-gray-100 text-gray-600 rounded">
    Default
</span>
<span class="px-2 py-0.5 text-xs font-bold bg-red-500 text-white rounded">
    Danger
</span>


<span class="px-2 py-0.5 text-xs font-bold bg-yellow-300 text-black rounded">
    Warning
</span>
<span class="text-xs px-2 py-0.5 rounded font-bold bg-green-500 text-white ">
    Success
</span>


<span class="text-xs px-2 font-bold bg-blue-500 text-white rounded py-0.5">
    info
</span>




Button with Badge

<button type="button" class="px-4 py-2 mr-2 text-white bg-blue-500 rounded">Button <span
        class="px-2 py-1 text-sm text-black bg-white rounded-full">9</span></button>



Icon with Badge

<span class="relative inline-block">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-16 h-16 text-gray-200" fill="none" viewBox="0 0 24 24"
        stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
    </svg>
    <span
        class="absolute top-0 right-0 px-2 py-1 text-xs font-bold leading-none text-red-100 transform bg-red-600 rounded-full">9</span>
</span>



More Components


Tailwind CSS Badge 

Tailwind CSS Search

Tailwind CSS Pagination

Tailwind CSS Table 

Tailwind CSS Button

Tailwind CSS Modals

Tailwind CSS Avatar

Tailwind CSS loading Spinner

Tailwind CSS Progress Bar 

Tailwind CSS Alert Components 

Responsive Card Grid With Tailwind CSS

Tailwind CSS Dropdowns

Tailwind CSS Card

Tailwind CSS List Group

Tailwind CSS Breadcrumbs

Tailwind CSS Accordion (FAQ)

Tailwind CSS Responsive Image Gallery with Grid

Tailwind CSS Tabs