CCHub Logo CCHub Tailwind Collection
Komponenten Zurücksetzen des Passworts Komponente zum Zurücksetzen des Passworts - Retro/Vibrant Dashboard

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.

Vorschau

HTML-Code 

<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 max-w-md w-full border-4 border-purple-500 dark:border-teal-400 transform -rotate-3 hover:rotate-0 transition-transform duration-300">
    <div class="text-center mb-8">
      <h2 class="text-4xl font-bold text-gray-800 dark:text-white font-mono mb-2">RESET <span class="text-purple-600 dark:text-teal-400">PASSWORD</span></h2>
      <p class="text-gray-600 dark:text-gray-300 text-sm">Enter your email to receive a password reset link.</p>
    </div>
    <form>
      <div class="mb-6">
        <label for="email" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2 uppercase tracking-wider">Email Address</label>
        <input type="email" id="email" class="shadow appearance-none border-4 border-yellow-400 dark:border-rose-500 rounded-lg w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-teal-600 bg-gray-200 dark:bg-gray-700 placeholder-gray-500 dark:placeholder-gray-400 transition-all duration-300" placeholder="[email protected]">
      </div>
      <div class="flex items-center justify-between">
        <button type="submit" class="bg-gradient-to-r from-purple-600 to-pink-500 hover:from-purple-700 hover:to-pink-600 text-white font-extrabold py-3 px-6 rounded-full focus:outline-none focus:shadow-outline transform skew-x-12 hover:skew-x-0 transition-all duration-300 text-lg uppercase tracking-widest">
          Send Link
        </button>
        <a href="#" class="inline-block align-baseline font-bold text-sm text-purple-600 dark:text-teal-400 hover:text-purple-800 dark:hover:text-teal-200 transition-colors duration-300">
          Remembered your password?
        </a>
      </div>
    </form>
    <div class="mt-8 text-center text-gray-500 dark:text-gray-400 text-xs">
      <p>&copy;2023 RETRO CORP. All rights reserved. <span class="text-pink-500 dark:text-yellow-300">Stay Awesome!</span></p>
    </div>
  </div>
</div>

Verwandte Komponenten

Komponente zum Zurücksetzen des Kennworts

Komponente zum Zurücksetzen des Passworts mit Neumorphismus-Stil, komplementärem Farbschema, komplexer Komplexität, für Social-Media-Zwecke, mit Tailwind CSS. Responsives Design mit Unterstützung für dunkle Themen.

Offen

Komponente zum Zurücksetzen des Kennworts

Eine Komponente zum Zurücksetzen des Kennworts, die in einem skeuomorphen Stil entwickelt wurde, Erdtöne für eine natürliche Ästhetik verwendet und für Dashboard-Anwendungen strukturiert ist. Es unterstützt den Dunkelmodus und ist reaktionsschnell.

Offen

Komponente zum Zurücksetzen des Kennworts

Komponente zum Zurücksetzen des Passworts mit Retro/Vintage-Design, Farbschema in Erdtönen und komplexer Komplexitätsstufe für Business-/Corporate-Zwecke unter Verwendung von Tailwind CSS. Responsives Design mit Unterstützung für dunkle Themen. Kein JavaScript-Code erforderlich, nur HTML mit Tailwind-Klassen. Verwendung von picsum.photos für Bilder und randomuser.me für Avatare.

Offen