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
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.
Memphis_Gaming_Notification_Simple_Forest_Green
Un composant de notification de jeu simple et réactif avec une influence du design de Memphis utilisant une palette de couleurs vert forêt, y compris la prise en charge du mode sombre.
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.