CCHub Logo CCHub Tailwind Collection
Komponenten Zurücksetzen des Passworts Komponente zum Zurücksetzen des Kennworts

Komponente zum Zurücksetzen des Kennworts

Eine Komponente zum Zurücksetzen des Passworts mit Material Design, leuchtenden Farben, moderater Komplexität und E-Commerce-Zweck. Es ist reaktionsschnell und unterstützt dunkles Theme mit Tailwind CSS. Es ist kein JavaScript enthalten.

Vorschau

HTML-Code 

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

Verwandte Komponenten

Komponente zum Zurücksetzen des Kennworts

Eine komplexe Komponente zum Zurücksetzen von Passwörtern, die für Behörden/öffentliche Dienste entwickelt wurde und sich durch ein sauberes, minimalistisches, typografieorientiertes Design mit kontrastreichen Farben und vollständiger Reaktionsfähigkeit auszeichnet, einschließlich Unterstützung des Dunkelmodus.

Offen

Komponente zum Zurücksetzen des Passworts Brutalismus Komplex Analoges Dashboard

Eine Komponente zum Zurücksetzen von Passwörtern im brutalistischen Stil für ein Dashboard mit einem komplexen Layout, einem analogen Farbschema, Reaktionsfähigkeit und Unterstützung für den Dunkelmodus.

Offen

Komponente zum Zurücksetzen des Kennworts

Eine reaktionsschnelle Komponente zum Zurücksetzen von Passwörtern mit Neumorphism-Design, Unterstützung für den Dunkelmodus und ohne JavaScript.

Offen