Search Components

Notifications

Small widgets that alert users to information

Notifications Component

A Neumorphic Notifications Component with a grayscale color scheme and moderate complexity, designed for blog/content consumption. It is responsive and supports dark theme.

Open Preview

                <div class="min-h-screen bg-gray-200 dark:bg-gray-800 flex items-center justify-center p-4">
  <div class="w-full max-w-sm mx-auto bg-gray-200 dark:bg-gray-800 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark p-6">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Notifications</h2>
    
    <div class="space-y-4">
      <!-- Notification 1 -->
      <div class="flex items-center p-3 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
        <img class="h-10 w-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://picsum.photos/id/1025/200/200" alt="User Avatar">
        <div>
          <p class="text-sm font-medium text-gray-800 dark:text-gray-200">John Doe commented on your post.</p>
          <p class="text-xs text-gray-600 dark:text-gray-400">2 hours ago</p>
        </div>
      </div>

      <!-- Notification 2 -->
      <div class="flex items-center p-3 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
        <img class="h-10 w-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://picsum.photos/id/1011/200/200" alt="User Avatar">
        <div>
          <p class="text-sm font-medium text-gray-800 dark:text-gray-200">New article published: "The Future of AI".</p>
          <p class="text-xs text-gray-600 dark:text-gray-400">1 day ago</p>
        </div>
      </div>

      <!-- Notification 3 -->
      <div class="flex items-center p-3 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
        <img class="h-10 w-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://picsum.photos/id/1005/200/200" alt="User Avatar">
        <div>
          <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Your subscription is expiring soon.</p>
          <p class="text-xs text-gray-600 dark:text-gray-400">3 days ago</p>
        </div>
      </div>
    </div>
    
    <div class="mt-6 text-center">
      <a href="#" class="inline-block px-5 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-800 rounded-full shadow-neumorphic-button-light dark:shadow-neumorphic-button-dark hover:shadow-neumorphic-button-inset-light dark:hover:shadow-neumorphic-button-inset-dark transition-all duration-300">
        View All Notifications
      </a>
    </div>
  </div>
</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #1f1f1f, -6px -6px 12px #3c3c3c;
  }
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #b0b0b0, inset -5px -5px 10px #ffffff;
  }
  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #1f1f1f, inset -5px -5px 10px #3c3c3c;
  }
  .shadow-neumorphic-button-light {
    box-shadow: 4px 4px 8px #b0b0b0, -4px -4px 8px #ffffff;
  }
  .dark .shadow-neumorphic-button-dark {
    box-shadow: 4px 4px 8px #1f1f1f, -4px -4px 8px #3c3c3c;
  }
  .hover\:shadow-neumorphic-button-inset-light:hover {
    box-shadow: inset 4px 4px 8px #b0b0b0, inset -4px -4px 8px #ffffff;
  }
  .dark .hover\:shadow-neumorphic-button-inset-dark:hover {
    box-shadow: inset 4px 4px 8px #1f1f1f, inset -4px -4px 8px #3c3c3c;
  }
</style>

Notifications Component

A simple, responsive notifications component for e-commerce, with 3D design elements and an Earth tones color scheme. Supports dark mode.

Open Preview

                <div class="p-4 md:p-8 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-800 dark:to-stone-900 min-h-screen flex items-center justify-center">
  <div class="max-w-md w-full bg-white dark:bg-stone-700 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105">
    <div class="p-6 md:p-8 border-b-2 border-stone-200 dark:border-stone-600">
      <h2 class="text-2xl md:text-3xl font-bold text-stone-800 dark:text-stone-100 mb-2 drop-shadow-md">Notifications</h2>
      <p class="text-stone-600 dark:text-stone-300">Stay updated on your recent e-commerce activities.</p>
    </div>
    <div class="divide-y divide-stone-200 dark:divide-stone-600">
      
      <!-- Notification Item 1 -->
      <div class="p-4 md:p-6 flex items-start space-x-4 animate-fade-in-down">
        <div class="relative w-12 h-12 rounded-full overflow-hidden shadow-lg transform -rotate-6 transition-all duration-300 hover:rotate-0">
          <img class="w-full h-full object-cover" src="https://picsum.photos/seed/product1/50/50" alt="Product Image">
          <div class="absolute inset-0 bg-gradient-to-br from-amber-400 to-orange-500 opacity-60"></div>
        </div>
        <div class="flex-1">
          <p class="text-stone-800 dark:text-stone-100 font-semibold">Order Delivered!</p>
          <p class="text-sm text-stone-600 dark:text-stone-300 mt-1">Your recent order <span class="font-mono text-xs bg-stone-200 dark:bg-stone-600 px-2 py-1 rounded">#12345</span> has been delivered successfully.</p>
          <span class="text-xs text-stone-500 dark:text-stone-400 mt-2 block">2 hours ago</span>
        </div>
      </div>

      <!-- Notification Item 2 -->
      <div class="p-4 md:p-6 flex items-start space-x-4 animate-fade-in-down animation-delay-200">
        <div class="relative w-12 h-12 rounded-full overflow-hidden shadow-lg transform rotate-3 transition-all duration-300 hover:rotate-0">
          <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div class="absolute inset-0 bg-gradient-to-br from-green-400 to-emerald-500 opacity-60"></div>
        </div>
        <div class="flex-1">
          <p class="text-stone-800 dark:text-stone-100 font-semibold">New Message from Seller</p>
          <p class="text-sm text-stone-600 dark:text-stone-300 mt-1">"Thank you for your purchase! Let us know if you have any questions."</p>
          <span class="text-xs text-stone-500 dark:text-stone-400 mt-2 block">1 day ago</span>
        </div>
      </div>

      <!-- Notification Item 3 -->
      <div class="p-4 md:p-6 flex items-start space-x-4 animate-fade-in-down animation-delay-400">
        <div class="relative w-12 h-12 rounded-full overflow-hidden shadow-lg transform -rotate-3 transition-all duration-300 hover:rotate-0">
          <img class="w-full h-full object-cover" src="https://picsum.photos/seed/promotion/50/50" alt="Promotion Icon">
          <div class="absolute inset-0 bg-gradient-to-br from-purple-400 to-indigo-500 opacity-60"></div>
        </div>
        <div class="flex-1">
          <p class="text-stone-800 dark:text-stone-100 font-semibold">Limited Time Offer!</p>
          <p class="text-sm text-stone-600 dark:text-stone-300 mt-1">Get <span class="font-extrabold text-lime-600 dark:text-lime-400">20% off</span> on all natural wood items. Shop now!</p>
          <span class="text-xs text-stone-500 dark:text-stone-400 mt-2 block">3 days ago</span>
        </div>
      </div>

    </div>
  </div>
</div>

<style>
@keyframes fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in-down {
  animation: fade-in-down 0.5s ease-out forwards;
}
.animation-delay-200 {
  animation-delay: 0.2s;
}
.animation-delay-400 {
  animation-delay: 0.4s;
}
</style>

Notifications Component

A responsive Notifications Component with 3D design, simple grayscale layout, and dark theme support, suitable for business websites.

Open Preview

                <div class="dark:bg-gray-900 bg-gray-100 p-6 rounded-lg shadow-lg relative overflow-hidden">
  <div class="absolute inset-0 bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400 opacity-20 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900"></div>
  <div class="relative z-10">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Notifications</h2>
    <div class="space-y-4">
      <div class="flex items-center bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition duration-300 hover:scale-[1.02] hover:shadow-lg">
        <img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <div>
          <p class="text-gray-900 dark:text-white font-semibold">John Doe</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">New message received.</p>
        </div>
      </div>
      <div class="flex items-center bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition duration-300 hover:scale-[1.02] hover:shadow-lg">
        <img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
        <div>
          <p class="text-gray-900 dark:text-white font-semibold">Jane Smith</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Liked your post.</p>
        </div>
      </div>
      <div class="flex items-center bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition duration-300 hover:scale-[1.02] hover:shadow-lg">
        <img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/19.jpg" alt="Avatar">
        <div>
          <p class="text-gray-900 dark:text-white font-semibold">Peter Jones</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Commented on your photo.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Notifications Component

A simple, responsive notifications component with dark mode support, designed in a Skeuomorphic style with a grayscale color scheme. Ideal for a portfolio to showcase minimal design skills.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden transform duration-300 hover:scale-105">
    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 flex items-center justify-between">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Notifications</h3>
      <span class="text-sm text-gray-500 dark:text-gray-400">3 New</span>
    </div>
    <div class="p-4 space-y-4">

      <!-- Notification Item 1 -->
      <div class="flex items-start space-x-3 p-3 rounded-md bg-gray-100 dark:bg-gray-750 shadow-md border border-gray-200 dark:border-gray-700 transform duration-200 hover:shadow-lg">
        <img class="h-10 w-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-800 dark:text-gray-200">John Doe commented on your post.</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</p>
        </div>
      </div>

      <!-- Notification Item 2 -->
      <div class="flex items-start space-x-3 p-3 rounded-md bg-gray-100 dark:bg-gray-750 shadow-md border border-gray-200 dark:border-gray-700 transform duration-200 hover:shadow-lg">
        <img class="h-10 w-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Jane Smith liked your photo.</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">5 hours ago</p>
        </div>
      </div>

      <!-- Notification Item 3 -->
      <div class="flex items-start space-x-3 p-3 rounded-md bg-gray-100 dark:bg-gray-750 shadow-md border border-gray-200 dark:border-gray-700 transform duration-200 hover:shadow-lg">
        <img class="h-10 w-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-800 dark:text-gray-200">You have a new message from Bob Johnson.</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">1 day ago</p>
        </div>
      </div>

    </div>
    <div class="px-6 py-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-right">
      <a href="#" class="text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transform duration-200 hover:underline">View All Notifications</a>
    </div>
  </div>
</div>

Notifications Component

A responsive Notifications Component with Material Design styling, complementary color scheme, and dark mode support, built with Tailwind CSS for a dashboard purpose.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden md:max-w-xl">
    <div class="md:flex">
      <div class="w-full p-6">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Notifications</h2>
          <span class="px-3 py-1 text-sm font-semibold text-purple-800 bg-purple-200 rounded-full dark:bg-purple-700 dark:text-purple-100">3 New</span>
        </div>

        <!-- Notification Item 1 -->
        <div class="flex items-center p-4 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
          <div class="flex-shrink-0">
            <img class="h-12 w-12 rounded-full object-cover" src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          </div>
          <div class="ml-4 flex-1">
            <div class="flex justify-between items-center">
              <p class="text-md font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
              <span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-300">Commented on your post "Understanding Material Design principles".</p>
          </div>
        </div>

        <!-- Notification Item 2 -->
        <div class="flex items-center p-4 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
          <div class="flex-shrink-0">
            <img class="h-12 w-12 rounded-full object-cover" src="https://www.randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          </div>
          <div class="ml-4 flex-1">
            <div class="flex justify-between items-center">
              <p class="text-md font-semibold text-gray-900 dark:text-gray-100">Jane Smith</p>
              <span class="text-sm text-gray-500 dark:text-gray-400">5 hours ago</span>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-300">Liked your recent dashboard design concept.</p>
          </div>
        </div>

        <!-- Notification Item 3 (New) -->
        <div class="flex items-center p-4 border-b border-rose-300 bg-rose-50 dark:bg-rose-900 dark:border-rose-700 hover:bg-rose-100 dark:hover:bg-rose-800 transition duration-150 ease-in-out relative">
          <div class="absolute top-2 right-2 px-2 py-1 text-xs font-semibold text-rose-800 bg-rose-200 rounded-full dark:bg-rose-700 dark:text-rose-100">New</div>
          <div class="flex-shrink-0">
            <img class="h-12 w-12 rounded-full object-cover" src="https://www.randomuser.me/api/portraits/men/19.jpg" alt="User Avatar">
          </div>
          <div class="ml-4 flex-1">
            <div class="flex justify-between items-center">
              <p class="text-md font-semibold text-gray-900 dark:text-gray-100">Robert Johnson</p>
              <span class="text-sm text-gray-500 dark:text-gray-400">10 hours ago</span>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-300">Shared your data visualization dashboard template with 5 people.</p>
          </div>
        </div>

        <!-- Notification Item 4 -->
        <div class="flex items-center p-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
          <div class="flex-shrink-0">
            <img class="h-12 w-12 rounded-full object-cover" src="https://www.randomuser.me/api/portraits/women/55.jpg" alt="User Avatar">
          </div>
          <div class="ml-4 flex-1">
            <div class="flex justify-between items-center">
              <p class="text-md font-semibold text-gray-900 dark:text-gray-100">Emily White</p>
              <span class="text-sm text-gray-500 dark:text-gray-400">1 day ago</span>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-300">Started following your dashboard updates.</p>
          </div>
        </div>

        <div class="px-6 py-4 bg-gray-50 dark:bg-gray-700 text-center">
          <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-200 font-semibold transition duration-150 ease-in-out">View All Notifications</a>
        </div>
      </div>
    </div>
  </div>
</div>

A Notifications component featuring a glassmorphism design with a monochromatic color scheme, tailored for business/corporate web applications. The component includes various interactive elements and supports dark mode.

Open Preview

                <div class="flex flex-col items-center justify-center p-8 bg-gray-900 text-white min-h-screen">
    <div class="bg-gray-800 backdrop-blur-md bg-opacity-30 rounded-lg shadow-lg p-6 max-w-md w-full">
        <h2 class="text-2xl font-bold mb-4">Notifications</h2>
        <!-- Notification Item -->
        <div class="flex items-start mb-4 p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 ease-in-out">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
            <div class="flex-1">
                <p class="font-semibold">John Doe</p>
                <p class="text-sm">You have a meeting scheduled at 3 PM.</p>
                <span class="text-xs text-gray-400">10 minutes ago</span>
            </div>
        </div>
        <!-- Notification Item -->
        <div class="flex items-start mb-4 p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 ease-in-out">
            <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
            <div class="flex-1">
                <p class="font-semibold">Jane Smith</p>
                <p class="text-sm">Your invoice has been paid.</p>
                <span class="text-xs text-gray-400">15 minutes ago</span>
            </div>
        </div>
        <!-- Notification Item -->
        <div class="flex items-start mb-4 p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 ease-in-out">
            <img src="https://randomuser.me/api/portraits/men/13.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
            <div class="flex-1">
                <p class="font-semibold">Mike Johnson</p>
                <p class="text-sm">New comment on your post.</p>
                <span class="text-xs text-gray-400">30 minutes ago</span>
            </div>
        </div>
        <!-- Notification Item -->
        <div class="flex items-start mb-4 p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 ease-in-out">
            <img src="https://randomuser.me/api/portraits/women/14.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
            <div class="flex-1">
                <p class="font-semibold">Emily Davis</p>
                <p class="text-sm">Project deadline is approaching.</p>
                <span class="text-xs text-gray-400">1 hour ago</span>
            </div>
        </div>
        <div class="mt-4 text-center">
            <button class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                View All Notifications
            </button>
        </div>
    </div>
</div>

Notifications Component

A Skeuomorphic Notifications Component for E-commerce with a vibrant color scheme, complex interface, responsive design, and dark theme support, built with Tailwind CSS.

Open Preview

                <div class="relative min-h-screen bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-700 p-8 flex items-center justify-center font-sans">

  <!-- Skeuomorphic Notification Container -->
  <div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-800 dark:to-gray-600 rounded-3xl shadow-2xl p-6 md:p-10 w-full max-w-lg
              border-t border-l border-gray-50 dark:border-gray-700
              border-b border-r border-gray-400 dark:border-gray-900
              transform transition-all duration-300 hover:scale-105">

    <!-- Header -->
    <div class="flex justify-between items-center mb-8 pb-4 border-b border-gray-300 dark:border-gray-500">
      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-gray-100 drop-shadow-md tracking-wide">Notifications</h2>
      <div class="relative">
        <button class="w-12 h-12 rounded-full bg-gradient-to-br from-rose-500 to-rose-700 dark:from-rose-700 dark:to-rose-900 p-1
                       shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200
                       focus:outline-none focus:ring-4 focus:ring-rose-300 dark:focus:ring-rose-600
                       flex items-center justify-center">
          <span class="text-white text-xl font-bold">5</span>
        </button>
        <span class="absolute top-0 right-0 block h-4 w-4 bg-lime-400 dark:bg-lime-600 rounded-full ring-2 ring-white dark:ring-gray-800 animate-pulse"></span>
      </div>
    </div>

    <!-- Notification List -->
    <div class="space-y-6 max-h-96 overflow-y-auto pr-2 custom-scrollbar">

      <!-- Notification Item 1: New Order -->
      <div class="flex items-center bg-gradient-to-br from-white to-gray-100 dark:from-gray-700 dark:to-gray-800 p-4 rounded-xl shadow-md
                  border-t border-l border-gray-100 dark:border-gray-600
                  border-b border-r border-gray-300 dark:border-gray-900
                  transform transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5">
        <div class="flex-shrink-0 w-14 h-14 rounded-full bg-gradient-to-br from-green-400 to-green-600 dark:from-green-600 dark:to-green-800
                    flex items-center justify-center shadow-inner-lg shadow-green-500/50 dark:shadow-green-900/50 mr-4">
          <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.592 1L21 6m-4 3l4 2m-4 2l4 2m-4 2l4 2M3 6l4 2m-4 6l4 2m-4 2l4 2M12 18h.01"></path></svg>
        </div>
        <div class="flex-grow">
          <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">New Order Placed!</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Order #12345 for $120.00 has been confirmed.</p>
          <p class="text-xs text-gray-500 dark:text-gray-500 mt-1">2 minutes ago</p>
        </div>
      </div>

      <!-- Notification Item 2: Product Restock -->
      <div class="flex items-center bg-gradient-to-br from-white to-gray-100 dark:from-gray-700 dark:to-gray-800 p-4 rounded-xl shadow-md
                  border-t border-l border-gray-100 dark:border-gray-600
                  border-b border-r border-gray-300 dark:border-gray-900
                  transform transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5">
        <div class="flex-shrink-0 w-14 h-14 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800
                    flex items-center justify-center shadow-inner-lg shadow-blue-500/50 dark:shadow-blue-900/50 mr-4">
          <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
        </div>
        <div class="flex-grow">
          <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Restocked!</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Your favorite

Notifications Component

Brutalist Notifications Component with Earth tones for Portfolio

Open Preview

                
    <div class="relative min-h-screen bg-stone-100 dark:bg-stone-900 font-mono p-8">

        <!-- Notifications Container -->
        <div class="max-w-4xl mx-auto border-4 border-stone-900 dark:border-stone-100 bg-stone-300 dark:bg-stone-800 shadow-[10px_10px_0_0_#000] dark:shadow-[10px_10px_0_0_#E0E0E0] p-6 md:p-10">

            <div class="flex justify-between items-center mb-8 pb-4 border-b-4 border-stone-900 dark:border-stone-100">
                <h1 class="text-3xl md:text-5xl font-extrabold text-stone-900 dark:text-stone-100 uppercase tracking-tighter">
                    Inbox (4)
                </h1>
                <div class="relative">
                    <select class="block appearance-none bg-stone-900 dark:bg-stone-100 text-stone-100 dark:text-stone-900 py-3 px-6 pr-8 rounded-none leading-tight focus:outline-none focus:bg-stone-700 dark:focus:bg-stone-300 focus:border-stone-700 dark:focus:border-stone-300 border-2 border-stone-900 dark:border-stone-100 shadow-[4px_4px_0_0_#5D4037] dark:shadow-[4px_4px_0_0_#A1887F]">
                        <option>Filter By</option>
                        <option>All</option>
                        <option>Unread</option>
                        <option>Archived</option>
                    </select>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-stone-100 dark:text-stone-900">
                        <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
                    </div>
                </div>
            </div>

            <!-- Notification Item 1 -->
            <div class="mb-6 p-6 border-4 border-stone-900 dark:border-stone-100 bg-stone-200 dark:bg-stone-700 shadow-[8px_8px_0_0_#9E9D24] dark:shadow-[8px_8px_0_0_#DCE775] transition-all duration-300 hover:shadow-[12px_12px_0_0_#9E9D24] dark:hover:shadow-[12px_12px_0_0_#DCE775] relative">
                <div class="absolute -top-3 -right-3 bg-red-600 dark:bg-red-400 text-white dark:text-stone-900 text-xs px-3 py-1 font-bold">NEW</div>
                <div class="flex items-start mb-4">
                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-4 border-stone-900 dark:border-stone-100 mr-4 shadow-[4px_4px_0_0_#5D4037] dark:shadow-[4px_4px_0_0_#A1887F]">
                    <div>
                        <h3 class="text-xl md:text-2xl font-bold text-stone-800 dark:text-stone-200 mb-1">Project Updates - Critical!</h3>
                        <p class="text-stone-600 dark:text-stone-400 text-sm">From: John Doe <span class="ml-2 text-stone-500 dark:text-stone-500 text-xs">2 hours ago</span></p>
                    </div>
                </div>
                <p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-4">
                    Hey team, urgent update on the

Notifications Component

Responsive Notifications Component with Dark Mode support for Dashboard

Open Preview

                <div class="relative">
  <!-- Notifications Button -->
  <button class="relative flex items-center justify-center w-10 h-10 bg-blue-500 text-white rounded-full shadow-lg focus:outline-none dark:bg-blue-700">
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <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 01-6 0v-1m6 0H9"></path>
    </svg>
    <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full dark:bg-red-800">3</span>
  </button>

  <!-- Notifications Dropdown (Hidden by Default) -->
  <div class="absolute right-0 mt-2 w-80 bg-white rounded-lg shadow-xl overflow-hidden z-10 dark:bg-gray-800 dark:text-gray-200">
    <div class="py-2">

      <!-- Notification Item 1 -->
      <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-gray-700">
        <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <p class="text-sm">
          <span class="font-bold">John Doe</span> added a new report.
          <span class="ml-2 text-xs text-gray-500 dark:text-gray-400">2 hours ago</span>
        </p>
      </a>

      <!-- Notification Item 2 -->
      <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-gray-700">
        <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
        <p class="text-sm">
          <span class="font-bold">Jane Smith</span> commented on your task.
          <span class="ml-2 text-xs text-gray-500 dark:text-gray-400">5 hours ago</span>
        </p>
      </a>

      <!-- Notification Item 3 -->
      <a href="#" class="flex items-center px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700">
        <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar">
        <p class="text-sm">
          <span class="font-bold">David Green</span> completed a project.
          <span class="ml-2 text-xs text-gray-500 dark:text-gray-400">Yesterday</span>
        </p>
      </a>

    </div>

    <!-- View All Button -->
    <a href="#" class="block bg-gray-50 text-center font-bold py-3 text-blue-500 hover:underline dark:bg-gray-700 dark:text-blue-400">
      View All Notifications
    </a>
  </div>
</div>

Notifications Component

A Notifications Component designed with Material Design principles and a monochromatic color scheme for e-commerce applications, featuring a responsive design and dark theme support.

Open Preview

                <div class="fixed inset-0 z-50 flex items-end justify-center p-4 space-x-4 sm:items-start">
  <div class="w-full max-w-sm">
    <div class="bg-gray-800 dark:bg-gray-900 rounded-lg drop-shadow-lg p-4">
      <div class="flex items-center space-x-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
          <h2 class="text-white text-lg font-semibold">New Message</h2>
          <p class="text-gray-300">You have a new message from a seller.</p>
        </div>
        <button class="text-gray-400 hover:text-gray-200">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
        </button>
      </div>
      <img src="https://picsum.photos/200/100" alt="Product Image" class="rounded-md mt-2" />
      <div class="mt-2">
        <span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full">E-commerce</span>
        <span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full float-right">5 min ago</span>
      </div>
    </div>
  </div>
  <div class="w-full max-w-sm">
    <div class="bg-gray-800 dark:bg-gray-900 rounded-lg drop-shadow-lg p-4">
      <div class="flex items-center space-x-2">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
          <h2 class="text-white text-lg font-semibold">Order Shipped</h2>
          <p class="text-gray-300">Your order #12345 has been shipped.</p>
        </div>
        <button class="text-gray-400 hover:text-gray-200">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
        </button>
      </div>
      <img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="rounded-md mt-2" />
      <div class="mt-2">
        <span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full">E-commerce</span>
        <span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full float-right">10 min ago</span>
      </div>
    </div>
  </div>
</div>

Search Components

Categories

Notifications