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.
Código HTML
<div class="max-w-md mx-auto mt-5">
<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm overflow-hidden">
<div class="flex items-center p-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h2 class="text-gray-800 dark:text-white text-lg font-medium">John Doe</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm">Just now</p>
</div>
</div>
<div class="p-4">
<p class="text-gray-800 dark:text-gray-300">This is a simple alert message for your social media interface.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm overflow-hidden mt-4">
<div class="flex items-center p-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h2 class="text-gray-800 dark:text-white text-lg font-medium">Jane Smith</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm">5 minutes ago</p>
</div>
</div>
<div class="p-4">
<p class="text-gray-800 dark:text-gray-300">Another alert message from the social networking interface!</p>
</div>
</div>
</div>
Componentes relacionados
OrganicNatureInspiredAlert
Un componente de mensajes de alerta simple y receptivo con un diseño orgánico / inspirado en la naturaleza, combinación de colores complementaria, adecuado para sitios web de consultoría / servicios. Incluye soporte para modo oscuro.
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.
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.