CCHub Logo CCHub Tailwind Collection
Komponenten Benachrichtigungen Komponente "Benachrichtigungen"

Komponente "Benachrichtigungen"

Eine Benachrichtigungskomponente im Retro-/Vintage-Stil, die für Dashboards entwickelt wurde und mehrere interaktive Elemente und Unterstützung für dunkle Themen bietet.

Vorschau

HTML-Code 

<div class="bg-purple-800 dark:bg-gray-900 p-5 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-white text-2xl font-bold mb-3">Notifications</h2>
    <div class="space-y-4">
        <div class="flex items-start bg-purple-700 dark:bg-gray-800 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-white font-semibold">John Doe</p>
                <p class="text-gray-300">You have a new message. Check it out!</p>
                <span class="text-sm text-gray-500">2 minutes ago</span>
            </div>
        </div>
        <div class="flex items-start bg-purple-700 dark:bg-gray-800 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-white font-semibold">Jane Smith</p>
                <p class="text-gray-300">Your report has been approved.</p>
                <span class="text-sm text-gray-500">15 minutes ago</span>
            </div>
        </div>
        <div class="flex items-start bg-purple-700 dark:bg-gray-800 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-white font-semibold">Chris Johnson</p>
                <p class="text-gray-300">New comment on your post.</p>
                <span class="text-sm text-gray-500">30 minutes ago</span>
            </div>
        </div>
        <div class="flex items-start bg-purple-700 dark:bg-gray-800 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-white font-semibold">Anna Taylor</p>
                <p class="text-gray-300">Don't forget to review your tasks.</p>
                <span class="text-sm text-gray-500">1 hour ago</span>
            </div>
        </div>
    </div>
    <a href="#" class="block text-center text-white bg-blue-600 hover:bg-blue-700 rounded-lg mt-5 p-2 transition duration-300">View All Notifications</a>
</div>

Verwandte Komponenten

Komponente "Benachrichtigungen"

Benachrichtigungskomponente im Skeuomorphismus-Stil mit responsivem Design und Unterstützung für dunkle Themen. Diese Komponente verfügt über ein realistisches, geprägtes Aussehen für Benachrichtigungen, einschließlich eines subtilen Schatten- und Glanzeffekts. Es ist vollständig reaktionsschnell und enthält unterschiedliche Stile für den Dunkelmodus, um Lesbarkeit und Ästhetik bei allen Lichtverhältnissen zu gewährleisten. Verwendet Platzhalterbilder für Avatare.

Offen

Komponente "Benachrichtigungen"

Eine Skeuomorphe Benachrichtigungskomponente für den E-Commerce mit einem lebendigen Farbschema, einer komplexen Benutzeroberfläche, einem ansprechenden Design und Unterstützung für dunkle Themen, die mit Tailwind CSS erstellt wurde.

Offen

SkeuomorphicNotificationsComponent

Eine einfache, reaktionsschnelle Benachrichtigungskomponente, die vom Skeuomorphismus inspiriert ist und ein analoges Farbschema aufweist, das für Geschäfts-/Unternehmenswebsites geeignet ist. Es bietet Unterstützung für dunkle Themen und verwendet Tailwind CSS für das Styling. Die Bilder stammen von picsum.photos und die Avatare von randomuser.me.

Offen