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