Komponenten Benachrichtigungen Minimalistische Benachrichtigungskomponente (Graustufen)

Minimalistische Benachrichtigungskomponente (Graustufen)

Eine einfache, minimalistische Benachrichtigungskomponente in Graustufen für Portfolios mit Unterstützung für reaktionsschnelle und dunkle Modi mit Tailwind CSS. Verwendet picsum.photos für Bilder und randomuser.me für Avatare.

Vorschau

HTML-Code

<div class="container mx-auto p-4">

  <!-- Light mode (default) -->
  <div class="bg-white shadow-md rounded-lg p-4 mb-4 hidden dark:block">
    <div class="flex items-start">
      <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
      <div class="flex-grow">
        <p class="text-gray-800 font-semibold">New Message</p>
        <p class="text-gray-600 text-sm">You have a new message from John Doe.</p>
      </div>
      <button class="text-gray-500 hover:text-gray-700 focus:outline-none">
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Dark mode -->
  <div class="bg-gray-800 shadow-md rounded-lg p-4 mb-4 dark:hidden">
    <div class="flex items-start">
      <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
      <div class="flex-grow">
        <p class="text-gray-200 font-semibold">New Message</p>
        <p class="text-gray-400 text-sm">You have a new message from John Doe.</p>
      </div>
      <button class="text-gray-500 hover:text-gray-300 focus:outline-none">
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
  </div>

</div>

Verwandte Komponenten

Komponente "Benachrichtigungen"

Eine Skeuomorphe Benachrichtigungskomponente für den E-Commerce mit einem lebendigen Farbschema, einer komplexen Benutzeroberfläche, einem ansprechenden Design und Unterstützung für dunkle Themen, die mit Tailwind CSS erstellt wurde.

Offen

Luxus-Benachrichtigungskomponente

Eine einfache, elegante Benachrichtigungskomponente, die für Reise-/Tourismus-Websites entwickelt wurde und sich durch einen Luxus-/Premium-Stil mit Unternehmensblautönen und vollständiger Reaktionsfähigkeit auszeichnet, einschließlich Unterstützung des Dunkelmodus.

Offen

Komponente "Benachrichtigungen"

Eine Benachrichtigungskomponente mit einem glasmorphischen Design mit einem monochromatischen Farbschema, das auf Geschäfts-/Unternehmenswebanwendungen zugeschnitten ist. Die Komponente enthält verschiedene interaktive Elemente und unterstützt den Dunkelmodus.

Offen