Mensaje de alerta de glassmorphism
Componente de mensaje de alerta de Glassmorphism con un esquema de color triádico y un diseño simple, diseñado para carteras, con diseño receptivo y soporte de modo oscuro.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="relative w-full max-w-md p-6 bg-white rounded-lg shadow-lg bg-opacity-30 backdrop-filter backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-30">
<div class="absolute inset-0 rounded-lg -z-10 bg-gradient-to-br from-blue-300 via-purple-300 to-pink-300 opacity-60 dark:from-blue-700 dark:via-purple-700 dark:to-pink-700"></div>
<div class="flex items-center space-x-4">
<div class="flex items-center justify-center flex-shrink-0 w-10 h-10 text-white bg-blue-500 rounded-full dark:bg-blue-600">
<svg class="w-6 h-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>
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">New Portfolio Update!</h3>
<p class="text-sm text-gray-600 dark:text-gray-200">Check out my latest projects and redesigned sections. Your feedback is highly appreciated!</p>
</div>
</div>
<div class="flex justify-end mt-4">
<button class="px-4 py-2 text-sm font-medium text-blue-800 bg-blue-100 rounded-md bg-opacity-70 dark:text-blue-200 dark:bg-blue-700 dark:bg-opacity-70">View Details</button>
<button class="ml-2 px-4 py-2 text-sm font-medium text-gray-800 bg-gray-100 rounded-md bg-opacity-70 dark:text-gray-200 dark:bg-gray-700 dark:bg-opacity-70">Dismiss</button>
</div>
</div>
</div>
Componentes relacionados
Componente de mensajes de alerta
Un componente de mensaje de alerta minimalista diseñado para blogs, con un esquema de color en escala de grises. Incluye un título, un mensaje y un botón de cierre. Diseño responsivo con soporte para temas oscuros.
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 mensaje de alerta en escala de grises retro / vintage para redes sociales con soporte de modo oscuro