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 mensaje de alerta simple al estilo de Neumorphism para sitios web comerciales, con colores vibrantes y soporte de temas oscuros receptivos que usan Tailwind CSS y sin JavaScript.
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.
Componente de mensajes de alerta
Un componente de mensajes de alerta con un diseño 3D, funciones responsivas y compatibilidad con temas oscuros mediante Tailwind CSS. El componente incluye diferentes tipos de alertas (éxito, error, advertencia, información) con iconos y mensajes.