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.
Código HTML
<div class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-900 rounded-md shadow-lg max-w-md mx-auto mt-6">
<div class="flex justify-between items-center w-full">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Alert Title</h2>
<button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none">
×
</button>
</div>
<p class="mt-2 text-gray-600 dark:text-gray-400">
This is a minimal alert message for your blog or content. It is meant to grab the reader's attention without being intrusive.
</p>
<div class="flex items-center mt-3">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-300 text-sm">Posted by John Doe</span>
</div>
<div class="flex justify-end mt-4">
<button class="px-4 py-2 bg-gray-800 text-white rounded-md hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500">
Action
</button>
</div>
</div>Componentes relacionados
Componente de mensajes de alerta
Un componente de mensajes de alerta responsivos en modo oscuro para mostrar notificaciones o mensajes en un portafolio, diseñado con tonos tierra y múltiples elementos interactivos.
Componente de mensajes de alerta
Componente de mensaje de alerta receptivo con microinteracciones, combinación de colores pastel, diseño complejo, propósito comercial / corporativo, compatibilidad con modo oscuro y sin JavaScript.
Componente de mensajes de alerta de Marketplace
Un componente de mensajes de alerta inspirado en Material Design con colores otoñales, adecuado para plataformas de mercado. Cuenta con varios tipos de alertas (éxito, advertencia, error, información) con opciones descartables y soporte para modo oscuro.