Componente Mensajes de éxito
Un componente de mensaje de éxito simple y limpio con diseño receptivo y soporte para modo oscuro.
Código HTML
<div class="flex items-center justify-between p-4 text-green-700 bg-green-100 rounded-lg dark:bg-green-700 dark:text-green-100" role="alert">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-3" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<p class="font-bold">Success!</p>
<p class="ml-2 text-sm">Your action was successful.</p>
</div>
<button type="button" class="text-green-700 hover:text-green-900 dark:text-green-100 dark:hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" 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>Componentes relacionados
Componente de mensaje de éxito - Material Design Complementary
Un componente de mensaje de éxito al estilo Material Design para un blog/sitio de contenido, que utiliza una combinación de colores complementaria. Responsivo con soporte para temas oscuros. Sin JavaScript.
Componente Mensajes de éxito
Un componente de mensajes de éxito de diseño minimalista / plano para redes sociales con colores pastel claros y un diseño responsivo complejo.
Componente Mensajes de éxito
Un componente de mensaje de éxito simple con una combinación de colores pastel, animaciones sutiles para microinteracciones y diseño receptivo con soporte para temas oscuros. Está diseñado para que un portafolio reconozca las acciones del usuario.