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

Popup-Benachrichtigungen

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

Offen

Komponente "Popup-Benachrichtigungen"

Eine Toast-Benachrichtigungskomponente im Glassmorphism-Stil mit Pastellfarben, die für Blogs und den Konsum von Inhalten entwickelt wurde. Es unterstützt den Dunkelmodus und verfügt über eine umfangreiche Benutzeroberfläche mit interaktiven Elementen.

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