Tag
Tags are compact elements that represent an input, attribute, or action. tags allow users to enter information, make selections, filter content, or trigger actions. Check out code for detail of usage.
<a
href="#"
class="tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
Default
</a>
<a
href="#"
class="tag bg-primary text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
Primary
</a>
<a
href="#"
class="tag bg-secondary text-white hover:bg-secondary-focus focus:bg-secondary-focus active:bg-secondary-focus/90"
>
Secondary
</a>
<a
href="#"
class="tag bg-info text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/90"
>
Info
</a>
<a
href="#"
class="tag bg-success text-white hover:bg-success-focus focus:bg-success-focus active:bg-success-focus/90"
>
Success
</a>
<a
href="#"
class="tag bg-warning text-white hover:bg-warning-focus focus:bg-warning-focus active:bg-warning-focus/90"
>
Warning
</a>
<a
href="#"
class="tag bg-error text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90"
>
Error
</a>
<a
href="#"
class="tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80"
>
Light
</a>
Rounded Tag
Tags can have a rounded shape. To do this, you should use the
rounded-full utility Check out
code for detail of usage.
<a
href="#"
class="tag rounded-full bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
Default
</a>
<a
href="#"
class="tag rounded-full bg-primary text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
Primary
</a>
<a
href="#"
class="tag rounded-full bg-secondary text-white hover:bg-secondary-focus focus:bg-secondary-focus active:bg-secondary-focus/90"
>
Secondary
</a>
<a
href="#"
class="tag rounded-full bg-info text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/90"
>
Info
</a>
<a
href="#"
class="tag rounded-full bg-success text-white hover:bg-success-focus focus:bg-success-focus active:bg-success-focus/90"
>
Success
</a>
<a
href="#"
class="tag rounded-full bg-warning text-white hover:bg-warning-focus focus:bg-warning-focus active:bg-warning-focus/90"
>
Warning
</a>
<a
href="#"
class="tag rounded-full bg-error text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90"
>
Error
</a>
<a
href="#"
class="tag rounded-full bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80"
>
Light
</a>
Bordered Tag
Tags can have a border. Check out code for detail of usage.
<a
href="#"
class="tag rounded-full border border-primary/30 bg-primary/10 text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:border-accent-light/30 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25"
>
Primary
</a>
<a
href="#"
class="tag rounded-full border border-secondary/30 bg-secondary/10 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:border-secondary-light/30 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25"
>
Secondary
</a>
<a
href="#"
class="tag rounded-full border border-info/30 bg-info/10 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
>
Info
</a>
<a
href="#"
class="tag rounded-full border border-success/30 bg-success/10 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
>
Success
</a>
<a
href="#"
class="tag rounded-full border border-warning/30 bg-warning/10 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25"
>
Warning
</a>
<a
href="#"
class="tag rounded-full border border-error/30 bg-error/10 text-error hover:bg-error/20 focus:bg-error/20 active:bg-error/25"
>
Error
</a>
Tag Group
Tag group are an easy way to group a series of tags together. Check out code for detail of usage.
<div class="flex -space-x-px">
<a
href="#"
class="tag rounded-r-none bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
Primary
</a>
<a
href="#"
class="tag rounded-l-none bg-primary text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
55
</a>
</div>
<div class="flex -space-x-px">
<a
href="#"
class="tag rounded-r-none bg-info/10 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
>
Message
</a>
<a
href="#"
class="tag rounded-l-none bg-info text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/90"
>
65
</a>
</div>
<div class="flex -space-x-px">
<a
href="#"
class="tag rounded-full rounded-r-none border border-warning text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25"
>
Warnings
</a>
<a
href="#"
class="tag rounded-full rounded-l-none border border-warning bg-warning/10 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25"
>
35
</a>
</div>
<div class="flex -space-x-px">
<a
href="#"
class="tag rounded-r-none bg-success/10 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
>
Message
</a>
<a href="#" class="badge bg-success text-white shadow-lg shadow-success/50">
14
</a>
</div>
<div class="flex -space-x-px">
<a
href="#"
class="tag rounded-r-none bg-slate-150 px-4 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
Star
</a>
<a
href="#"
class="tag rounded-l-none bg-secondary text-white hover:bg-secondary-focus focus:bg-secondary-focus active:bg-secondary-focus/90"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
</a>
</div>
<div class="flex -space-x-px">
<div class="badge rounded-r-none border border-error text-error">
Remove
</div>
<a
href="#"
class="tag rounded-l-none bg-error text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</a>
</div>
<div
class="badge space-x-2 rounded-full bg-slate-150 text-slate-800 dark:bg-navy-500 dark:text-navy-100"
>
<i
class="fa-solid fa-person-biking text-sm text-slate-600 dark:text-navy-200"
></i>
<span>Default</span>
<button
class="btn h-4.5 w-4.5 rounded-full bg-black/20 p-0 hover:bg-black/30 focus:bg-black/30 dark:bg-white/20 dark:hover:bg-white/30 dark:focus:bg-white/30"
>
<i class="fa-solid fa-xmark dark:text-navy-50"></i>
</button>
</div>