Componentes Mensajes de éxito Componente Mensajes de éxito

Componente Mensajes de éxito

Un componente de mensaje de éxito limpio y confiable para organizaciones sin fines de lucro/benéficas, que utiliza un esquema de color púrpura/violeta. Es sensible y admite el modo oscuro.

Vista previa

Código HTML

<div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-md p-6 bg-white rounded-lg shadow-lg dark:bg-gray-800 border-t-4 border-purple-600 dark:border-purple-500">
    <div class="flex items-center justify-center mb-4">
      <svg class="w-16 h-16 text-purple-600 dark:text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <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"></path>
      </svg>
    </div>
    <h2 class="mb-3 text-2xl font-bold text-center text-gray-800 dark:text-gray-100">Thank You for Your Support!</h2>
    <p class="mb-6 text-center text-gray-600 dark:text-gray-300">
      Your generous contribution has been successfully processed and will make a significant impact on our mission.
    </p>
    <div class="flex justify-center">
      <a href="#" class="inline-flex items-center px-6 py-3 text-base font-medium text-white bg-purple-600 rounded-md shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:bg-purple-700 dark:hover:bg-purple-600">
        <svg class="w-5 h-5 mr-2 -ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v9a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
          </path>
        </svg>
        Back to Homepage
      </a>
    </div>
    <p class="mt-6 text-sm text-center text-gray-500 dark:text-gray-400">
      A confirmation email has been sent to your inbox. Please contact us if you have any questions.
    </p>
  </div>
</div>

Componentes relacionados

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

SkeuomorphismSuccessMessage

Mensaje de éxito de Skeuomorphism para el tablero, complejo con colores complementarios y modo oscuro

Abrir

Componente Mensajes de éxito

Un componente para mostrar mensajes de éxito con un estilo de diseño 3D, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.

Abrir