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

Komponente "Popup-Benachrichtigungen"

Eine reaktionsschnelle Popup-Benachrichtigungskomponente mit Skeuomorphic-Design und Unterstützung für den Dunkelmodus, die mit Tailwind CSS erstellt wurde.

Vorschau

HTML-Code 

<div class="fixed bottom-5 right-5 space-y-3">
  <!-- Success Toast -->
  <div class="flex items-center p-4 bg-white border border-gray-200 rounded-lg shadow-xl dark:bg-gray-700 dark:border-gray-700">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-green-500" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    </div>
    <div class="ml-3 text-sm font-normal text-gray-800 dark:text-gray-200">
      Successfully saved your settings.
    </div>
    <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-700 dark:hover:bg-gray-600">
      <span class="sr-only">Close</span>
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
  </div>

  <!-- Error Toast -->
  <div class="flex items-center p-4 bg-white border border-gray-200 rounded-lg shadow-xl dark:bg-gray-700 dark:border-gray-700">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-red-500" 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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    </div>
    <div class="ml-3 text-sm font-normal text-gray-800 dark:text-gray-200">
      Something went wrong.
    </div>
    <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-700 dark:hover:bg-gray-600">
      <span class="sr-only">Close</span>
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
  </div>

  <!-- Warning Toast -->
  <div class="flex items-center p-4 bg-white border border-gray-200 rounded-lg shadow-xl dark:bg-gray-700 dark:border-gray-700">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-yellow-500" 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>
    </div>
    <div class="ml-3 text-sm font-normal text-gray-800 dark:text-gray-200">
      Proceed with caution.
    </div>
    <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-700 dark:hover:bg-gray-600">
      <span class="sr-only">Close</span>
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
  </div>
</div>

Verwandte Komponenten

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.

Offen

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 "Popup-Benachrichtigungen"

Eine Popup-Benachrichtigungskomponente, die im Glassmorphism-Stil entwickelt wurde und reaktionsschnelle Effekte und Unterstützung für dunkle Designs bietet. Es verwendet Tailwind CSS für das Styling sowie Platzhalterbilder von picsum.photos für visuelle Elemente und randomuser.me für Avatare.

Offen