Home
Arya
Notification badges with count

Notification badges with count

This tailwind example is contributed by Arya, on 11-Jan-2023. Component is made with Tailwind CSS v3. similar terms for this example are Toast, Snackbar

Badge Notification

Author Arya

11.8k

Fork Fullscreen

<div class="flex space-x-5 space-y-5 flex-wrap justify-center items-baseline">
    <button class="relative bg-blue-700 hover:bg-blue-800 duration-300 py-2 px-4 text-blue-100 rounded">Primary
         <span class="absolute bg-blue-500 text-blue-100 px-2 py-1 text-xs font-bold rounded-full -top-3 -right-3">99+</span>
      </button>
    <button class="relative bg-blue-700 hover:bg-blue-800 duration-300 py-2 px-4 text-blue-100 rounded">Secondary
         <span class="absolute bg-gray-600 text-gray-100 px-2 py-1 text-xs font-bold rounded-full -top-3 -right-3">99+</span>
      </button>
    <button class="relative bg-blue-700 hover:bg-blue-800 duration-300 py-2 px-4 text-blue-100 rounded">Success
         <span class="absolute bg-green-700 text-green-100 px-2 py-1 text-xs font-bold rounded-full -top-3 -right-3">99+</span>
      </button>
    <button class="relative bg-blue-700 hover:bg-blue-800 duration-300 py-2 px-4 text-blue-100 rounded">Danger
         <span class="absolute bg-red-600 text-red-100 px-2 py-1 text-xs font-bold rounded-full -top-3 -right-3">99+</span>
      </button>
    <button class="relative bg-blue-700 hover:bg-blue-800 duration-300 py-2 px-4 text-blue-100 rounded">Warning
         <span class="absolute bg-yellow-500 text-yellow-900 px-2 py-1 text-xs font-bold rounded-full -top-3 -right-3">99+</span>
      </button>
    <button class="relative bg-blue-700 hover:bg-blue-800 duration-300 py-2 px-4 text-blue-100 rounded">Info
         <span class="absolute bg-teal-300 text-teal-900 px-2 py-1 text-xs font-bold rounded-full -top-3 -right-3">99+</span>
      </button>
    <button class="relative bg-blue-700 hover:bg-blue-800 duration-300 py-2 px-4 text-blue-100 rounded">Light
         <span class="absolute bg-gray-200 text-gray-900 px-2 py-1 text-xs font-bold rounded-full -top-3 -right-3">99+</span>
      </button>
    <button class="relative bg-blue-700 hover:bg-blue-800 duration-300 py-2 px-4 text-blue-100 rounded">Dark
         <span class="absolute bg-gray-900 text-gray-100 px-2 py-1 text-xs font-bold rounded-full -top-3 -right-3">99+</span>
      </button>
</div>

Related Examples