Componente de mensajes de alerta
Un componente de mensaje de alerta complejo, vibrante y de estilo glassmorphism para comercio electrónico, con soporte para el modo oscuro.
Código HTML
<div class="container mx-auto p-8">
<!-- Light Mode - Vibrant Glassmorphism Alerts -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Success Alert -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-white border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-green-600">
<svg class="h-6 w-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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-green-800 font-semibold">Success!</p>
<p class="text-green-700 text-sm mt-1">Your order has been placed successfully.</p>
</div>
</div>
</div>
<!-- Info Alert -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-white border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-blue-600">
<svg class="h-6 w-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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-blue-800 font-semibold">Info!</p>
<p class="text-blue-700 text-sm mt-1">Your items are being processed.</p>
</div>
</div>
</div>
<!-- Warning Alert -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-white border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-yellow-600">
<svg class="h-6 w-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="M12 9v2m0 4h-.01m-6.938 4H2.81a1.97 1.97 0 01-1.834-2.283l1.642-7.34A1.97 1.97 0 014.655 4h14.69a1.97 1.97 0 011.833 2.375l-1.642 7.34A1.97 1.97 0 0119.19 20h-4.253"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-yellow-800 font-semibold">Warning!</p>
<p class="text-yellow-700 text-sm mt-1">Payment verification is pending.</p>
</div>
</div>
</div>
<!-- Danger Alert -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-white border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-red-600">
<svg class="h-6 w-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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-red-800 font-semibold">Danger!</p>
<p class="text-red-700 text-sm mt-1">There was an issue processing your payment.</p>
</div>
</div>
</div>
</div>
<!-- Dark Mode - Vibrant Glassmorphism Alerts -->
<div class="dark mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Success Alert -->
<div class="bg-gray-800 bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-gray-700 border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-green-400">
<svg class="h-6 w-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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-green-300 font-semibold">Success!</p>
<p class="text-green-400 text-sm mt-1">Your order has been placed successfully.</p>
</div>
</div>
</div>
<!-- Info Alert -->
<div class="bg-gray-800 bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-gray-700 border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-blue-400">
<svg class="h-6 w-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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-blue-300 font-semibold">Info!</p>
<p class="text-blue-400 text-sm mt-1">Your items are being processed.</p>
</div>
</div>
</div>
<!-- Warning Alert -->
<div class="bg-gray-800 bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-gray-700 border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-yellow-400">
<svg class="h-6 w-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="M12 9v2m0 4h-.01m-6.938 4H2.81a1.97 1.97 0 01-1.834-2.283l1.642-7.34A1.97 1.97 0 014.655 4h14.69a1.97 1.97 0 011.833 2.375l-1.642 7.34A1.97 1.97 0 0119.19 20h-4.253"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-yellow-300 font-semibold">Warning!</p>
<p class="text-yellow-400 text-sm mt-1">Payment verification is pending.</p>
</div>
</div>
</div>
<!-- Danger Alert -->
<div class="bg-gray-800 bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-gray-700 border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-red-400">
<svg class="h-6 w-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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-red-300 font-semibold">Danger!</p>
<p class="text-red-400 text-sm mt-1">There was an issue processing your payment.</p>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de mensajes de alerta
Un componente de mensaje de alerta de estilo retro / vintage para sitios web comerciales / corporativos, con tonos tierra y diseño receptivo con soporte para modo oscuro.
Componente de mensajes de alerta
Un componente de mensajes de alerta esqueuomórfico receptivo diseñado para blogs/consumo de contenido, con un esquema de color complementario y soporte para temas oscuros.
Componente de mensajes de alerta
Un componente de mensajes de alerta de estilo brutalista con una combinación de colores pastel, diseñado para sitios web comerciales/corporativos y responsivo con soporte para temas oscuros.