Componentes Restablecimiento de contraseña Componente de restablecimiento de contraseña

Componente de restablecimiento de contraseña

Un componente de restablecimiento de contraseña minimalista y receptivo con tonos océano/azul, diseñado para plataformas de mercado, incluida la compatibilidad con el modo oscuro.

Vista previa

Código HTML

<div class="min-h-screen flex items-center justify-center p-4 bg-blue-50 dark:bg-gray-900 transition-colors duration-300">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 space-y-6 border border-blue-100 dark:border-gray-700 transition-all duration-300 transform md:scale-105 lg:scale-100 xl:scale-95">
    <div class="text-center">
      <h1 class="text-3xl font-extrabold text-blue-800 dark:text-blue-300 mb-2">Reset Your Password</h1>
      <p class="text-gray-600 dark:text-gray-400 text-sm">Enter your new password below.</p>
    </div>

    <form class="space-y-6">
      <div>
        <label for="new-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">New Password</label>
        <input type="password" id="new-password" name="new-password" required class="w-full px-4 py-2 border border-blue-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-blue-50 dark:bg-gray-700 transition-colors duration-200" placeholder="••••••••">
      </div>

      <div>
        <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Confirm Password</label>
        <input type="password" id="confirm-password" name="confirm-password" required class="w-full px-4 py-2 border border-blue-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-blue-50 dark:bg-gray-700 transition-colors duration-200" placeholder="••••••••">
      </div>

      <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-lg font-semibold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800 transition-colors duration-200">
        Reset Password
      </button>
    </form>

    <div class="text-center text-sm">
      <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200">Back to sign in</a>
    </div>
  </div>
</div>

Componentes relacionados

Skeuomórfico Pastel Restablecimiento de contraseña

Un componente web responsivo de restablecimiento de contraseña diseñado con una estética de skeuomorfismo, con suaves colores pastel. La interfaz es compleja, con múltiples elementos interactivos detallados a través de efectos 3D, sombras y texturas sutiles creadas con Tailwind CSS. Incluye un formulario para ingresar correo electrónico y un botón destacado 'Enviar enlace de restablecimiento', junto con enlaces secundarios. Se admite el tema oscuro. Ideal para exhibiciones de portafolios.

Abrir