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

Komponente zum Zurücksetzen des Kennworts

Eine reaktionsfähige Komponente zum Zurücksetzen von Kennwörtern mit einer Benutzeroberfläche im dunklen Modus, die ein analoges Farbschema verwendet. Entwickelt für E-Commerce-Anwendungen.

Vorschau

HTML-Code 

<div class="min-h-screen flex items-center justify-center bg-gray-900">
  <div class="bg-gray-800 p-8 rounded-lg shadow-xl w-96">
    <h2 class="text-3xl font-bold text-teal-400 mb-6 text-center">Reset Password</h2>
    <form>
      <div class="mb-4">
        <label for="email" class="block text-gray-300 text-sm font-semibold mb-2">Email Address</label>
        <input type="email" id="email" class="w-full px-4 py-2 bg-gray-700 rounded-lg text-gray-100 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Enter your email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-300 text-sm font-semibold mb-2">New Password</label>
        <input type="password" id="password" class="w-full px-4 py-2 bg-gray-700 rounded-lg text-gray-100 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Enter new password">
      </div>
      <div class="mb-6">
        <label for="confirm-password" class="block text-gray-300 text-sm font-semibold mb-2">Confirm New Password</label>
        <input type="password" id="confirm-password" class="w-full px-4 py-2 bg-gray-700 rounded-lg text-gray-100 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Confirm new password">
      </div>
      <button type="submit" class="w-full bg-teal-600 text-white py-3 rounded-lg font-semibold hover:bg-teal-700 transition duration-300">Reset Password</button>
    </form>
  </div>
</div>

Verwandte Komponenten

Komponente zum Zurücksetzen des Kennworts

Eine minimalistische und reaktionsschnelle Komponente zum Zurücksetzen von Passwörtern mit Ozean-/Blautönen, die für Marktplatzplattformen entwickelt wurde, einschließlich Unterstützung des Dunkelmodus.

Offen

Komponente zum Zurücksetzen des Passworts im Brutalismus-Design

Komponente zum Zurücksetzen des Passworts mit Brutalismus-Design, reaktionsschneller und dunkler Designunterstützung

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