Componentes de búsqueda

Categorías

Componentes Restablecimiento de contraseña

Restablecimiento de contraseña

Proceso para restablecer contraseñas olvidadas

Componente de restablecimiento de contraseña

Un componente de restablecimiento de contraseña receptivo con un diseño monoespaciado/desarrollador, combinación de colores otoñal y estética de terminal, adecuado para aplicaciones de comercio electrónico. Incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="flex min-h-screen items-center justify-center bg-stone-100 p-4 dark:bg-zinc-900 font-mono">
  <div class="w-full max-w-md rounded-lg border border-stone-300 bg-stone-50 p-6 shadow-xl dark:border-zinc-700 dark:bg-zinc-800 md:p-8">
    <div class="mb-6 flex items-center justify-between">
      <h2 class="text-2xl font-bold text-orange-800 dark:text-orange-400">Reset Password</h2>
      <span class="text-sm text-stone-600 dark:text-zinc-400">< KeyVault /></span>
    </div>

    <p class="mb-6 text-sm leading-relaxed text-stone-700 dark:text-zinc-300">
      Forgot your password? No problem. Enter your account email below and we'll send you a password reset link.
    </p>

    <form action="#" method="POST">
      <div class="mb-4">
        <label for="email" class="mb-2 block text-sm font-medium text-stone-700 dark:text-zinc-300">
          <span class="text-orange-700 dark:text-orange-500">guest@</span>your-store:<span class="text-amber-700 dark:text-amber-500">~</span><span class="animate-pulse">_</span> Enter Email
        </label>
        <input
          type="email"
          id="email"
          name="email"
          autocomplete="email"
          required
          placeholder="[email protected]"
          class="w-full rounded-md border border-stone-400 bg-stone-200 px-3 py-2 text-stone-900 placeholder:text-stone-500 focus:border-orange-600 focus:outline-none focus:ring-1 focus:ring-orange-600 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-100 dark:placeholder:text-zinc-400 dark:focus:border-orange-500 dark:focus:ring-orange-500 text-sm md:text-base"
        />
      </div>

      <div class="mb-6 flex items-center justify-between text-xs md:text-sm">
        <div class="flex items-center">
          <input
            id="remember-me"
            name="remember-me"
            type="checkbox"
            class="h-4 w-4 rounded border-stone-500 bg-stone-300 text-orange-600 focus:ring-orange-500 dark:border-zinc-500 dark:bg-zinc-600 dark:checked:bg-orange-600"
          />
          <label for="remember-me" class="ml-2 text-stone-700 dark:text-zinc-300">
            <span class="text-orange-700 dark:text-orange-500">root@</span>cache:<span class="text-amber-700 dark:text-amber-500">/var/log</span> Remember Device
          </label>
        </div>
        <a href="#" class="font-medium text-orange-700 hover:text-orange-600 dark:text-orange-500 dark:hover:text-orange-400">
          <span class="text-orange-700 dark:text-orange-500">sudo</span> View Log
        </a>
      </div>

      <button
        type="submit"
        class="w-full rounded-md bg-orange-700 px-4 py-2 font-semibold text-white shadow-sm hover:bg-orange-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-700 transition-colors dark:bg-orange-600 dark:hover:bg-orange-500 text-sm md:text-base"
      >
        <span class="text-amber-200">./</span>send-reset-link.sh
      </button>
    </form>

    <div class="mt-8 border-t border-stone-300 pt-6 text-center text-sm dark:border-zinc-700">
      <p class="text-stone-700 dark:text-zinc-300">
        <span class="text-orange-700 dark:text-orange-500">$</span> Already have an account? 
        <a href="#" class="font-medium text-orange-700 hover:text-orange-600 dark:text-orange-500 dark:hover:text-orange-400">Login instead</a>
      </p>
      <p class="mt-2 text-stone-600 dark:text-zinc-400">
        <span class="text-orange-700 dark:text-orange-500">~</span> Need assistance? <a href="#" class="font-medium text-orange-700 hover:text-orange-600 dark:text-orange-500 dark:hover:text-orange-400">Ping Support</a>
      </p>
    </div>
  </div>
</div>

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.

Abrir Vista previa

                <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>

Componente de restablecimiento de contraseña

Un componente de restablecimiento de contraseña limpio y confiable diseñado para sitios web corporativos/profesionales de noticias y medios, con neutros cálidos, capacidad de respuesta y compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 sm:p-8 border border-gray-200 dark:border-gray-700">
    <div class="text-center mb-6 sm:mb-8">
      <h1 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-2">Reset Your Password</h1>
      <p class="text-sm text-gray-600 dark:text-gray-400">Enter your email address to receive a password reset link.</p>
    </div>
    <form>
      <div class="mb-4">
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
        <input type="email" id="email" name="email" placeholder="[email protected]" class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-400 sm:text-sm text-gray-900 bg-gray-50">
      </div>
      <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:bg-amber-700 dark:hover:bg-amber-600 dark:focus:ring-offset-gray-800">
        Send Reset Link
      </button>
    </form>
    <div class="mt-6 text-center text-sm">
      <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400">
        Remember your password? Log in
      </a>
    </div>
  </div>
</div>

Componente de restablecimiento de contraseña

Un componente complejo de restablecimiento de contraseña diseñado para servicios gubernamentales/públicos, con un diseño limpio y minimalista basado en la tipografía con colores de alto contraste y capacidad de respuesta completa, incluida la compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col justify-center py-12 sm:px-6 lg:px-8 font-sans transition-colors duration-200">
    <div class="sm:mx-auto sm:w-full sm:max-w-md">
        <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-gray-100 leading-tight tracking-tight sm:text-4xl">
            Reset Your Password
        </h2>
        <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400 max-w-sm mx-auto">
            Enter your email address below to receive a password reset link.
        </p>
    </div>

    <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
        <div class="bg-white dark:bg-gray-800 py-8 px-4 shadow-lg rounded-lg sm:px-10 border border-gray-200 dark:border-gray-700">
            <form class="space-y-6" action="#" method="POST">
                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Email address
                    </label>
                    <div class="mt-1 relative rounded-md shadow-sm">
                        <input id="email" name="email" type="email" autocomplete="email" required
                            class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 pr-10">
                        <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                            <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M2.5 7A.5.5 0 013 6.5h14a.5.5 0 01.5.5v1.5a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5V7zm0 4.5A.5.5 0 013 11h14a.5.5 0 01.5.5v1.5a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5v-1.5z" clip-rule="evenodd" />
                                <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 011 1v12a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM4.5 5.5a.5.5 0 00-.5.5v9a.5.5 0 00.5.5h11a.5.5 0 00.5-.5v-9a.5.5 0 00-.5-.5h-11z" clip-rule="evenodd" />
                            </svg>
                        </div>
                    </div>
                </div>

                <div>
                    <button type="submit"
                        class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium 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 dark:focus:ring-offset-gray-900 transition duration-150 ease-in-out">
                        Send reset link
                    </button>
                </div>
            </form>

            <div class="mt-6">
                <div class="relative">
                    <div class="absolute inset-0 flex items-center" aria-hidden="true">
                        <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
                    </div>
                    <div class="relative flex justify-center text-sm">
                        <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">
                            Or
                        </span>
                    </div>
                </div>

                <div class="mt-6 space-y-4">
                    <a href="#" class="w-full flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition duration-150 ease-in-out">
                        <svg class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM6.75 9.25a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z" clip-rule="evenodd" />
                        </svg>
                        Back to Login
                    </a>
                    <a href="#" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/50 hover:bg-blue-100 dark:hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 transition duration-150 ease-in-out">
                        <svg class="h-5 w-5 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M18 10h-1.26A8 8 0 1010 4.09"></path>
                            <path d="M20.25 7.5l-2.75-2.75L15 7.5"></path>
                        </svg>
                        Contact Support
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Componente de restablecimiento de contraseña

Un componente de restablecimiento de contraseña complejo y receptivo con un diseño 'Orgánico/inspirado en la naturaleza', combinación de colores 'Atardecer/Tonos cálidos', adecuado para herramientas de CRM/Business. Incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-amber-50 to-orange-100 dark:from-gray-900 dark:to-gray-800 transition-colors duration-500 font-sans">
  <div class="relative w-full max-w-md mx-auto p-8 bg-white dark:bg-gray-850 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-500 scale-100 hover:scale-105 group border border-amber-200 dark:border-gray-700">
    <!-- Organic background shapes -->
    <div class="absolute -top-10 -left-10 w-48 h-48 bg-amber-200 dark:bg-amber-800 rounded-full mix-blend-multiply opacity-30 blur-xl group-hover:scale-125 transition-transform duration-700"></div>
    <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-orange-200 dark:bg-orange-800 rounded-full mix-blend-multiply opacity-30 blur-xl group-hover:scale-125 transition-transform duration-700"></div>
    <div class="absolute top-1/4 left-1/4 w-32 h-32 bg-yellow-100 dark:bg-yellow-800 rounded-full mix-blend-overlay opacity-20 blur-xl group-hover:scale-125 transition-transform duration-700"></div>

    <div class="relative z-10 space-y-8">
      <div class="text-center">
        <h2 class="text-3xl font-extrabold text-amber-800 dark:text-amber-300 mb-2 leading-tight tracking-tight drop-shadow-sm">
          Reset Your Password
        </h2>
        <p class="text-orange-600 dark:text-orange-200 text-sm md:text-base leading-relaxed">
          Enter your new password below. Ensure it's strong and unique.
        </p>
      </div>

      <form class="space-y-6">
        <div>
          <label for="new-password" class="block text-sm font-medium text-orange-700 dark:text-orange-300 mb-1">
            New Password
          </label>
          <div class="relative">
            <input
              type="password"
              id="new-password"
              name="new-password"
              required
              class="w-full px-4 py-2 rounded-xl border border-amber-300 dark:border-gray-700 focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-400 focus:border-transparent outline-none transition-all duration-300 text-orange-800 dark:text-white bg-amber-50 dark:bg-gray-700 placeholder-orange-300 dark:placeholder-gray-400 shadow-sm"
              placeholder="••••••••"
            >
            <span class="absolute inset-y-0 right-0 pr-3 flex items-center text-orange-400 dark:text-gray-400">
              <!-- Placeholder for an eye icon -->
              <svg class="h-5 w-5" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
              </svg>
            </span>
          </div>
          <p class="mt-2 text-xs text-orange-500 dark:text-orange-400">
            Minimum 8 characters, including a capital letter and a number.
          </p>
        </div>

        <div>
          <label for="confirm-password" class="block text-sm font-medium text-orange-700 dark:text-orange-300 mb-1">
            Confirm Password
          </label>
          <div class="relative">
            <input
              type="password"
              id="confirm-password"
              name="confirm-password"
              required
              class="w-full px-4 py-2 rounded-xl border border-amber-300 dark:border-gray-700 focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-400 focus:border-transparent outline-none transition-all duration-300 text-orange-800 dark:text-white bg-amber-50 dark:bg-gray-700 placeholder-orange-300 dark:placeholder-gray-400 shadow-sm"
              placeholder="••••••••"
            >
             <span class="absolute inset-y-0 right-0 pr-3 flex items-center text-orange-400 dark:text-gray-400">
              <!-- Placeholder for an eye icon -->
              <svg class="h-5 w-5" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
              </svg>
            </span>
          </div>
        </div>

        <button
          type="submit"
          class="w-full px-6 py-3 rounded-full bg-gradient-to-r from-orange-500 to-amber-700 text-white font-semibold text-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-600 focus:ring-opacity-75 relative overflow-hidden group"
        >
          <span class="relative z-10">
            Reset Password
          </span>
          <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
        </button>
      </form>

      <div class="text-center text-sm">
        <p class="text-orange-600 dark:text-orange-200">
          Remember your password?
          <a href="#" class="font-medium text-amber-700 dark:text-amber-300 hover:text-amber-900 dark:hover:text-amber-100 transition-colors duration-200">
            Log In
          </a>
        </p>
      </div>
    </div>
  </div>
</div>

Componente de restablecimiento de contraseña - Glassmorphism Grayscale

Un componente de restablecimiento de contraseña con temática de glassmorphism con un esquema de color en escala de grises, con campos y botones de entrada translúcidos similares al vidrio esmerilado. Diseñado para la capacidad de respuesta e incluye soporte para el modo oscuro. Aunque el propósito es el tiempo/clima, el formulario de restablecimiento de contraseña en sí es genérico.

Abrir Vista previa

                <div class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 duration-300">
  <div class="w-full max-w-md p-8 rounded-xl shadow-2xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 border border-gray-200 border-opacity-30 dark:border-gray-700 dark:border-opacity-30 transform transition-all duration-500 ease-in-out hover:scale-105 hover:shadow-3xl">
    <h2 class="text-3xl font-extrabold text-center text-gray-800 dark:text-gray-100 mb-6 drop-shadow-md">Reset Password</h2>
    <p class="text-center text-gray-700 dark:text-gray-300 mb-8 max-w-sm mx-auto drop-shadow-sm">Enter your email address below and we'll send you a link to reset your password.</p>

    <form class="space-y-6">
      <div>
        <label for="email" class="sr-only">Email address</label>
        <input id="email" name="email" type="email" autocomplete="email" required class="block w-full px-5 py-3 rounded-lg text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 bg-white bg-opacity-50 dark:bg-gray-700 dark:bg-opacity-50 border border-gray-300 border-opacity-50 dark:border-gray-600 dark:border-opacity-50 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 focus:border-transparent transition-all duration-300 ease-in-out shadow-sm"
          placeholder="[email protected]">
      </div>

      <div>
        <button type="submit" class="w-full flex justify-center py-3 px-6 border border-transparent rounded-lg shadow-sm text-lg font-semibold text-white bg-gray-700 bg-opacity-80 dark:bg-gray-600 dark:bg-opacity-80 hover:bg-gray-800 hover:bg-opacity-90 dark:hover:bg-gray-700 dark:hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900 transition-all duration-300 ease-in-out transform active:scale-95">
          Send Reset Link
        </button>
      </div>
    </form>

    <div class="mt-8 text-center">
      <p class="text-sm text-gray-600 dark:text-gray-400">
        Remember your password?
        <a href="#" class="font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 focus:rounded-sm">
          Log in
        </a>
      </p>
    </div>
  </div>
</div>

Componente de restablecimiento de contraseña

Un componente de restablecimiento de contraseña minimalista y receptivo con tonos atardeceres/cálidos, adecuado para sitios web de comida/restaurantes, incluida la compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-orange-50 to-red-100 dark:from-gray-900 dark:to-gray-800 font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-700 rounded-lg shadow-xl p-8 space-y-6 transform transition-all duration-300 hover:shadow-2xl">
    <div class="text-center">
      <h2 class="mt-2 text-3xl font-extrabold text-orange-600 dark:text-orange-400 capitalize drop-shadow-sm">Reset Your Password</h2>
      <p class="mt-2 text-sm text-gray-500 dark:text-gray-300">Enter your email address to receive a password reset link.</p>
    </div>

    <form class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Email address</label>
        <div class="mt-1">
          <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-transparent focus:border-orange-500 dark:focus:border-orange-400 sm:text-sm bg-gray-50 dark:bg-gray-600 text-gray-900 dark:text-white transition-colors duration-200 ease-in-out">
        </div>
      </div>

      <div>
        <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-orange-600 hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-700 dark:focus:ring-orange-500 transition-colors duration-200 ease-in-out transform hover:scale-105 active:scale-95">
          Send Reset Link
        </button>
      </div>
    </form>

    <div class="mt-6 text-center">
      <p class="text-sm">
        <a href="#" class="font-medium text-orange-600 hover:text-orange-500 dark:text-orange-400 dark:hover:text-orange-300">
          Remembered your password? Log In
        </a>
      </p>
    </div>
  </div>
</div>

Componente de restablecimiento de contraseña

Un componente de restablecimiento de contraseña complejo y receptivo con un estilo de diseño monoespaciado/desarrollador, con un esquema de color en blanco y negro con un acento brillante. Diseñado para sitios de documentación/wiki, incluye soporte para modo oscuro y HTML semántico.

Abrir Vista previa

                <div class="min-h-screen bg-neutral-50 font-mono text-gray-900 flex items-center justify-center p-4 sm:p-6 dark:bg-zinc-950 dark:text-gray-100">
  <div class="w-full max-w-md bg-stone-100 border border-neutral-300 rounded-lg shadow-xl overflow-hidden md:max-w-xl lg:max-w-2xl dark:bg-zinc-900 dark:border-zinc-800">
    <div class="flex flex-col md:flex-row">
      <div class="w-full p-6 sm:p-8 md:w-1/2 lg:w-2/5 md:flex md:flex-col md:justify-between dark:bg-zinc-800 dark:border-r dark:border-zinc-700">
        <div>
          <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-emerald-600 dark:text-emerald-400">//RESET_PASSWORD</h2>
          <p class="mb-6 text-sm text-gray-700 dark:text-gray-300">
            <span class="text-emerald-700 dark:text-emerald-500">&gt;</span> Enter your registered email address.
          </p>
          <p class="mb-6 text-sm text-gray-700 dark:text-gray-300">
            <span class="text-red-600 dark:text-red-400">!</span> A password reset link will be sent to your inbox. Check your spam folder if necessary.
          </p>
        </div>
        <div class="mt-8 md:mt-0">
          <p class="text-xs text-gray-500 dark:text-gray-400">
            <span class="text-emerald-600 dark:text-emerald-400">&gt;</span> System uptime: <span class="text-gray-700 dark:text-gray-300">234d 12h 34m 56s</span>
          </p>
          <p class="text-xs text-gray-500 dark:text-gray-400">
            <span class="text-emerald-600 dark:text-emerald-400">&gt;</span> Logged in as: <span class="text-gray-700 dark:text-gray-300">[email protected]</span>
          </p>
        </div>
      </div>

      <div class="w-full p-6 sm:p-8 md:w-1/2 lg:w-3/5 border-t border-neutral-300 md:border-t-0 md:border-l dark:border-zinc-800">
        <form class="space-y-6">
          <div>
            <label for="email" class="block text-xs font-medium text-gray-700 uppercase tracking-wider mb-1 dark:text-gray-300">
              user@domain:~$ _
            </label>
            <input
              type="email"
              id="email"
              name="email"
              autocomplete="email"
              required
              placeholder="[email protected]"
              class="appearance-none block w-full px-3 py-2 border border-gray-400 rounded-md shadow-sm placeholder-gray-500 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm bg-white dark:bg-zinc-700 dark:border-zinc-600 dark:text-gray-100 dark:placeholder-gray-400"
            />
          </div>

          <div class="flex items-start">
            <div class="flex items-center h-5">
              <input
                id="terms"
                name="terms"
                type="checkbox"
                class="focus:ring-emerald-500 h-4 w-4 text-emerald-600 border-gray-400 rounded dark:bg-zinc-700 dark:border-zinc-600"
              />
            </div>
            <div class="ml-3 text-sm">
              <label for="terms" class="font-medium text-gray-700 dark:text-gray-300">
                <span class="text-emerald-600 dark:text-emerald-400">[</span> I understand this action <span class="text-red-700 dark:text-red-500">cannot be undone</span> <span class="text-emerald-600 dark:text-emerald-400">]</span>
              </label>
            </div>
          </div>

          <div>
            <button
              type="submit"
              class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:bg-emerald-700 dark:hover:bg-emerald-600 dark:focus:ring-emerald-600"
            >
              <span class="">EXECUTE_RESET_COMMAND</span>
              <span class="ml-2 text-white/50 dark:text-white/40">$PWD_RESET</span>
            </button>
          </div>

          <div class="text-center">
            <a href="#" class="text-sm text-emerald-600 hover:text-emerald-500 dark:text-emerald-400 dark:hover:text-emerald-300">
              <span class="text-emerald-600 dark:text-emerald-400">&lt;</span> Go back to login screen
            </a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Retro_Crypto_Password_Reset_Component

Un componente complejo de restablecimiento de contraseña de temática retro/vintage diseñado para aplicaciones de criptomonedas y blockchain, con interacción de varios pasos, diseño receptivo y compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-900 text-gray-200 p-4 font-mono dark:from-gray-900 dark:via-black dark:to-gray-950">
  <div class="flex items-center justify-center min-h-screen">
    <div class="relative bg-gradient-to-br from-indigo-800 to-purple-800 border-4 border-purple-400 rounded-lg shadow-retro-glow p-8 w-full max-w-lg md:max-w-2xl lg:max-w-3xl transform -rotate-1 skew-x-1 transition-all duration-300 hover:rotate-0 hover:skew-x-0 dark:from-gray-800 dark:to-gray-900 dark:border-purple-600 dark:shadow-retro-glow-dark">
      <div class="absolute -top-4 -left-4 w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center text-xl font-bold border-2 border-purple-300 transform rotate-12 dark:bg-purple-700 dark:border-purple-500">Ω</div>
      <div class="absolute -bottom-4 -right-4 w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center text-xl font-bold border-2 border-purple-300 transform -rotate-12 dark:bg-purple-700 dark:border-purple-500">Ξ</div>

      <div class="text-center mb-8">
        <h1 class="text-4xl md:text-5xl font-extrabold text-yellow-300 uppercase leading-tight tracking-wider mb-2 drop-shadow-lg dark:text-yellow-400">
          [CRYPTO] Reset Protocol
        </h1>
        <p class="text-purple-200 text-lg md:text-xl italic">
          Accessing secured memory banks...
        </p>
      </div>

      <div class="relative bg-purple-900/50 p-6 rounded-md border border-purple-700 shadow-inner-glow dark:bg-gray-800/50 dark:border-gray-700">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <!-- Left Panel: Form Steps -->
          <div>
            <h2 class="text-2xl font-bold text-yellow-300 mb-4 dark:text-yellow-400">Authentication Sequence</h2>

            <!-- Step 1: Email/Username -->
            <div class="mb-6" id="step1">
              <label for="identifier" class="block text-purple-200 text-sm font-bold mb-2 uppercase tracking-wide">User ID / Wallet Alias</label>
              <input type="text" id="identifier" name="identifier" class="shadow-inner appearance-none border border-purple-600 rounded w-full py-3 px-4 text-purple-900 bg-purple-200 leading-tight focus:outline-none focus:shadow-outline focus:border-yellow-300 transition-colors duration-200 placeholder-purple-500 dark:text-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" placeholder="Enter your encrypted identity">
              <button class="mt-4 bg-yellow-500 hover:bg-yellow-600 text-purple-900 font-bold py-2 px-4 rounded transition-colors duration-200 shadow-md transform hover:scale-105 active:scale-95 dark:bg-yellow-600 dark:hover:bg-yellow-700" onclick="document.getElementById('step1').classList.add('hidden'); document.getElementById('step2').classList.remove('hidden');">Initiate Sequence</button>
            </div>

            <!-- Step 2: Verification Code (Hidden by default) -->
            <div class="hidden mb-6" id="step2">
              <label for="verification_code" class="block text-purple-200 text-sm font-bold mb-2 uppercase tracking-wide">Security Key Receive Protocol</label>
              <input type="text" id="verification_code" name="verification_code" class="shadow-inner appearance-none border border-purple-600 rounded w-full py-3 px-4 text-purple-900 bg-purple-200 leading-tight focus:outline-none focus:shadow-outline focus:border-yellow-300 transition-colors duration-200 placeholder-purple-500 dark:text-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" placeholder="Enter Alpha-numeric key">
              <p class="text-xs text-purple-300 mt-1">A 6-digit key has been dispatched to your registered relay point.</p>
              <button class="mt-4 bg-yellow-500 hover:bg-yellow-600 text-purple-900 font-bold py-2 px-4 rounded transition-colors duration-200 shadow-md transform hover:scale-105 active:scale-95 dark:bg-yellow-600 dark:hover:bg-yellow-700" onclick="document.getElementById('step2').classList.add('hidden'); document.getElementById('step3').classList.remove('hidden');">Validate Key</button>
            </div>

            <!-- Step 3: New Password (Hidden by default) -->
            <div class="hidden mb-6" id="step3">
              <label for="new_password" class="block text-purple-200 text-sm font-bold mb-2 uppercase tracking-wide">Input New Encryption Passphrase</label>
              <input type="password" id="new_password" name="new_password" class="shadow-inner appearance-none border border-purple-600 rounded w-full py-3 px-4 text-purple-900 bg-purple-200 leading-tight focus:outline-none focus:shadow-outline focus:border-yellow-300 transition-colors duration-200 placeholder-purple-500 dark:text-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" placeholder="Min 10 characters, mixed case, symbols">
              <p class="text-xs text-purple-300 mt-1">Ensure high entropy for secure re-initialization.</p>

              <label for="confirm_password" class="block text-purple-200 text-sm font-bold mb-2 mt-4 uppercase tracking-wide">Re-confirm Passphrase</label>
              <input type="password" id="confirm_password" name="confirm_password" class="shadow-inner appearance-none border border-purple-600 rounded w-full py-3 px-4 text-purple-900 bg-purple-200 leading-tight focus:outline-none focus:shadow-outline focus:border-yellow-300 transition-colors duration-200 placeholder-purple-500 dark:text-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" placeholder="Re-enter for verification">
              <button class="mt-6 bg-green-500 hover:bg-green-600 text-purple-900 font-bold py-2 px-4 rounded transition-colors duration-200 shadow-md transform hover:scale-105 active:scale-95 dark:bg-green-600 dark:hover:bg-green-700">Execute Re-initialization</button>
            </div>
          </div>

          <!-- Right Panel: Status/Info Display -->
          <div class="hidden md:block">
            <h2 class="text-2xl font-bold text-yellow-300 mb-4 dark:text-yellow-400">System Diagnostics</h2>
            <div class="bg-purple-800/70 p-4 rounded-md border border-purple-600 h-full flex flex-col justify-between dark:bg-gray-700/70 dark:border-gray-600">
              <div>
                <p class="text-purple-200 text-sm mb-2">Status: <span class="text-yellow-300 font-semibold">Awaiting Input</span></p>
                <p class="text-purple-200 text-sm mb-2">Session ID: <span class="text-purple-300">0x7a8b9c...</span></p>
                <p class="text-purple-200 text-sm mb-4">Last attempt: <span class="text-purple-300">2024.07.20 14:38 GMT</span></p>
                <hr class="border-purple-600 my-4 dark:border-gray-600">
                <p class="text-purple-200 text-sm italic">For security, all network traffic is encrypted with AES-256. Do NOT share your private keys or backup mnemonics with anyone, ever. Our support will NEVER ask for this information.</p>
              </div>
              <div class="mt-4 text-center">
                <img src="https://picsum.photos/150/100?random=1" alt="Retro abstract data stream" class="mx-auto rounded-md border border-purple-600 shadow-lg">
                <p class="text-xs text-purple-400 mt-2">['DATA_STREAM_VISUALIZER']</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-8 text-center text-purple-300 text-xs">
        <p>&copy; 2084 [CRYPTO] Corp. All network transmissions monitored.</p>
        <p class="mt-1"><a href="#" class="underline hover:text-yellow-300">Terms of Protocol</a> | <a href="#" class="underline hover:text-yellow-300">Data Security Policy</a></p>
      </div>
    </div>
  </div>
</div>

<style>
  /* Retro glow effect */
  .shadow-retro-glow {
    box-shadow: 
      0 0 5px rgba(255, 255, 255, 0.5),
      0 0 10px rgba(168, 85, 247, 0.7),
      0 0 20px rgba(168, 85, 247, 0.5),
      0 0 30px rgba(168, 85, 247, 0.3);
  }
  .dark .shadow-retro-glow-dark {
    box-shadow: 
      0 0 5px rgba(255, 255, 255, 0.3),
      0 0 10px rgba(192, 132, 252, 0.6),
      0 0 20px rgba(192, 132, 252, 0.4),
      0 0 30px rgba(192, 132, 252, 0.2);
  }
  /* Inner glow for panels */
  .shadow-inner-glow {
    box-shadow: inset 0 0 8px rgba(168, 85, 247, 0.5), inset 0 0 20px rgba(168, 85, 247, 0.2);
  }
  .dark .shadow-inner-glow {
    box-shadow: inset 0 0 8px rgba(192, 132, 252, 0.4), inset 0 0 20px rgba(192, 132, 252, 0.15);
  }

  /* Simple keyframe for subtle animation */
  @keyframes flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.9; }
  }
  .text-yellow-300 { animation: flicker 3s infinite ease-in-out; }
</style>

Componente de restablecimiento de contraseña

Componente de restablecimiento de contraseña de diseño minimalista / plano con tonos tierra, adecuado para plataformas inmobiliarias. Cuenta con un diseño responsivo, compatibilidad con el modo oscuro y múltiples campos de entrada para una interfaz compleja.

Abrir Vista previa

                <div class="min-h-screen bg-stone-100 flex items-center justify-center p-4 dark:bg-stone-900">
  <div class="max-w-md w-full bg-white p-8 rounded-lg shadow-xl dark:bg-stone-800 dark:text-stone-200 border border-stone-200 dark:border-stone-700">
    <div class="text-center mb-8">
      <h2 class="text-3xl font-bold text-stone-800 dark:text-stone-100 mb-2">Reset Your Password</h2>
      <p class="text-stone-600 dark:text-stone-400">Enter your new password below. It should be strong and unique.</p>
    </div>

    <form class="space-y-6">
      <div>
        <label for="new-password" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">New Password</label>
        <input type="password" id="new-password" name="new-password" required class="mt-1 block w-full px-4 py-2 bg-stone-50 border border-stone-300 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500 sm:text-sm dark:bg-stone-700 dark:border-stone-600 dark:text-stone-100 dark:placeholder-stone-400">
        <p class="mt-2 text-sm text-stone-500 dark:text-stone-400">Must be at least 8 characters, with letters, numbers, and symbols.</p>
      </div>

      <div>
        <label for="confirm-password" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">Confirm New Password</label>
        <input type="password" id="confirm-password" name="confirm-password" required class="mt-1 block w-full px-4 py-2 bg-stone-50 border border-stone-300 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500 sm:text-sm dark:bg-stone-700 dark:border-stone-600 dark:text-stone-100 dark:placeholder-stone-400">
      </div>

      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-amber-600 focus:ring-amber-500 border-stone-300 rounded dark:bg-stone-700 dark:border-stone-600 dark:checked:bg-amber-700">
          <label for="remember-me" class="ml-2 block text-sm text-stone-900 dark:text-stone-300">Remember me on this device</label>
        </div>
      </div>

      <div>
        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:bg-amber-700 dark:hover:bg-amber-800 dark:focus:ring-offset-stone-800">
          Reset Password
        </button>
      </div>
    </form>

    <div class="mt-6 text-center text-sm">
      <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400">Back to login</a>
    </div>
  </div>
</div>