Composant Notifications
Un composant de notifications réactives conçu en mode sombre à l’aide de Tailwind CSS.
HTML Code
<div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-xl font-semibold mb-4">Notifications</h2>
<div class="space-y-4">
<div class="flex items-start p-3 bg-gray-700 rounded">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-bold">John Doe</p>
<p>Just completed a new task.</p>
<span class="text-gray-400 text-sm">10 minutes ago</span>
</div>
</div>
<div class="flex items-start p-3 bg-gray-700 rounded">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-bold">Jane Smith</p>
<p>Commented on your post.</p>
<span class="text-gray-400 text-sm">20 minutes ago</span>
</div>
</div>
<div class="flex items-start p-3 bg-gray-700 rounded">
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-bold">Michael Brown</p>
<p>Sent you a friend request.</p>
<span class="text-gray-400 text-sm">30 minutes ago</span>
</div>
</div>
<div class="flex items-start p-3 bg-gray-700 rounded">
<img src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-bold">Emily Davis</p>
<p>Liked your photo.</p>
<span class="text-gray-400 text-sm">1 hour ago</span>
</div>
</div>
</div>
</div>
Composants associés
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
Un composant de notifications simple et réactif avec prise en charge du mode sombre, conçu dans un style Skeuomorphic avec une palette de couleurs en niveaux de gris. Idéal pour un portfolio mettant en valeur des compétences minimales en matière de design.
Composant Notifications
Un composant de notifications complexe et réactif avec prise en charge du mode sombre, conçu selon les principes de Material Design et une palette de couleurs pastel pour un site Web de blog/contenu.