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.
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"
Komponente "Responsive Notifications" mit Unterstützung des Dunkelmodus für das Dashboard
Komponente "Benachrichtigungen"
Eine reaktionsschnelle Benachrichtigungskomponente, die im Dunkelmodus mit Tailwind CSS entwickelt wurde.
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.