CCHub Logo CCHub Tailwind Collection
Komponenten Benachrichtigungen Komponente "Benachrichtigungen"

Komponente "Benachrichtigungen"

Eine reaktionsschnelle Benachrichtigungskomponente, die mit skeuomorphen Elementen entwickelt wurde, ein komplementäres Farbschema und ein einfaches Layout verwendet, das für ein Portfolio geeignet ist.

Vorschau

HTML-Code 

<div class="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Notifications</h2>
    <div class="bg-white dark:bg-gray-900 rounded-lg overflow-hidden shadow">
        <div class="flex items-start p-4 border-b border-gray-200 dark:border-gray-700">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">Uploaded a new project.</p>
            </div>
        </div>
        <div class="p-4 border-b border-gray-200 dark:border-gray-700">
            <img src="https://picsum.photos/200/100?random=1" alt="Project Image" class="rounded-md">
        </div>
        <div class="flex items-center justify-between p-4">
            <span class="text-gray-500 dark:text-gray-400 text-sm">5 minutes ago</span>
            <button class="bg-blue-500 dark:bg-blue-700 text-white px-4 py-2 rounded-lg">View</button>
        </div>
    </div>
    <div class="mt-4 bg-white dark:bg-gray-900 rounded-lg overflow-hidden shadow">
        <div class="flex items-start p-4 border-b border-gray-200 dark:border-gray-700">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Commented on your photo.</p>
            </div>
        </div>
        <div class="p-4 border-b border-gray-200 dark:border-gray-700">
            <img src="https://picsum.photos/200/100?random=2" alt="Project Image" class="rounded-md">
        </div>
        <div class="flex items-center justify-between p-4">
            <span class="text-gray-500 dark:text-gray-400 text-sm">10 minutes ago</span>
            <button class="bg-green-500 dark:bg-green-700 text-white px-4 py-2 rounded-lg">Reply</button>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Benachrichtigungen"

Eine Benachrichtigungskomponente mit einem glasmorphischen Design mit einem monochromatischen Farbschema, das auf Geschäfts-/Unternehmenswebanwendungen zugeschnitten ist. Die Komponente enthält verschiedene interaktive Elemente und unterstützt den Dunkelmodus.

Offen

Komponente "Benachrichtigungen"

Eine Benachrichtigungskomponente im Neumorphism-Stil mit pastellfarbenem Farbschema, moderater Komplexität und responsivem Design mit Unterstützung für dunkle Designs. Geeignet für Business-/Unternehmenswebsites.

Offen

Luxus-Benachrichtigungskomponente

Eine einfache, elegante Benachrichtigungskomponente, die für Reise-/Tourismus-Websites entwickelt wurde und sich durch einen Luxus-/Premium-Stil mit Unternehmensblautönen und vollständiger Reaktionsfähigkeit auszeichnet, einschließlich Unterstützung des Dunkelmodus.

Offen