Componente de mensajes de alerta
Un componente de mensajes de alerta receptivo diseñado con efecto glassmorphism para fines de comercio electrónico. Cuenta con un diseño simple con un esquema de color monocromático y soporte de modo oscuro usando Tailwind CSS.
Código HTML
<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>Componentes relacionados
Componente de mensajes de alerta
Un componente de mensaje de alerta con un diseño retro/vintage, que incluye soporte para el modo oscuro y la capacidad de respuesta.
Alerta de Bosque Lúdico
Un componente de mensajes de alerta lúdico y alegre diseñado con una paleta de colores bosque/verde, elementos redondeados y una estética amigable, adecuado para sitios web comerciales/corporativos. Es responsivo e incluye soporte para el modo oscuro.
Componente de mensajes de alerta
Un componente de mensajes de alerta con estilo Glassmorphism para la visualización de datos del tablero, con efectos de vidrio esmerilado, colores complementarios y diseño receptivo con soporte para temas oscuros.