Componentes Mensajes de éxito Componente Mensajes de éxito

Componente Mensajes de éxito

Un componente de mensaje de éxito simple y limpio con diseño receptivo y soporte para modo oscuro.

Vista previa

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

Mensaje de éxito de Memphis Pastel

Un componente de mensaje de éxito simple y receptivo con una estética de diseño de Memphis que utiliza colores pastel. Presenta formas geométricas juguetonas y admite el modo oscuro.

Abrir

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.

Abrir

Componente Mensajes de éxito

Un componente de mensaje de éxito minimalista con efectos responsivos, que admite temas claros y oscuros utilizando Tailwind CSS.

Abrir