Notification Dot

Preview

Tailwind Classes

relative after:absolute after:-top-1 after:-right-1 after:w-3 after:h-3 after:bg-red-500 after:rounded-full after:animate-pulse

CSS Code

.notification-dot::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  background: #ef4444;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

HTML Example

<button class="relative p-2 bg-gray-100 rounded-lg">
  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
  </svg>
  <span class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full animate-pulse"></span>
</button>

Use Cases

Browser Support

All modern browsers