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

Komponente "Popup-Benachrichtigungen"

Eine Popupbenachrichtigungskomponente im Dunkelmodus, die für Dashboard-Anwendungen entwickelt wurde und ein komplementäres Farbschema mit verschiedenen interaktiven Elementen bietet.

Vorschau

HTML-Code 

<div class="fixed bottom-5 right-5 space-y-4">
    <div class="bg-gray-800 dark:bg-gray-900 text-white p-4 rounded-lg shadow-lg flex items-start space-x-3">
        <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="flex-1">
            <p class="font-semibold">John Doe</p>
            <p class="text-sm">Successfully completed the action.</p>
        </div>
        <button class="text-blue-500 hover:text-blue-400 focus:outline-none">
            Dismiss
        </button>
    </div>
    <div class="bg-gray-800 dark:bg-gray-900 text-white p-4 rounded-lg shadow-lg flex items-start space-x-3">
        <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar">
        <div class="flex-1">
            <p class="font-semibold">Jane Smith</p>
            <p class="text-sm">You have new messages.</p>
        </div>
        <button class="text-blue-500 hover:text-blue-400 focus:outline-none">
            View
        </button>
    </div>
    <div class="bg-gray-800 dark:bg-gray-900 text-white p-4 rounded-lg shadow-lg flex items-start space-x-3">
        <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        <div class="flex-1">
            <p class="font-semibold">Mike Johnson</p>
            <p class="text-sm">Error occurred during processing!</p>
        </div>
        <button class="text-blue-500 hover:text-blue-400 focus:outline-none">
            Retry
        </button>
    </div>
</div>

Verwandte Komponenten

Retro_Vintage_Toast_Notifications_Component

Eine einfache Toast-Benachrichtigungskomponente im Retro-/Vintage-Stil für CRM-/Business-Tools mit warmen Neutraltönen, responsivem Design und Unterstützung für den Dunkelmodus.

Offen

Popup-Benachrichtigungen

Minimalistische/flache Design-Toast-Benachrichtigungskomponente mit analogem Farbschema, einfacher Komplexität, für Portfoliozwecke. Reaktionsschnell mit Unterstützung für dunkle Themen.

Offen

Komponente "Brutalism Toast-Benachrichtigungen"

Eine Reihe von brutalistisch inspirierten Toast-Benachrichtigungen mit einem warmen, neutralen Farbschema, geeignet für Buchungs-/Reservierungssysteme. Mit rohen, kräftigen Kontrasten und responsivem Design mit Unterstützung für den Dunkelmodus.

Offen