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

14.1k

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

Icon Notification Badge with Count

Author:
Arya

2 years ago

13.6k
Notification Bell w/ Pinging Badge

Author:
threehymns

1 year ago

6.5k
Info Badges
Badges for showing information about stuff

Author:
Mohit Prajapati

2 years ago

11.7k
Notification Badge

Author:
Mr Robot

2 years ago

9.8k
Notification Alert Section
Notification card with close button

Author:
Prashant

2 years ago

12.1k
Toast
mensajes de alerta a los visitantes de su sitio web.

Author:
Code huit

1 year ago

14.6k
Notification alert section
Show info, success, or error messages

Author:
Arya

2 years ago

10.1k
Badges (Multicolor)

Author:
Mr Robot

2 years ago

9.4k
IMDB score and votes box

Author:
Darius G

1 year ago

8.3k
Toast Notification

Author:
Anonymous

4 months ago

259
Product hunt showcase

Author:
Lukas Müller

2 years ago

12k
Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Author:
Ranit Saha

5 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components