Composant Notifications
Un composant de notifications conçu selon les principes de Material Design et une palette de couleurs monochromatiques pour les applications de commerce électronique, avec un design réactif et la prise en charge du thème sombre.
HTML Code
<div class="fixed inset-0 z-50 flex items-end justify-center p-4 space-x-4 sm:items-start">
<div class="w-full max-w-sm">
<div class="bg-gray-800 dark:bg-gray-900 rounded-lg drop-shadow-lg p-4">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
<div class="flex-1">
<h2 class="text-white text-lg font-semibold">New Message</h2>
<p class="text-gray-300">You have a new message from a seller.</p>
</div>
<button class="text-gray-400 hover:text-gray-200">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
</button>
</div>
<img src="https://picsum.photos/200/100" alt="Product Image" class="rounded-md mt-2" />
<div class="mt-2">
<span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full">E-commerce</span>
<span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full float-right">5 min ago</span>
</div>
</div>
</div>
<div class="w-full max-w-sm">
<div class="bg-gray-800 dark:bg-gray-900 rounded-lg drop-shadow-lg p-4">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
<div class="flex-1">
<h2 class="text-white text-lg font-semibold">Order Shipped</h2>
<p class="text-gray-300">Your order #12345 has been shipped.</p>
</div>
<button class="text-gray-400 hover:text-gray-200">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
</button>
</div>
<img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="rounded-md mt-2" />
<div class="mt-2">
<span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full">E-commerce</span>
<span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full float-right">10 min ago</span>
</div>
</div>
</div>
</div>
Composants associés
Composant Notifications
Un composant de notifications rétro/vintage conçu avec des tons de terre et des interactions complexes pour montrer le travail du portfolio.
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
Composant de notifications réactives avec prise en charge du mode sombre pour le tableau de bord