Composant Notifications
Un composant de notifications complexe conçu avec une esthétique rétro/vintage et des couleurs vives pour le commerce électronique, prenant en charge le mode sombre.
HTML Code
<div class="relative z-10">
<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-5 max-w-md mx-auto">
<h2 class="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-4">Notifications</h2>
<div class="space-y-4">
<div class="flex items-center bg-yellow-200 dark:bg-yellow-800 p-4 rounded-lg shadow">
<img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-yellow-600 dark:border-yellow-400" />
<div class="flex-1">
<h3 class="text-lg font-semibold text-black dark:text-white">New Order Placed!</h3>
<p class="text-sm text-gray-700 dark:text-gray-300">Order #12345 has been successfully placed.</p>
<span class="text-xs text-gray-500 dark:text-gray-400">Just now</span>
</div>
</div>
<div class="flex items-center bg-green-200 dark:bg-green-800 p-4 rounded-lg shadow">
<img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-green-600 dark:border-green-400" />
<div class="flex-1">
<h3 class="text-lg font-semibold text-black dark:text-white">Item Shipped!</h3>
<p class="text-sm text-gray-700 dark:text-gray-300">Your order #12345 is on its way!</p>
<span class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</span>
</div>
</div>
<div class="flex items-center bg-red-200 dark:bg-red-800 p-4 rounded-lg shadow">
<img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-red-600 dark:border-red-400" />
<div class="flex-1">
<h3 class="text-lg font-semibold text-black dark:text-white">Payment Failed!</h3>
<p class="text-sm text-gray-700 dark:text-gray-300">There was an issue with your payment for order #12345.</p>
<span class="text-xs text-gray-500 dark:text-gray-400">5 hours ago</span>
</div>
</div>
<div class="flex items-center bg-purple-200 dark:bg-purple-800 p-4 rounded-lg shadow">
<img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-purple-600 dark:border-purple-400" />
<div class="flex-1">
<h3 class="text-lg font-semibold text-black dark:text-white">Review Reminder!</h3>
<p class="text-sm text-gray-700 dark:text-gray-300">Don’t forget to review your recent purchase.</p>
<span class="text-xs text-gray-500 dark:text-gray-400">1 day ago</span>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Notifications
Un composant de notifications réactives conçu en mode sombre à l’aide de Tailwind CSS.
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 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.