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

Komponente "Popup-Benachrichtigungen"

Eine Popup-Benachrichtigungskomponente, die im Glassmorphism-Stil entwickelt wurde und reaktionsschnelle Effekte und Unterstützung für dunkle Designs bietet. Es verwendet Tailwind CSS für das Styling sowie Platzhalterbilder von picsum.photos für visuelle Elemente und randomuser.me für Avatare.

Vorschau

HTML-Code 

<div class="fixed bottom-5 right-5 space-y-3">
    <div class="bg-white bg-opacity-20 backdrop-blur-lg rounded-lg border border-white border-opacity-30 shadow-lg p-4 w-80 transition transform duration-300 scale-100 hover:scale-105">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-grow">
                <p class="text-white font-semibold">Notification Title</p>
                <p class="text-white text-sm">This is a toast notification message to inform you about something important.</p>
            </div>
        </div>
        <div class="flex justify-end mt-2">
            <button class="bg-blue-600 text-white px-4 py-1 rounded-full hover:bg-blue-700 focus:outline-none">Action</button>
        </div>
    </div>

    <div class="bg-white bg-opacity-20 backdrop-blur-lg rounded-lg border border-white border-opacity-30 shadow-lg p-4 w-80 transition transform duration-300 scale-100 hover:scale-105">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-grow">
                <p class="text-white font-semibold">Another Notification</p>
                <p class="text-white text-sm">This is another toast notification message for your consideration.</p>
            </div>
        </div>
        <div class="flex justify-end mt-2">
            <button class="bg-blue-600 text-white px-4 py-1 rounded-full hover:bg-blue-700 focus:outline-none">Dismiss</button>
        </div>
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-white {
        background-color: rgba(255, 255, 255, 0.1);
    }
    .text-white {
        color: white;
    }
    .border-white {
        border-color: rgba(255, 255, 255, 0.3);
    }
}
</style>

Verwandte Komponenten

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

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 "Glassmorphism-Popupbenachrichtigungen"

Eine reaktionsschnelle Popupbenachrichtigungskomponente mit einem Glassmorphism-Design, einem Pastellfarbschema und Unterstützung für den Dunkelmodus, die für Buchungs- und Reservierungssysteme geeignet ist.

Offen