Notification Center with Filter Tabs

Notification center UI featuring unread indicators, activity filters, user avatars and interactive mark-as-read functionality.

This tailwind example is contributed by JUGENDRA GANGWAR, on 02-Nov-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Toast, Snackbar

Other Notification

Author JUGENDRA GANGWAR

Tailwind v3.4 1

Fork Fullscreen

<section class="mx-auto w-full max-w-lg overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-xl shadow-slate-200/60">
  <header class="flex items-center justify-between border-b border-slate-100 p-5">
    <div>
      <h2 class="text-md font-semibold text-slate-900 uppercase">Notifications</h2>
      <p class="mt-1 text-xs text-slate-500"><span id="unreadCount">3</span> unread messages</p>
    </div>
    <button id="markAll" class="rounded-lg px-3 py-2 text-xs font-semibold text-indigo-600 hover:bg-indigo-50">Mark all as read</button>
  </header>
  <div class="flex gap-2 border-b border-slate-100 px-5 py-3">
    <button class="filter-btn active rounded-lg px-4 py-2 text-xs font-semibold uppercase" data-filter="all">All</button>
    <button class="filter-btn rounded-lg px-4 py-2 text-xs font-semibold text-slate-500 uppercase" data-filter="unread">Unread</button>
    <button class="filter-btn rounded-lg px-4 py-2 text-xs font-semibold text-slate-500 uppercase" data-filter="mentions">Mentions</button>
  </div>
  <div class="px-5 pb-2 pt-5">
    <h3 class="text-xs font-bold uppercase tracking-wider text-slate-400">Today</h3>
  </div>
  <div id="notificationList" class="divide-y divide-slate-100">
    <article class="notification unread flex gap-3 p-5" data-type="mentions">
      <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-sm font-bold text-indigo-600">JD</div>
      <div class="min-w-0 flex-1">
        <div class="flex items-start justify-between gap-2">
          <p class="text-sm font-semibold text-slate-900">James Davidson <span class="font-normal text-slate-500">mentioned you in a comment</span></p>
          <span class="unread-dot mt-1 h-2 w-2 shrink-0 rounded-full bg-indigo-600"></span>
        </div>
        <p class="mt-1 text-sm text-slate-600">"Great work on the latest dashboard design!"</p>
        <p class="mt-2 text-xs text-slate-400">5 minutes ago</p>
      </div>
    </article>
    <article class="notification unread flex gap-3 p-5" data-type="activity">
      <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-lg text-emerald-600">✓</div>
      <div class="min-w-0 flex-1">
        <div class="flex items-start justify-between gap-2">
          <p class="text-sm font-semibold text-slate-900">Payment successful</p>
          <span class="unread-dot mt-1 h-2 w-2 shrink-0 rounded-full bg-indigo-600"></span>
        </div>
        <p class="mt-1 text-sm text-slate-600">Your monthly subscription has been renewed successfully.</p>
        <p class="mt-2 text-xs text-slate-400">1 hour ago</p>
      </div>
    </article>
    <article class="notification unread flex gap-3 p-5" data-type="activity">
      <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-amber-100 text-lg text-amber-600">★</div>
      <div class="min-w-0 flex-1">
        <div class="flex items-start justify-between gap-2">
          <p class="text-sm font-semibold text-slate-900">New review received</p>
          <span class="unread-dot mt-1 h-2 w-2 shrink-0 rounded-full bg-indigo-600"></span>
        </div>
        <p class="mt-1 text-sm text-slate-600">Sarah left a 5-star review on your latest project.</p>
        <p class="mt-2 text-xs text-slate-400">3 hours ago</p>
      </div>
    </article>
    <article class="notification flex gap-3 p-5" data-type="mentions">
      <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-pink-100 text-sm font-bold text-pink-600">AM</div>
      <div class="min-w-0 flex-1">
        <p class="text-sm font-semibold text-slate-900">Amanda Miller <span class="font-normal text-slate-500">started following you</span></p>
        <p class="mt-1 text-xs text-slate-400">Yesterday</p>
      </div>
    </article>
  </div>
  <footer class="border-t border-slate-100 p-4 text-center">
    <button id="viewAll" class="text-sm font-semibold text-indigo-600 hover:text-indigo-800">View all notifications →</button>
  </footer>
</section>

</script>

Related Examples

Product hunt showcase

Lukas Müller

3 years ago

13k
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Abhiraj

1 year ago

2.2k
joker
joker cyber punk

Baraka Salvator

1 year ago

2.1k
NOTIFICATION
This code can serve as a boiler-plate for a notification for an application

NUNNA VIJAYA KRISHNA

8 months ago

1.2k
Engineering Project Dashboard
Track engineering assignments, project progress, technology stack, and delivery timelines in one simple dashboard.

Ayyamperumal S

7 months ago

541
Order History
Order History

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.7k
blog component
good blog

Uwera Dorcas

1 year ago

1.4k
invoice 02
product invoice

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.6k
register

Anonymous

2 weeks ago

61
machine
tell you how your MAC pc work

gidy

11 months ago

753
Privacy Policy
Privacy Policy

Tanvir Hasan Bappy (Tanvir)

1 year ago

2.1k
Payment Cards

Shammi Nethupul

2 years ago

3k