CCHub Logo CCHub Tailwind Collection
Komponenten Benachrichtigungen Komponente "Benachrichtigungen"

Komponente "Benachrichtigungen"

Eine reaktionsschnelle Benachrichtigungskomponente mit Mikrointeraktionen, triadischem Farbschema und Unterstützung für dunkle Themen, die für die Präsentation von Arbeiten oder Produkten entwickelt wurde.

Vorschau

HTML-Code 

<div class="max-w-md mx-auto mt-10">
    <h2 class="text-2xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Notifications</h2>
    <div class="space-y-4">
        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-md p-4 transform transition-transform duration-300 hover:scale-105">
            <div class="flex items-start">
                <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
                <div>
                    <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">John Doe</h3>
                    <p class="text-sm text-gray-700 dark:text-gray-400">Liked your project "Sunset Scenery"</p>
                    <span class="text-xs text-gray-500 dark:text-gray-400">2 minutes ago</span>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-md p-4 transform transition-transform duration-300 hover:scale-105">
            <div class="flex items-start">
                <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
                <div>
                    <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Jane Smith</h3>
                    <p class="text-sm text-gray-700 dark:text-gray-400">Commented on your work "Abstract Art"</p>
                    <span class="text-xs text-gray-500 dark:text-gray-400">10 minutes ago</span>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-md p-4 transform transition-transform duration-300 hover:scale-105">
            <div class="flex items-start">
                <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
                <div>
                    <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Alex Johnson</h3>
                    <p class="text-sm text-gray-700 dark:text-gray-400">Followed you</p>
                    <span class="text-xs text-gray-500 dark:text-gray-400">30 minutes ago</span>
                </div>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Benachrichtigungen"

Benachrichtigungskomponente im Skeuomorphismus-Stil mit responsiven Effekten und Unterstützung für dunkle Themen, erstellt mit Tailwind CSS.

Offen

Komponente "Benachrichtigungen"

Eine einfache, saubere und kontrastreiche Benachrichtigungskomponente, die für Buchungs- und Reservierungssysteme von Unternehmen und Fachleuten geeignet ist, mit vollständiger Reaktionsfähigkeit und Unterstützung des Dunkelmodus.

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