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"
  >
    &times;
  </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"
  >
    &times;
  </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"
  >
    &times;
  </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"
  >
    &times;
  </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"
  >
    &times;
  </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"
  >
    &times;
  </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"
  >
    &times;
  </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"
  >
    &times;
  </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"
  >
    &times;
  </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>