Notifications

Composant Notifications

Un composant de notifications réactif avec une conception 3D, une mise en page simple en niveaux de gris et une prise en charge du thème sombre, adapté aux sites Web d’entreprise.

Ouvrir l’aperçu

                <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>

Un composant de notifications simple et réactif avec prise en charge du mode sombre, conçu dans un style Skeuomorphic avec une palette de couleurs en niveaux de gris. Idéal pour un portfolio mettant en valeur des compétences minimales en matière de design.

Ouvrir l’aperçu

                <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>

Composant Notifications

Un composant de notifications réactif avec un style Material Design, une palette de couleurs complémentaire et une prise en charge du mode sombre, conçu avec Tailwind CSS à des fins de tableau de bord.

Ouvrir l’aperçu

                <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>

Composant Notifications

Un composant Notifications doté d’un design de glassmorphism avec une palette de couleurs monochromatiques, conçu pour les applications Web d’entreprise. Le composant comprend divers éléments interactifs et prend en charge le mode sombre.

Ouvrir l’aperçu

                <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>

Composant Notifications

Un composant de notifications skeuomorphique pour le commerce électronique avec une palette de couleurs vives, une interface complexe, un design réactif et une prise en charge du thème sombre, construit avec Tailwind CSS.

Ouvrir l’aperçu

                <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

Composant Notifications

Composant de notifications brutalistes avec des tons de terre pour Portfolio

Ouvrir l’aperçu

                
    <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

Composant Notifications

Composant de notifications réactives avec prise en charge du mode sombre pour le tableau de bord

Ouvrir l’aperçu

                <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>

Composant Notifications

Un composant de notifications conçu selon les principes de Material Design et une palette de couleurs monochromatiques pour les applications de commerce électronique, avec un design réactif et la prise en charge du thème sombre.

Ouvrir l’aperçu

                <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>

Composant Notifications

Un composant de notifications de style rétro/vintage conçu pour les tableaux de bord, avec plusieurs éléments interactifs et la prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="bg-purple-800 dark:bg-gray-900 p-5 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-white text-2xl font-bold mb-3">Notifications</h2>
    <div class="space-y-4">
        <div class="flex items-start bg-purple-700 dark:bg-gray-800 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-white font-semibold">John Doe</p>
                <p class="text-gray-300">You have a new message. Check it out!</p>
                <span class="text-sm text-gray-500">2 minutes ago</span>
            </div>
        </div>
        <div class="flex items-start bg-purple-700 dark:bg-gray-800 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-white font-semibold">Jane Smith</p>
                <p class="text-gray-300">Your report has been approved.</p>
                <span class="text-sm text-gray-500">15 minutes ago</span>
            </div>
        </div>
        <div class="flex items-start bg-purple-700 dark:bg-gray-800 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-white font-semibold">Chris Johnson</p>
                <p class="text-gray-300">New comment on your post.</p>
                <span class="text-sm text-gray-500">30 minutes ago</span>
            </div>
        </div>
        <div class="flex items-start bg-purple-700 dark:bg-gray-800 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-white font-semibold">Anna Taylor</p>
                <p class="text-gray-300">Don't forget to review your tasks.</p>
                <span class="text-sm text-gray-500">1 hour ago</span>
            </div>
        </div>
    </div>
    <a href="#" class="block text-center text-white bg-blue-600 hover:bg-blue-700 rounded-lg mt-5 p-2 transition duration-300">View All Notifications</a>
</div>

SkeuomorphicNotificationsComponent

Un composant de notifications simple et réactif inspiré du Skeuomorphism, avec une palette de couleurs analogue adaptée aux sites Web d’entreprise. Il inclut la prise en charge du thème sombre et utilise Tailwind CSS pour le style. Les images proviennent de picsum.photos et les avatars de randomuser.me.

Ouvrir l’aperçu

                <div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-xl">
  <div class="flex items-center space-x-4">
    <img class="w-12 h-12 rounded-full ring-2 ring-blue-300" src="https://randomuser.me/api/portraits/men/85.jpg" alt="User Avatar">
    <div>
      <div class="text-lg font-semibold text-gray-800 dark:text-gray-200">New Notification</div>
      <p class="text-sm text-gray-600 dark:text-gray-400">You have a new message from John Doe.</p>
    </div>
  </div>
  <div class="mt-4 flex justify-end">
    <button class="px-4 py-2 bg-blue-500 text-white rounded-full shadow hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800">
      View
    </button>
  </div>
</div>

Catégories