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

Komponente "Popup-Benachrichtigungen"

Eine minimalistische und lebendige Toast-Benachrichtigungskomponente mit Tailwind CSS. Die Komponente ist mit einem einfachen Layout für Portfolios konzipiert, unterstützt den Dunkelmodus und reagiert ohne JavaScript.

Vorschau

HTML-Code 

<div class="fixed bottom-5 right-5 space-y-4">
  <!-- Toast Notification -->
  <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md flex items-center justify-between">
    <div class="flex items-center">
      <div class="flex-shrink-0 bg-green-500 rounded-full p-1">
        <svg class="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
        </svg>
      </div>
      <div class="ml-3">
        <p class="text-sm font-medium text-gray-800 dark:text-white">Success!</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">Your action was successful.</p>
      </div>
    </div>
    <button class="ml-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
      <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>

  <!-- Another Toast Notification (Example) -->
  <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md flex items-center justify-between">
    <div class="flex items-center">
      <div class="flex-shrink-0 bg-blue-500 rounded-full p-1">
        <svg class="h-4 w-4 text-white" 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 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>
      </div>
      <div class="ml-3">
        <p class="text-sm font-medium text-gray-800 dark:text-white">Info</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">This is an informational message.</p>
      </div>
    </div>
    <button class="ml-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
      <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>

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

Retro_Vintage_Pastel_Finance_Toast_Notifications

Eine komplexe, reaktionsschnelle Toast-Benachrichtigungskomponente mit Retro-/Vintage-Ästhetik und pastellfarbenem Farbschema, die für Finanz-/Bankschnittstellen entwickelt wurde. Umfasst Unterstützung für den Dunkelmodus und mehrere Benachrichtigungstypen.

Offen

Komponente "Neumorphism-Popupbenachrichtigungen"

Neumorphism Toast Notifications Component mit responsiven Effekten und Unterstützung für dunkle Themen.

Offen