CCHub Logo CCHub Tailwind Collection
Komponenten Benachrichtigungen Benachrichtigungen Komponente 26

Benachrichtigungen Komponente 26

Eine minimalistische Benachrichtigungskomponente, die mit Tailwind CSS entwickelt wurde, mit responsiven Effekten und Unterstützung für dunkle Themen, die eine Liste von Benachrichtigungen mit Avataren und Bildern anzeigt.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto p-6">
    <h2 class="text-xl font-semibold mb-4">Notifications</h2>
    <div class="space-y-3">
        <!-- Notification Item -->
        <div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">John Doe liked your post</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Just now</p>
            </div>
            <img src="https://picsum.photos/40/40" alt="Image" class="w-10 h-10 rounded-lg ml-2">
        </div>
        
        <!-- Notification Item -->
        <div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">Jane Smith commented on your photo</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">5 minutes ago</p>
            </div>
            <img src="https://picsum.photos/40/41" alt="Image" class="w-10 h-10 rounded-lg ml-2">
        </div>
        
        <!-- Notification Item -->
        <div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">Mark Wilson started following you</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">10 minutes ago</p>
            </div>
            <img src="https://picsum.photos/40/42" alt="Image" class="w-10 h-10 rounded-lg ml-2">
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Benachrichtigungen"

Eine komplexe Benachrichtigungskomponente mit Retro-/Vintage-Ästhetik und leuchtenden Farben für den E-Commerce, die den Dunkelmodus unterstützt.

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

Komponente "Benachrichtigungen"

Eine Benachrichtigungskomponente, die nach den Prinzipien des Material Designs und einem monochromen Farbschema für E-Commerce-Anwendungen entwickelt wurde, mit einem responsiven Design und Unterstützung für dunkle Themen.

Offen