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
Memphis_Notifications_Component
Un composant de notifications simple et réactif avec une influence du design de Memphis utilisant des neutres chauds, adapté aux sites Web à but non lucratif/caritatifs. Inclut la prise en charge du mode sombre.
Composant Notifications
Un composant de notifications réactives conçu avec des éléments skeuomorphes, utilisant une palette de couleurs complémentaires et une mise en page simple adaptée à un portfolio.
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.