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

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.

Vorschau

HTML-Code 

<div class="fixed top-4 right-4 z-50 space-y-4">
    <div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg dark:bg-gray-900 border border-red-500">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
            <div class="flex-1">
                <h2 class="font-bold text-lg">Notification Title</h2>
                <p class="text-sm">This is a sample toast notification message that showcases important updates or alerts.</p>
            </div>
            <button class="ml-2 p-2 text-sm text-red-500 hover:bg-red-400 rounded-full transition duration-200 ease-in-out">Close</button>
        </div>
    </div>
    <div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg dark:bg-gray-900 border border-yellow-500">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/10.jpg" alt="Avatar">
            <div class="flex-1">
                <h2 class="font-bold text-lg">Another Notification</h2>
                <p class="text-sm">This is another toast notification that provides insights or next steps for users.</p>
            </div>
            <button class="ml-2 p-2 text-sm text-yellow-500 hover:bg-yellow-400 rounded-full transition duration-200 ease-in-out">Close</button>
        </div>
    </div>
    <div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg dark:bg-gray-900 border border-blue-500">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/20.jpg" alt="Avatar">
            <div class="flex-1">
                <h2 class="font-bold text-lg">Success Notification</h2>
                <p class="text-sm">Your latest action was successful. Keep up the great work!</p>
            </div>
            <button class="ml-2 p-2 text-sm text-blue-500 hover:bg-blue-400 rounded-full transition duration-200 ease-in-out">Close</button>
        </div>
    </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 Reihe von Popup-Benachrichtigungen, die in einem klaren, minimalistischen schweizerischen/internationalen Typografie-Stil mit einem analogen Farbschema gestaltet sind. Optimiert für fotografiebezogene Websites, die den Benutzern ein klares und prägnantes Feedback geben. Beinhaltet Unterstützung für responsives Design und Dunkelmodus.

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