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

Popup-Benachrichtigungen

Toast Notifications-Komponente mit Glassmorphism-Stil, responsiven Effekten und Unterstützung für dunkle Designs mit Tailwind CSS

Vorschau

HTML-Code 

<div class="fixed bottom-0 right-0 mb-4 mr-4">
  <div class="bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden mx-auto" style="max-width: 300px;">
    <div class="flex items-center justify-between px-4 py-2">
      <div class="flex items-center">
        <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
        <p class="text-gray-700 dark:text-gray-200 text-sm font-semibold ml-2">User Name</p>
      </div>
      <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
        <svg class="h-4 w-4" 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"></path>
        </svg>
      </button>
    </div>
    <div class="px-4 py-2">
      <p class="text-gray-600 dark:text-gray-300 text-sm">This is a toast notification.</p>
    </div>
  </div>
</div>

Verwandte Komponenten

Komponente "Popup-Benachrichtigungen"

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

Offen

Komponente "Neumorphism-Popupbenachrichtigungen"

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

Offen

Komponente "Popup-Benachrichtigungen"

Eine reaktionsschnelle Popup-Benachrichtigungskomponente, die mit Glassmorphism entwickelt wurde, ein monochromatisches Farbschema und Unterstützung für den Dunkelmodus bietet und bereit für die Verwendung in einem Portfolio ist.

Offen