Composant Messages d’alerte
Un composant de messages d’alerte réactifs conçu avec l’effet glassmorphism à des fins de commerce électronique. Il présente une mise en page simple avec une palette de couleurs monochromatiques et la prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<div class="flex flex-col items-center justify-center h-screen bg-gray-900 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-700 backdrop-blur-md rounded-xl border border-gray-300 dark:border-gray-600 shadow-lg p-6 max-w-md w-full">
<h2 class="text-xl text-gray-800 dark:text-gray-200 mb-4">Alert Message</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">
Your order has been placed successfully! You will receive a confirmation email shortly.
</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="text-sm">
<p class="text-gray-800 dark:text-gray-200">John Doe</p>
<p class="text-gray-500 dark:text-gray-400">Just now</p>
</div>
</div>
<div class="mt-4">
<img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="rounded-lg shadow-md">
</div>
</div>
</div>Composants associés
Composant Messages d’alerte
Un composant de message d’alerte complexe, vibrant, de style glassmorphism pour le commerce électronique, avec prise en charge du mode sombre.
Composant Messages d’alerte
Un composant de messages d’alerte skeuomorphe réactif conçu pour la consommation de blogs/contenus, avec une palette de couleurs complémentaires et la prise en charge du thème sombre.
Composant Messages d’alerte
Un composant de messages d’alerte avec une conception 3D, des fonctionnalités réactives et une prise en charge du thème sombre à l’aide de Tailwind CSS. Le composant comprend différents types d’alertes (succès, erreur, avertissement, infos) avec des icônes et des messages.