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

Componente de restablecimiento de contraseña

Un componente de restablecimiento de contraseña inspirado en Material Design para plataformas de redes sociales creado con Tailwind CSS. Cuenta con un esquema de color vibrante con colores de alta saturación, diseño limpio y diseño receptivo con soporte para modo oscuro. El componente incluye campos de entrada para correo electrónico, un botón de envío y texto útil. El diseño utiliza principios de diseño de materiales como la elevación de la tarjeta, el diseño de la cuadrícula y los efectos de profundidad.

Vista previa

Código HTML

<!-- Password Reset Card Container -->
<div class="max-w-md mx-auto my-8 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-all duration-300">
  <!-- Header with Icon -->
  <div class="text-center mb-6">
    <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-purple-100 dark:bg-purple-900 mb-4">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-600 dark:text-purple-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
      </svg>
    </div>
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Reset Password</h1>
    <p class="text-gray-600 dark:text-gray-300 mt-2">Enter your email to receive a password reset link</p>
  </div>
  
  <!-- Form -->
  <form class="space-y-4">
    <!-- Email Input -->
    <div>
      <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
      <div class="relative">
        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
          </svg>
        </div>
        <input id="email" type="email" class="pl-10 w-full py-2 px-4 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 focus:border-transparent dark:text-white transition-colors duration-200" placeholder="[email protected]" required>
      </div>
    </div>
    
    <!-- Submit Button -->
    <button type="submit" class="w-full py-2 px-4 bg-purple-600 hover:bg-purple-700 focus:ring-purple-500 focus:ring-offset-purple-200 text-white font-medium rounded-md transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
      Send Reset Link
    </button>
    
    <!-- Additional Info -->
    <div class="text-center mt-4">
      <p class="text-sm text-gray-600 dark:text-gray-400">
        Remember your password? 
        <a href="#" class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 font-medium transition-colors duration-200">
          Sign in
        </a>
      </p>
    </div>
  </form>
  
  <!-- Security Note -->
  <div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
    <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 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>We'll send a secure link valid for 30 minutes</p>
    </div>
  </div>
</div>

Componentes relacionados