Badges Size
Primary
Primary
Secondary
Danger
Warning
<div class="tailwind-badge">
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-4 rounded text-[0.5rem] px-[0.3125rem] border border-primary-light-3 dark:border-transparent badge-xs bg-primary-light text-primary">Primary</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[0.6875rem] rounded text-[0.6875rem] py-[0.3125rem] px-2 border border-primary-light-3 dark:border-transparent badge-sm bg-primary-light text-primary">Primary</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-secondary-light dark:border-transparent text-secondary dark:text-white bg-secondary-light">Secondary</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.875rem] rounded text-sm px-2.5 border border-transparent badge-lg bg-danger-light text-danger">Danger</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[2.1875rem] rounded text-base py-[0.1rem] px-[0.9375rem] border border-transparent badge-xl bg-warning-light text-warning">Warning</span>
</div>
Badges Light
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
1
2
3
4
5
6
7
8
<div class="tailwind-badge">
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 primary-light-3 border-primary-light-3 dark:border-transparent bg-primary-light text-primary">Primary</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-secondary-light dark:border-transparent text-secondary dark:text-white bg-secondary-light">Secondary</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent bg-success-light text-success dark:text-white dark:bg-[#3a9b941a]">Success</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent bg-danger-light text-danger">Danger</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent bg-warning-light text-warning">Warning</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent bg-info-light text-info">Info</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent text-[#6e6e6e] bg-d-light-2">Light</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-d-light-2 bg-d-light dark:bg-[#6e6e6e59] dark:border-transparent dark:text-dark-2 text-dark">Dark</span>
</div>
<div class="tailwind-badge">
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 primary-light-3 border-primary-light-3 dark:border-transparent bg-primary-light text-primary">1</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-secondary-light dark:border-transparent text-secondary dark:text-white bg-secondary-light">2</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent bg-success-light text-success dark:text-white dark:bg-[#3a9b941a]">3</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent bg-danger-light text-danger">4</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent bg-warning-light text-warning">5</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent bg-info-light text-info">6</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent text-[#6e6e6e] bg-d-light-2">7</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-d-light-2 bg-d-light dark:bg-[#6e6e6e59] dark:border-transparent dark:text-dark-2 text-dark">8</span>
</div>
Badges
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<div class="tailwind-badge">
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent text-white bg-primary">Primary</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent text-white bg-secondary">Secondary</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent text-white bg-success">Success</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent text-white bg-danger">Danger</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent text-white bg-warning">Warning</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent text-white bg-info">Info</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent bg-d-light-2">Light</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent text-white bg-[#6e6e6e]">Dark</span>
</div>
Pill Badge
Pill badge
Pill badge
Pill badge
Pill badge
Pill badge
Pill badge
Pill badge
Pill badge
<div class="tailwind-badge">
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent badge-pill text-white bg-primary">Pill badge</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent badge-pill text-white bg-secondary">Pill badge</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent badge-pill text-white bg-success">Pill badge</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent badge-pill text-white bg-danger">Pill badge</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent badge-pill text-white bg-warning">Pill badge</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent badge-pill text-white bg-info">Pill badge</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent badge-pill bg-d-light-2">Pill badge</span>
<span class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent badge-pill text-white bg-[#6e6e6e]">Pill badge</span>
</div>
Link Badge
<div class="tailwind-badge">
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] rounded inline-block font-medium text-xs py-[5px] px-3 border border-transparent text-white bg-primary">Links</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] rounded inline-block font-medium text-xs py-[5px] px-3 border border-transparent text-white bg-secondary">Links</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] rounded inline-block font-medium text-xs py-[5px] px-3 border border-transparent text-white bg-success">Links</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] rounded inline-block font-medium text-xs py-[5px] px-3 border border-transparent text-white bg-danger">Links</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] rounded inline-block font-medium text-xs py-[5px] px-3 border border-transparent text-white bg-warning">Links</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] rounded inline-block font-medium text-xs py-[5px] px-3 border border-transparent text-white bg-info">Links</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] rounded inline-block font-medium text-xs py-[5px] px-3 border border-transparent bg-d-light-2">Links</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] rounded inline-block font-medium text-xs py-[5px] px-3 border border-transparent text-white bg-[#6e6e6e]">Links</a>
</div>
Rounded Badge
<div class="tailwind-badge">
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.8125rem] border border-transparent rounded-[1.25rem] text-white bg-primary">Rounded</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.8125rem] border border-transparent rounded-[1.25rem] text-white bg-secondary">Rounded</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.8125rem] border border-transparent rounded-[1.25rem] text-white bg-success">Rounded</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.8125rem] border border-transparent rounded-[1.25rem] text-white bg-danger">Rounded</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.8125rem] border border-transparent rounded-[1.25rem] text-white bg-warning">Rounded</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.8125rem] border border-transparent rounded-[1.25rem] text-white bg-info">Rounded</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.8125rem] border border-transparent rounded-[1.25rem] bg-d-light-2">Rounded</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.8125rem] border border-transparent rounded-[1.25rem] text-white bg-[#6e6e6e]">Rounded</a>
</div>
Rounded Outline Badge
<div class="tailwind-badge">
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.8125rem] border rounded-[1.25rem] border-primary text-primary">Rounded</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.8125rem] border rounded-[1.25rem] border-secondary text-secondary dark:text-white">Rounded</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.8125rem] border rounded-[1.25rem] border-success text-success">Rounded</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.8125rem] border rounded-[1.25rem] border-danger text-danger">Rounded</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.8125rem] border rounded-[1.25rem] border-warning text-warning">Rounded</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.8125rem] border rounded-[1.25rem] border-info text-info">Rounded</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.8125rem] border rounded-[1.25rem] border-light text-light">Rounded</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.8125rem] border rounded-[1.25rem] border-dark text-dark">Rounded</a>
</div>
Outline Circle Badge
<div class="tailwind-badge">
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.575rem] border rounded-full border-primary text-primary">1</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.575rem] border rounded-full border-secondary text-secondary dark:text-white">2</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.575rem] border rounded-full border-success text-success">3</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.575rem] border rounded-full border-danger text-danger">4</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.575rem] border rounded-full border-warning text-warning">5</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.575rem] border rounded-full border-info text-info">6</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.575rem] border rounded-full border-light text-light">7</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.575rem] border rounded-full border-dark text-dark">8</a>
</div>
Circle Badge
<div class="tailwind-badge">
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.575rem] border border-transparent rounded-full text-white bg-primary">1</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.575rem] border border-transparent rounded-full text-white bg-secondary">2</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.575rem] border border-transparent rounded-full text-white bg-success">3</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.575rem] border border-transparent rounded-full text-white bg-danger">4</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.575rem] border border-transparent rounded-full text-white bg-warning">5</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.575rem] border border-transparent rounded-full text-white bg-info">6</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.575rem] border border-transparent rounded-full bg-d-light-2">7</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] text-xs py-[0.1875rem] px-[0.575rem] border border-transparent rounded-full text-white bg-[#6e6e6e]">8</a>
</div>
Circle Badge Default
<div class="tailwind-badge">
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block rounded font-medium leading-[1.5] text-xs py-[5px] px-3 border border-primary text-primary">1</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block rounded font-medium leading-[1.5] text-xs py-[5px] px-3 border border-secondary text-secondary dark:text-white">2</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block rounded font-medium leading-[1.5] text-xs py-[5px] px-3 border border-success text-success">3</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block rounded font-medium leading-[1.5] text-xs py-[5px] px-3 border border-danger text-danger">4</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block rounded font-medium leading-[1.5] text-xs py-[5px] px-3 border border-warning text-warning">5</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block rounded font-medium leading-[1.5] text-xs py-[5px] px-3 border border-info text-info">6</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block rounded font-medium leading-[1.5] text-xs py-[5px] px-3 border border-light text-light">7</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block rounded font-medium leading-[1.5] text-xs py-[5px] px-3 border border-dark text-dark">8</a>
</div>
Number Badge
<div class="tailwind-badge">
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block rounded font-medium leading-[1.5] text-xs py-[5px] px-3 border border-transparent text-white bg-primary">1</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block rounded font-medium leading-[1.5] text-xs py-[5px] px-3 border border-transparent text-white bg-secondary">2</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block rounded font-medium leading-[1.5] text-xs py-[5px] px-3 border border-transparent text-white bg-success">3</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block rounded font-medium leading-[1.5] text-xs py-[5px] px-3 border border-transparent text-white bg-danger">4</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block rounded font-medium leading-[1.5] text-xs py-[5px] px-3 border border-transparent text-white bg-warning">5</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block rounded font-medium leading-[1.5] text-xs py-[5px] px-3 border border-transparent text-white bg-info">6</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block rounded font-medium leading-[1.5] text-xs py-[5px] px-3 border border-transparent bg-d-light-2">7</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block rounded font-medium leading-[1.5] text-xs py-[5px] px-3 border border-transparent text-white bg-[#6e6e6e]">8</a>
</div>
Badge Sizes
<div class="tailwind-badge">
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.5] rounded text-[0.5rem] px-[0.3125rem] border border-transparent badge-xs text-white bg-primary">xs</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[0.6875rem] rounded text-[0.6875rem] py-[0.3125rem] px-2 border border-transparent badge-sm text-white bg-secondary">sm</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block rounded font-medium leading-[1.5] text-xs py-[5px] px-3 border border-transparent badge-md text-white bg-success">md</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[1.875rem] rounded text-sm px-2.5 border border-transparent badge-lg text-white bg-danger">lg</a>
<a href="javascript:void(0)" class="mr-[0.3125rem] mb-[0.3125rem] inline-block font-medium leading-[2.1875rem] rounded text-base py-[0.1rem] px-[0.9375rem] border border-transparent badge-xl text-white bg-warning">xl</a>
</div>