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
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.
Composant Notifications
Un composant de notifications réactives avec des micro-interactions, une palette de couleurs triadique et une prise en charge du thème sombre, conçu pour présenter des travaux ou des produits.
Composant Notifications
Composant de notifications de style Neumorphisme avec une palette de couleurs pastel, une complexité modérée et un design réactif avec prise en charge du thème sombre. Convient aux sites Web d’entreprise/d’entreprise.