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

Komponente "Retro Toast-Benachrichtigungen"

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

Offen

Komponente "Popup-Benachrichtigungen"

Eine Toast-Benachrichtigungskomponente im Neumorphism-Stil, die Tailwind CSS mit Unterstützung für dunkle Designs verwendet.

Offen

Komponente "Popup-Benachrichtigungen"

Eine neumorphe Popupbenachrichtigungskomponente mit Pastellfarben, responsivem Design und Unterstützung für dunkle Designs, die für Blogs und Inhaltswebsites geeignet ist.

Offen