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.
HTML Code
<div class="bg-purple-800 dark:bg-gray-900 p-5 rounded-lg shadow-lg max-w-lg mx-auto">
<h2 class="text-white text-2xl font-bold mb-3">Notifications</h2>
<div class="space-y-4">
<div class="flex items-start bg-purple-700 dark:bg-gray-800 p-4 rounded-lg">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3">
<div class="flex-1">
<p class="text-white font-semibold">John Doe</p>
<p class="text-gray-300">You have a new message. Check it out!</p>
<span class="text-sm text-gray-500">2 minutes ago</span>
</div>
</div>
<div class="flex items-start bg-purple-700 dark:bg-gray-800 p-4 rounded-lg">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3">
<div class="flex-1">
<p class="text-white font-semibold">Jane Smith</p>
<p class="text-gray-300">Your report has been approved.</p>
<span class="text-sm text-gray-500">15 minutes ago</span>
</div>
</div>
<div class="flex items-start bg-purple-700 dark:bg-gray-800 p-4 rounded-lg">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3">
<div class="flex-1">
<p class="text-white font-semibold">Chris Johnson</p>
<p class="text-gray-300">New comment on your post.</p>
<span class="text-sm text-gray-500">30 minutes ago</span>
</div>
</div>
<div class="flex items-start bg-purple-700 dark:bg-gray-800 p-4 rounded-lg">
<img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3">
<div class="flex-1">
<p class="text-white font-semibold">Anna Taylor</p>
<p class="text-gray-300">Don't forget to review your tasks.</p>
<span class="text-sm text-gray-500">1 hour ago</span>
</div>
</div>
</div>
<a href="#" class="block text-center text-white bg-blue-600 hover:bg-blue-700 rounded-lg mt-5 p-2 transition duration-300">View All Notifications</a>
</div>Composants associés
LuxuryNotificationsComponent
Un composant de notifications simple et élégant pour les applications de médias sociaux, doté d’un style de design luxueux/haut de gamme avec des couleurs sourdes et une réactivité totale, y compris la prise en charge du mode sombre.
Composant de notifications minimalistes (niveaux de gris)
Un composant de notifications simple et minimaliste en niveaux de gris pour les portfolios, avec prise en charge du mode réactif et sombre à l’aide de Tailwind CSS. Utilise picsum.photos pour les images et randomuser.me pour les avatars.