Tailwind CSS Badge - Nuanxa
The alert component is used to display important messages or contextual feedback. It supports dismiss and show states controlled via data attribute options.
Default Badge
Basic badge component with standard styling.
Blue Green Red Orange Yellow Purple Cyan Gray Pink
<span
class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
>Blue
</span>
<span
class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
>Green
</span>
<span
class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
>Red
</span>
<span
class="px-2 py-1 text-xs font-semibold rounded-full bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200"
>Orange
</span>
<span
class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"
>Yellow
</span>
<span
class="px-2 py-1 text-xs font-semibold rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200"
>Purple
</span>
<span
class="px-2 py-1 text-xs font-semibold rounded-full bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-200"
>Cyan
</span>
<span
class="px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200"
>Gray
</span>
<span
class="px-2 py-1 text-xs font-semibold rounded-full bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-200"
>Pink
</span>
Pills Badge
Basic badge component with standard styling.
Blue Green Red Orange Yellow Purple Cyan Gray Pink
<span
class="px-2 py-1 text-xs font-semibold rounded-md bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
>Blue
</span>
<span
class="px-2 py-1 text-xs font-semibold rounded-md bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
>Green
</span>
<span
class="px-2 py-1 text-xs font-semibold rounded-md bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
>Red
</span>
<span
class="px-2 py-1 text-xs font-semibold rounded-md bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200"
>Orange
</span>
<span
class="px-2 py-1 text-xs font-semibold rounded-md bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"
>Yellow
</span>
<span
class="px-2 py-1 text-xs font-semibold rounded-md bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200"
>Purple
</span>
<span
class="px-2 py-1 text-xs font-semibold rounded-md bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-200"
>Cyan</span
>
<span
class="px-2 py-1 text-xs font-semibold rounded-md bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200"
>Gray
</span>
<span
class="px-2 py-1 text-xs font-semibold rounded-md bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-200"
>
Pink
</span>
Glass Badge
Basic badge component with standard styling.
Blue Green Red Orange Yellow Purple Cyan Gray Pink
<span
class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-500/20 text-blue-400 border border-blue-400/20 backdrop-blur-md"
>Blue
</span>
<span
class="px-2 py-1 text-xs font-semibold rounded-full bg-green-500/20 text-green-400 border border-green-400/20 backdrop-blur-md"
>Green
</span>
<span
class="px-2 py-1 text-xs font-semibold rounded-full bg-red-500/20 text-red-400 border border-red-400/20 backdrop-blur-md"
>Red
</span>
<span
class="px-2 py-1 text-xs font-semibold rounded-full bg-orange-500/20 text-orange-400 border border-orange-400/20 backdrop-blur-md"
>Orange
</span>
<span
class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-500/20 text-yellow-400 border border-yellow-400/20 backdrop-blur-md"
>Yellow
</span>
<span
class="px-2 py-1 text-xs font-semibold rounded-full bg-purple-500/20 text-purple-400 border border-purple-400/20 backdrop-blur-md"
>Purple
</span>
<span
class="px-2 py-1 text-xs font-semibold rounded-full bg-cyan-500/20 text-cyan-400 border border-cyan-400/20 backdrop-blur-md"
>Cyan
</span>
<span
class="px-2 py-1 text-xs font-semibold rounded-full bg-gray-500/20 text-gray-400 border border-gray-400/20 backdrop-blur-md"
>Gray
</span>
<span
class="px-2 py-1 text-xs font-semibold rounded-full bg-pink-500/20 text-pink-400 border border-pink-400/20 backdrop-blur-md"
>Pink
</span>
Dismissable Badge
Basic badge component with standard styling.
Blue Green Red Orange Yellow Purple Cyan Gray Pink
<span
class="badge inline-flex items-center px-2 py-1 text-xs font-semibold rounded-md bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 transition-all duration-300"
>
Blue
<button
type="button"
class="badge-close ml-1 text-[10px] font-bold cursor-pointer opacity-70 hover:opacity-100"
>
×
</button>
</span>
<span
class="badge inline-flex items-center px-2 py-1 text-xs font-semibold rounded-md bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 transition-all duration-300"
>
Green
<button
type="button"
class="badge-close ml-1 text-[10px] font-bold opacity-70 hover:opacity-100"
>
×
</button>
</span>
<span
class="badge inline-flex items-center px-2 py-1 text-xs font-semibold rounded-md bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 transition-all duration-300"
>
Red
<button
type="button"
class="badge-close ml-1 text-[10px] font-bold opacity-70 hover:opacity-100"
>
×
</button>
</span>
<span
class="badge inline-flex items-center px-2 py-1 text-xs font-semibold rounded-md bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200 transition-all duration-300"
>
Orange
<button
type="button"
class="badge-close ml-1 text-[10px] font-bold opacity-70 hover:opacity-100"
>
×
</button>
</span>
<span
class="badge inline-flex items-center px-2 py-1 text-xs font-semibold rounded-md bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 transition-all duration-300"
>
Yellow
<button
type="button"
class="badge-close ml-1 text-[10px] font-bold opacity-70 hover:opacity-100"
>
×
</button>
</span>
<span
class="badge inline-flex items-center px-2 py-1 text-xs font-semibold rounded-md bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200 transition-all duration-300"
>
Purple
<button
type="button"
class="badge-close ml-1 text-[10px] font-bold opacity-70 hover:opacity-100"
>
×
</button>
</span>
<span
class="badge inline-flex items-center px-2 py-1 text-xs font-semibold rounded-md bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-200 transition-all duration-300"
>
Cyan
<button
type="button"
class="badge-close ml-1 text-[10px] font-bold opacity-70 hover:opacity-100"
>
×
</button>
</span>
<span
class="badge inline-flex items-center px-2 py-1 text-xs font-semibold rounded-md bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200 transition-all duration-300"
>
Gray
<button
type="button"
class="badge-close ml-1 text-[10px] font-bold opacity-70 hover:opacity-100"
>
×
</button>
</span>
<span
class="badge inline-flex items-center px-2 py-1 text-xs font-semibold rounded-md bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-200 transition-all duration-300"
>
Pink
<button
type="button"
class="badge-close ml-1 text-[10px] font-bold opacity-70 hover:opacity-100"
>
×
</button>
</span>
Notification Badge
Basic badge component with standard styling.
<div class="relative">
<button class="relative p-3 bg-gray-100 dark:bg-gray-800 rounded-full">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6 text-gray-700 dark:text-gray-200"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0a3 3 0 01-6 0"
/>
</svg>
<span
class="absolute animate-bounce duration-300 top-1 right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-600 text-white text-[10px] font-semibold"
>5</span
>
</button>
</div>
<div class="relative">
<img
src="https://i.pravatar.cc/40"
class="w-10 h-10 rounded-full"
alt="User"
/>
<span
class="absolute animate-pulse duration-300 top-0 right-0 block h-3 w-3 rounded-full bg-green-500 ring-2 ring-white dark:ring-gray-900"
></span>
</div>
<div class="relative">
<button class="px-4 py-2 bg-blue-600 text-white rounded-md relative">
Messages
<span
class="absolute animate-bounce duration-300 -top-2 -right-2 px-1.5 py-0.5 text-[10px] font-semibold bg-red-600 text-white rounded-full"
>9+</span
>
</button>
</div>