SkeuomorphicNotificationsComponent
Un composant de notifications simple et réactif inspiré du Skeuomorphism, avec une palette de couleurs analogue adaptée aux sites Web d’entreprise. Il inclut la prise en charge du thème sombre et utilise Tailwind CSS pour le style. Les images proviennent de picsum.photos et les avatars de randomuser.me.
HTML Code
<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-xl">
<div class="flex items-center space-x-4">
<img class="w-12 h-12 rounded-full ring-2 ring-blue-300" src="https://randomuser.me/api/portraits/men/85.jpg" alt="User Avatar">
<div>
<div class="text-lg font-semibold text-gray-800 dark:text-gray-200">New Notification</div>
<p class="text-sm text-gray-600 dark:text-gray-400">You have a new message from John Doe.</p>
</div>
</div>
<div class="mt-4 flex justify-end">
<button class="px-4 py-2 bg-blue-500 text-white rounded-full shadow hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800">
View
</button>
</div>
</div>Composants associés
Composant Notifications
Composant de notifications réactives avec prise en charge du mode sombre pour le tableau de bord
Composant Notifications
Un composant de notifications de style rétro/vintage conçu pour les tableaux de bord, avec plusieurs éléments interactifs et la prise en charge du thème sombre.
Composant Notifications de luxe
Un composant de notifications simple et élégant conçu pour les sites Web de voyage/tourisme, avec un style luxueux/premium avec des tons bleus d’entreprise et une réactivité totale, y compris la prise en charge du mode sombre.