CCHub Logo CCHub Tailwind Collection
Komponenten Benachrichtigungen Komponente "Benachrichtigungen"

Komponente "Benachrichtigungen"

Eine Benachrichtigungskomponente, die nach den Prinzipien des Material Designs und einem monochromen Farbschema für E-Commerce-Anwendungen entwickelt wurde, mit einem responsiven Design und Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

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

Verwandte Komponenten

Brutalist_Industrial_Notifications_Component

Eine komplexe, brutalistische Benachrichtigungskomponente für Industrie- und Fertigungsanwendungen mit einem Sonnenuntergangs-/Warm-Farbschema, Reaktionsfähigkeit und Unterstützung für den Dunkelmodus.

Offen

Komponente "Benachrichtigungen"

Benachrichtigungskomponente im Skeuomorphismus-Stil mit responsivem Design und Unterstützung für dunkle Themen. Diese Komponente verfügt über ein realistisches, geprägtes Aussehen für Benachrichtigungen, einschließlich eines subtilen Schatten- und Glanzeffekts. Es ist vollständig reaktionsschnell und enthält unterschiedliche Stile für den Dunkelmodus, um Lesbarkeit und Ästhetik bei allen Lichtverhältnissen zu gewährleisten. Verwendet Platzhalterbilder für Avatare.

Offen

Komponente "Benachrichtigungen"

Eine einfache, saubere und kontrastreiche Benachrichtigungskomponente, die für Buchungs- und Reservierungssysteme von Unternehmen und Fachleuten geeignet ist, mit vollständiger Reaktionsfähigkeit und Unterstützung des Dunkelmodus.

Offen