Componente de mensajes de alerta
Componente de mensaje de alerta en escala de grises retro / vintage para redes sociales con soporte de modo oscuro
Código HTML
<div class="flex flex-col space-y-4 p-4 bg-gray-100 dark:bg-gray-800">
<!-- Success Alert -->
<div class="flex items-center justify-between p-4 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-500 dark:border-gray-600 rounded shadow-md">
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<p class="text-sm font-mono">Success: Your post was published.</p>
</div>
<button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Info Alert -->
<div class="flex items-center justify-between p-4 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-500 dark:border-gray-600 rounded shadow-md">
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
<p class="text-sm font-mono">Info: New messages available.</p>
</div>
<button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Warning Alert -->
<div class="flex items-center justify-between p-4 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-500 dark:border-gray-600 rounded shadow-md">
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4H21a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<p class="text-sm font-mono">Warning: Profile incomplete.</p>
</div>
<button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Danger Alert -->
<div class="flex items-center justify-between p-4 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-500 dark:border-gray-600 rounded shadow-md">
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<p class="text-sm font-mono">Error: Failed to send message.</p>
</div>
<button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>Componentes relacionados
Componente de mensajes de alerta
Un componente de mensajes de alerta minimalista y vibrante para sitios web comerciales/corporativos, con diseño receptivo y soporte para modo oscuro. Incluye diferentes tipos de alertas como éxito, error, información y advertencia.
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
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.