devsnips
Search docs, APIs, guides…

Component

Notification Card

Notification panel with header, badge count, grouped notifications, and action links.

  • Component
  • Tailwind
  • HTML
  • MIT

What it does

Capabilities

  • Badge count
  • Notification list
  • Timestamps
  • Icons
  • Mark all read

Preview

Live component

Interactive preview
Open preview
9:41 100%
devsnips.site/library/tailwind/components/cards/notification-card/
fluid · no fixed width 100%
No dependencies Production-ready

Install

Add to your project

terminal
npx devsnips add Tailwind/Components/Cards/notification-card
registry path: Tailwind/Components/Cards/notification-card

Source

Implementation

code.html 
<div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
  <div class="px-5 py-4 border-b border-gray-100 flex items-center justify-between bg-gray-50/50">
    <div class="flex items-center gap-3">
      <div class="relative">
        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
          <svg class="w-5 h-5 text-blue-600" 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.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 0v1a3 3 0 11-6 0v-1m6 0H9"/>
          </svg>
        </div>
        <span class="absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center">3</span>
      </div>
      <div>
        <h3 class="font-semibold text-gray-900">Notifications</h3>
        <p class="text-xs text-gray-500">Recent activity</p>
      </div>
    </div>
    <button class="text-sm text-blue-600 font-medium hover:text-blue-700">Mark all read</button>
  </div>
  
  <div class="divide-y divide-gray-50">
    <div class="px-5 py-4 flex items-start gap-4 bg-blue-50/30">
      <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center shrink-0">
        <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
      </div>
      <div class="flex-1 min-w-0">
        <p class="text-sm text-gray-900"><span class="font-semibold">Payment received</span> of $2,450 from Acme Corp</p>
        <p class="text-xs text-gray-500 mt-1">2 minutes ago</p>
      </div>
    </div>
    
    <div class="px-5 py-4 flex items-start gap-4">
      <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=64&h=64&fit=crop&crop=faces" alt="" class="w-10 h-10 rounded-full object-cover shrink-0">
      <div class="flex-1 min-w-0">
        <p class="text-sm text-gray-900"><span class="font-semibold">Sarah Mitchell</span> commented on your design</p>
        <p class="text-xs text-gray-500 mt-1">15 minutes ago</p>
      </div>
    </div>
    
    <div class="px-5 py-4 flex items-start gap-4">
      <div class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center shrink-0">
        <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
      </div>
      <div class="flex-1 min-w-0">
        <p class="text-sm text-gray-900"><span class="font-semibold">Reminder:</span> Team meeting in 30 minutes</p>
        <p class="text-xs text-gray-500 mt-1">1 hour ago</p>
      </div>
    </div>
  </div>
  
  <div class="px-5 py-3 border-t border-gray-100">
    <a href="#" class="text-sm text-blue-600 font-medium hover:text-blue-700">View all notifications →</a>
  </div>
</div>
57 lines UTF-8 · LF · Spaces: 2
DevSnips AI ready Claude · Cursor · Windsurf

Agent skill & Model Context Protocol

Pass this component straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.

devsnips://components/cards/notification-card
Prompt instruction 
I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/components/cards/notification-card/

Install: npx devsnips add
Tailwind/Components/Cards/notification-card

This is the Notification Card — Notification panel with header, badge count, grouped notifications, and action links.

Use this DevSnips resource as the starting point for my project.
Adapt it to my project's stack and conventions, fix any issues,
and make it production-ready while preserving its intended design
and behavior.

Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.

Resource URI
devsnips://components/cards/notification-card