Komponenten Zurücksetzen des Passworts Komponente zum Zurücksetzen des Kennworts

Komponente zum Zurücksetzen des Kennworts

Eine minimalistische, reaktionsschnelle Komponente zum Zurücksetzen von Passwörtern mit Sonnenuntergangs-/warmen Tönen, geeignet für Food-/Restaurant-Websites, einschließlich Unterstützung des Dunkelmodus.

Vorschau

HTML-Code

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

Verwandte Komponenten

Komponente zum Zurücksetzen des Passworts - Retro/Vibrant Dashboard

Eine Komponente zum Zurücksetzen von Passwörtern im Retro-Vintage-Stil mit leuchtenden Farben, die sich für ein Armaturenbrett eignet. Es verfügt über ein responsives Design und Unterstützung für dunkle Themen mit Tailwind CSS. Das Design erinnert an die Ästhetik der 80er/90er Jahre.

Offen

Komponente zum Zurücksetzen des Kennworts - Glassmorphism Grayscale

Eine Komponente zum Zurücksetzen des Passworts zum Thema Glassmorphism mit einem Graustufen-Farbschema und transparenten Eingabefeldern und Schaltflächen aus Milchglas. Entwickelt für Reaktionsfähigkeit und mit Unterstützung für den Dunkelmodus. Obwohl der Zweck Wetter/Klima ist, ist das Formular zum Zurücksetzen des Passworts selbst generisch.

Offen

Retro_Crypto_Password_Reset_Component

Eine komplexe Komponente zum Zurücksetzen von Passwörtern im Retro-/Vintage-Stil, die für Kryptowährungs- und Blockchain-Anwendungen entwickelt wurde und sich durch mehrstufige Interaktion, responsives Layout und Unterstützung für den Dunkelmodus auszeichnet.

Offen