Composants Notifications Composant Notifications

Composant Notifications

Un composant de notifications complexe et réactif stylisé avec des éléments inspirés du Bauhaus utilisant des neutres chauds, adapté à la documentation ou aux sites wiki, avec prise en charge du mode sombre.

Aperçu

HTML Code

<div class="font-sans text-gray-800 bg-gray-50 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-8 md:p-12 min-h-screen">
  <div class="mx-auto max-w-4xl bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">

    <!-- Header -->
    <div class="relative p-4 md:p-6 bg-gray-100 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600 flex justify-between items-center">
      <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Notifications</h2>
      <button aria-label="Mark all as read" class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors duration-200">
        Mark all as read
      </button>
      <div class="absolute top-0 left-0 w-full h-1 bg-yellow-500 dark:bg-yellow-400"></div>
    </div>

    <!-- Navigation / Filters -->
    <div class="flex border-b border-gray-200 dark:border-gray-600">
      <button class="flex-1 py-3 px-4 text-sm font-medium text-center text-gray-700 dark:text-gray-300 border-b-2 border-yellow-500 dark:border-yellow-400 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors duration-200">
        All (4)
      </button>
      <button class="flex-1 py-3 px-4 text-sm font-medium text-center text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors duration-200">
        Unread (2)
      </button>
      <button class="flex-1 py-3 px-4 text-sm font-medium text-center text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors duration-200">
        Archived (0)
      </button>
    </div>

    <!-- Notification List -->
    <div class="divide-y divide-gray-200 dark:divide-gray-700">

      <!-- Notification Item 1 (Unread, Alert) -->
      <div class="relative p-4 md:p-6 bg-yellow-50 dark:bg-gray-700 hover:bg-yellow-100 dark:hover:bg-gray-600 transition-colors duration-200">
        <div class="flex items-start">
          <span class="flex-shrink-0 mr-4 text-yellow-600 dark:text-yellow-400">
            <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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
            </svg>
          </span>
          <div class="flex-grow">
            <div class="flex justify-between items-baseline mb-1">
              <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">System Maintenance Alert</h3>
              <time datetime="2023-10-27T10:00:00Z" class="text-xs text-gray-500 dark:text-gray-400">5 min ago</time>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-2">Scheduled maintenance for our knowledge base will occur on Nov 1st. Expect brief downtime.</p>
            <a href="#" class="inline-block text-sm text-blue-600 dark:text-blue-400 hover:underline hover:text-blue-800 dark:hover:text-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Read more details</a>
          </div>
        </div>
        <div class="absolute top-2 right-2">
          <span aria-label="Unread indicator" class="block w-3 h-3 bg-blue-500 dark:bg-blue-400 rounded-full"></span>
        </div>
      </div>

      <!-- Notification Item 2 (Unread, New Feature) -->
      <div class="relative p-4 md:p-6 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
        <div class="flex items-start">
          <span class="flex-shrink-0 mr-4 text-green-600 dark:text-green-400">
            <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
            </svg>
          </span>
          <div class="flex-grow">
            <div class="flex justify-between items-baseline mb-1">
              <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">New Feature: Advanced Search Filters</h3>
              <time datetime="2023-10-26T15:30:00Z" class="text-xs text-gray-500 dark:text-gray-400">1 day ago</time>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-2">We've rolled out new filters to help you find documentation faster. Try them out!</p>
            <div class="relative w-full h-32 mb-2 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden">
                 <img src="https://picsum.photos/400/200?random=1" alt="New feature screenshot" class="absolute inset-0 w-full h-full object-cover" />
            </div>
            <div class="flex space-x-2">
              <a href="#" class="inline-block text-sm text-blue-600 dark:text-blue-400 hover:underline hover:text-blue-800 dark:hover:text-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">View demo</a>
              <a href="#" class="inline-block text-sm text-gray-600 dark:text-gray-400 hover:underline hover:text-gray-800 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Give feedback</a>
            </div>
          </div>
        </div>
        <div class="absolute top-2 right-2">
          <span aria-label="Unread indicator" class="block w-3 h-3 bg-blue-500 dark:bg-blue-400 rounded-full"></span>
        </div>
      </div>

      <!-- Notification Item 3 (Read, User Activity) -->
      <div class="p-4 md:p-6 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
        <div class="flex items-start">
          <div class="flex-shrink-0 mr-4 rounded-full overflow-hidden w-9 h-9">
              <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="User avatar" class="w-full h-full object-cover" />
          </div>
          <div class="flex-grow">
            <div class="flex justify-between items-baseline mb-1">
              <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">John Doe commented on 'Getting Started'</h3>
              <time datetime="2023-10-25T09:00:00Z" class="text-xs text-gray-500 dark:text-gray-400">2 days ago</time>
            </div>
            <p class="text-gray-700 dark:text-gray-300">"Great article! I found the section on initial setup particularly helpful."</p>
            <a href="#" class="inline-block text-sm text-blue-600 dark:text-blue-400 hover:underline hover:text-blue-800 dark:hover:text-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Reply to comment</a>
          </div>
        </div>
      </div>

      <!-- Notification Item 4 (Read, Article Update) -->
      <div class="p-4 md:p-6 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
        <div class="flex items-start">
          <span class="flex-shrink-0 mr-4 text-blue-600 dark:text-blue-400">
            <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="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-2.414-2.414A1 1 0 0015.586 6H9m-6 0h.01M6 21v-7a3 3 0 013-3h.482m-.509 5.867 2.1-2.101M16 17a2 2 0 100 4 2 2 0 000-4z"></path>
            </svg>
          </span>
          <div class="flex-grow">
            <div class="flex justify-between items-baseline mb-1">
              <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Article Updated: 'Troubleshooting FAQ'</h3>
              <time datetime="2023-10-24T18:00:00Z" class="text-xs text-gray-500 dark:text-gray-400">3 days ago</time>
            </div>
            <p class="text-gray-700 dark:text-gray-300">The 'Troubleshooting FAQ' article has been updated with new solutions for common issues.</p>
            <a href="#" class="inline-block text-sm text-blue-600 dark:text-blue-400 hover:underline hover:text-blue-800 dark:hover:text-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">View updated article</a>
          </div>
        </div>
      </div>

    </div>

    <!-- Footer / CTA -->
    <div class="p-4 md:p-6 bg-gray-100 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-600 flex justify-center items-center">
      <button aria-label="View all notifications" class="text-blue-600 dark:text-blue-400 hover:underline hover:text-blue-800 dark:hover:text-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors duration-200">
        View all notifications
      </button>
      <div class="absolute bottom-0 right-0 w-1 h-32 bg-yellow-500 dark:bg-yellow-400 hidden sm:block"></div>
    </div>

  </div>
</div>

Composants associés

Composant Notifications

Composant de notifications brutalistes pour le tableau de bord

Ouvrir

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

Composant Notifications

Composant de notifications de style skeuomorphisme avec conception réactive et prise en charge du thème sombre. Ce composant présente un aspect réaliste et en relief pour les notifications, y compris un effet d’ombre et de lueur subtil. Il est entièrement réactif et comprend des styles distincts pour le mode sombre, assurant une lisibilité et un attrait esthétique dans toutes les conditions d’éclairage. Utilise des images d’espace réservé pour les avatars.

Ouvrir