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.
Código HTML
<div class="flex flex-col space-y-4 p-6">
<div class="bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-white border-opacity-20 p-4 dark:bg-gray-800 dark:bg-opacity-60">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
<div class="flex-1">
<p class="text-lg font-semibold text-black dark:text-white">Alert Title</p>
<p class="text-gray-700 dark:text-gray-300">This is an alert message describing the issue at hand.</p>
</div>
<button class="bg-red-600 text-white p-2 rounded-md hover:bg-red-500 dark:bg-red-700 dark:hover:bg-red-600">Dismiss</button>
</div>
</div>
<div class="bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-white border-opacity-20 p-4 dark:bg-gray-800 dark:bg-opacity-60">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
<div class="flex-1">
<p class="text-lg font-semibold text-black dark:text-white">Information Alert</p>
<p class="text-gray-700 dark:text-gray-300">This is a piece of information to keep you updated.</p>
</div>
<button class="bg-blue-600 text-white p-2 rounded-md hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">Okay</button>
</div>
</div>
<div class="bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-white border-opacity-20 p-4 dark:bg-gray-800 dark:bg-opacity-60">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
<div class="flex-1">
<p class="text-lg font-semibold text-black dark:text-white">Success Alert</p>
<p class="text-gray-700 dark:text-gray-300">Your operation was successful! Great job!</p>
</div>
<button class="bg-green-600 text-white p-2 rounded-md hover:bg-green-500 dark:bg-green-700 dark:hover:bg-green-600">Close</button>
</div>
</div>
</div>Componentes relacionados
Corporate_Professional_Alert_Messages
Una colección de mensajes de alerta limpios e inspirados en la confiabilidad, adecuados para entornos comerciales o de cartera, con colores en tono joya y un diseño receptivo con soporte para modo oscuro. Incluye alertas informativas, de éxito, de advertencia y de error.
Componente de mensajes de alerta
Un componente de mensajes de alerta responsivo diseñado en un estilo minimalista / plano con un esquema de color pastel, adecuado para interfaces de redes sociales, que incorpora soporte para temas oscuros.
Componente de mensajes de alerta
Componente de mensajes de alerta con estilo de diseño de materiales, combinación de colores pastel y nivel de complejidad complejo, para fines de cartera. Diseño responsivo con soporte para temas oscuros. No se necesita código JavaScript, solo HTML con clases Tailwind. El modo oscuro usa el prefijo dark: de Tailwind para el estilo. Las imágenes usan picsum.photos para las imágenes y randomuser.me para los avatares.