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

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 Neumorphism-Stil, die Tailwind CSS mit Unterstützung für dunkle Designs verwendet.

Offen

Komponente "Popup-Benachrichtigungen"

Eine reaktionsschnelle Popup-Benachrichtigungskomponente mit Skeuomorphic-Design und Unterstützung für den Dunkelmodus, die mit Tailwind CSS erstellt wurde.

Offen