CCHub Logo CCHub Tailwind Collection
Komponenten Popup-Benachrichtigungen Popup-Benachrichtigungen

Popup-Benachrichtigungen

Eine reaktionsschnelle, mit dunklem Design kompatible Toast-Benachrichtigungskomponente für den E-Commerce mit einem minimalistischen/flachen Design unter Verwendung eines komplementären Farbschemas.

Vorschau

HTML-Code 

<div class="fixed bottom-4 right-4 space-y-2">

  <!-- Success Toast (Example) -->
  <div class="bg-green-500 text-white px-4 py-3 rounded-lg shadow-md dark:bg-green-700">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <div>
          <p class="font-bold">Success!</p>
          <p class="text-sm">Item added to cart successfully.</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Error Toast (Example) -->
  <div class="bg-red-500 text-white px-4 py-3 rounded-lg shadow-md dark:bg-red-700">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l7-7m0 0l7 7m0-7l-7 7m7-7L7 7"></path>
        </svg>
        <div>
          <p class="font-bold">Error!</p>
          <p class="text-sm">Failed to add item to cart.</p>
        </div>
      </div>
    </div>
  </div>

    <!-- Info Toast (Example) -->
  <div class="bg-blue-500 text-white px-4 py-3 rounded-lg shadow-md dark:bg-blue-700">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
       <svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4H12a9 9 0 007.562-3.438 9 9 0 000-10.124A9 9 0 0012 3a9 9 0 00-7.562 3.438A9 9 0 004.062 12a9 9 0 003.438 7.562z"></path>
        </svg>
        <div>
          <p class="font-bold">Info!</p>
          <p class="text-sm">Your item is being processed.</p>
        </div>
      </div>
    </div>
  </div>


</div>

Verwandte Komponenten

Komponente "Popup-Benachrichtigungen"

Eine Toast-Benachrichtigungskomponente im brutalistischen Stil mit Tailwind CSS, die für ein Portfolio entwickelt wurde, in dem Arbeiten oder Produkte präsentiert werden. Das Design enthält ein analoges Farbschema und unterstützt den Dunkelmodus mit einer komplexen Benutzeroberfläche.

Offen

Komponente "Retro Toast-Benachrichtigungen"

Eine Popupbenachrichtigungskomponente im Retro-Design mit responsivem Design und Unterstützung für den Dunkelmodus.

Offen

Retro-Toast-Benachrichtigungen

Eine reaktionsschnelle Toast-Benachrichtigungskomponente mit Retro-/Vintage-Design, triadischem Farbschema und Unterstützung für den Dunkelmodus, die mit Tailwind CSS für die Portfolio-Verwendung erstellt wurde.

Offen