Komponenten suchen

Kategorien

Komponenten Zurücksetzen des Passworts

Zurücksetzen des Passworts

Verfahren zum Zurücksetzen vergessener Passwörter

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 Vorschau

                <div class="max-w-md mx-auto mt-10 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Reset Your Password</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-4">Please enter your email address to receive a password reset link.</p>
    <form>
        <div class="mb-4">
            <label for="email" class="block text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
            <input type="email" id="email" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-green-400" placeholder="[email protected]" required />
        </div>
        <div class="mb-4">
            <label for="new-password" class="block text-gray-700 dark:text-gray-300 mb-2">New Password</label>
            <input type="password" id="new-password" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-green-400" placeholder="Enter new password" required />
        </div>
        <div class="mb-4">
            <label for="confirm-password" class="block text-gray-700 dark:text-gray-300 mb-2">Confirm Password</label>
            <input type="password" id="confirm-password" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-green-400" placeholder="Re-enter new password" required />
        </div>
        <button type="submit" class="w-full py-3 bg-green-500 hover:bg-green-600 text-white rounded-lg transition duration-200">Reset Password</button>
    </form>
    <div class="mt-4 text-center">
        <p class="text-gray-600 dark:text-gray-400">Remembered your password? <a href="#" class="text-green-500 hover:underline">Log in</a></p>
    </div>
</div>

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 Vorschau

                <div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-6">
  <div class="w-full max-w-md bg-yellow-300 dark:bg-yellow-700 border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] p-8 space-y-6">
    <h2 class="text-2xl font-bold text-black dark:text-white uppercase border-b-4 border-black dark:border-white pb-4">Reset Password</h2>
    <p class="text-black dark:text-white text-sm font-mono">Enter your email address to receive a password reset link. This action cannot be undone.</p>
    <div class="space-y-4">
      <div>
        <label for="email" class="block text-sm font-bold text-black dark:text-white uppercase mb-2">Email Address</label>
        <input type="email" id="email" class="w-full p-3 border-4 border-black dark:border-white bg-orange-300 dark:bg-orange-700 text-black dark:text-white focus:outline-none focus:ring-0 focus:border-black dark:focus:border-white" placeholder="[email protected]">
      </div>
      <div class="flex items-center">
        <input type="checkbox" id="remember" class="h-5 w-5 text-black dark:text-white border- काले dark:border-white focus:ring-0 rounded-none">
        <label for="remember" class="ml-2 block text-sm text-black dark:text-white font-mono">Remember me (not recommended on shared computers)</label>
      </div>
    </div>
    <button class="w-full bg-red-500 hover:bg-red-700 text-white font-bold py-3 px-4 border-4 border-black dark:border-white shadow-[6px_6px_0_0_#000] dark:shadow-[6px_6px_0_0_#fff] uppercase transition duration-300 ease-in-out transform active:translate-x-1 active:translate-y-1">
      Send Reset Link
    </button>
    <div class="text-center text-sm">
      <a href="#" class="font-bold text-red-700 dark:text-red-300 hover:underline uppercase">Back to Login</a>
    </div>
  </div>
</div>

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 Vorschau

                <div class="min-h-screen bg-gray-200 dark:bg-gray-800 flex items-center justify-center p-6">
  <div class="w-full max-w-md bg-gray-200 dark:bg-gray-800 rounded-xl shadow-xl p-8 space-y-6 transform transition duration-500 hover:scale-105">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200">Reset Your Password</h2>
    
    <div class="relative">
        <input type="email" id="email" class="block w-full px-4 py-3 rounded-lg bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-inner transition duration-300 peer" placeholder=" ">
        <label for="email" class="absolute top-0 left-3 p-3 text-gray-500 dark:text-gray-400 text-sm transition-all transform duration-300 peer-placeholder-shown:text-base peer-placeholder-shown:top-3 peer-focus:-top-0 peer-focus:text-sm">
            Email Address
        </label>
    </div>

    <div class="relative">
        <input type="password" id="new-password" class="block w-full px-4 py-3 rounded-lg bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-inner transition duration-300 peer" placeholder=" ">
         <label for="new-password" class="absolute top-0 left-3 p-3 text-gray-500 dark:text-gray-400 text-sm transition-all transform duration-300 peer-placeholder-shown:text-base peer-placeholder-shown:top-3 peer-focus:-top-0 peer-focus:text-sm">
            New Password
        </label>
    </div>
    
    <div class="relative">
        <input type="password" id="confirm-password" class="block w-full px-4 py-3 rounded-lg bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-inner transition duration-300 peer" placeholder=" ">
         <label for="confirm-password" class="absolute top-0 left-3 p-3 text-gray-500 dark:text-gray-400 text-sm transition-all transform duration-300 peer-placeholder-shown:text-base peer-placeholder-shown:top-3 peer-focus:-top-0 peer-focus:text-sm">
            Confirm Password
        </label>
    </div>
    
    <button class="w-full py-3 bg-blue-500 text-white font-bold rounded-lg shadow-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 neumorphism-button">
        Reset Password
    </button>
  </div>
</div>

<style>
.neumorphism-button {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}
.dark .neumorphism-button {
    box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #c1c1c1;
}
.shadow-xl {
    box-shadow: 10px 10px 20px #a7a7a7, -10px -10px 20px #ffffff;
}
.dark .shadow-xl {
     box-shadow: 10px 10px 20px #4a4a4a, -10px -10px 20px #c1c1c1;
}
.shadow-inner {
    box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
}
.dark .shadow-inner {
     box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #c1c1c1;
}
</style>

Komponente zum Zurücksetzen des Kennworts

Responsive Password Reset Component mit Unterstützung für den Dunkelmodus

Offen Vorschau

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-400 to-purple-600 dark:from-gray-800 dark:to-gray-900">
  <div class="w-full max-w-md p-8 space-y-6 bg-white rounded shadow-lg dark:bg-gray-700">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Reset Password</h2>
    <form class="space-y-4">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Email Address</label>
        <input type="email" id="email" name="email" required class="w-full px-3 py-2 mt-1 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-600 dark:text-white dark:border-gray-500">
      </div>
      <div>
        <button type="submit" class="w-full px-4 py-2 text-white bg-blue-600 rounded-md 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">Send Reset Link</button>
      </div>
    </form>
  </div>
</div>

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 Vorschau

                <div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900">
    <div class="px-8 py-6 mx-4 mt-4 text-left bg-earth-200 dark:bg-earth-800 shadow-lg md:w-1/3 lg:w-1/3 sm:w-1/3 rounded-lg border dark:border-stone-700 border-earth-300">
        <div class="flex justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-20 h-20 text-stone-600 dark:text-stone-400" fill="none" viewBox="0 0 24 24"
                stroke="currentColor">
                <path d="M12 14l9-5-9-5-9 5 9 5z" />
                <path
                    d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M12 14l9-5-9-5-9 5 9 5zm0 7V14" />
            </svg>
        </div>
        <h3 class="text-2xl font-bold text-center text-stone-800 dark:text-stone-200">Reset Password</h3>
        <form action="">
            <div class="mt-4">
                <div>
                    <label class="block text-stone-700 dark:text-stone-300" for="email">Email</label>
                    <input type="text" placeholder="Email" class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-stone-600 dark:focus:ring-stone-400 border-stone-300 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-200"
                        >
                </div>
                <div class="mt-4">
                    <label class="block">
                        <a href="#" class="text-sm text-stone-600 dark:text-stone-400 hover:underline">Forgot Password?</a>
                    </label>
                </div>
                <div class="flex items-baseline justify-between">
                    <button class="px-6 py-2 mt-4 text-white bg-stone-600 dark:bg-stone-400 rounded-lg hover:bg-stone-900 dark:hover:bg-stone-600">Reset</button>
                </div>
            </div>
        </form>
    </div>
</div>

Komponente zum Zurücksetzen des Kennworts

Eine minimalistische und flache Design-Komponente zum Zurücksetzen von Passwörtern mit Erdtönen, responsivem Design und Unterstützung für dunkle Themen, die auf Blog-Inhalte zugeschnitten ist.

Offen Vorschau

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-800 p-4">
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6 text-center">Reset Password</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4 text-center">Enter your email address to receive a link to create a new password.</p>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email Address</label>
                <input type="email" id="email" class="bg-gray-100 dark:bg-gray-700 border rounded-lg w-full h-12 px-4 focus:outline-none focus:ring focus:ring-green-300" required>
            </div>
            <button type="submit" class="w-full bg-green-500 hover:bg-green-400 text-white font-bold py-2 rounded-lg transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-300">Send Reset Link</button>
        </form>
        <div class="mt-6 text-center">
            <p class="text-gray-600 dark:text-gray-400">Remembered your password? <a href="#" class="text-green-500 hover:underline">Login here</a></p>
        </div>
    </div>
</div>

Komponente zum Zurücksetzen des Kennworts

Eine minimalistische Komponente zum Zurücksetzen von Passwörtern mit responsivem Design und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Offen Vorschau

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 shadow-md rounded-lg p-8 w-96">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center">Reset Password</h2>
        <p class="text-gray-600 dark:text-gray-400 text-center mb-6">Please enter your email address to receive a password reset link.</p>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input type="email" id="email" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="[email protected]" required>
            </div>
            <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Send Reset Link</button>
        </form>
        <div class="mt-4 text-center">
            <p class="text-gray-500 dark:text-gray-400">Remembered your password? <a href="#" class="text-blue-500 hover:underline">Login</a></p>
        </div>
    </div>
</div>

Komponente zum Zurücksetzen des Passworts im Brutalismus-Design

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

Offen Vorschau

                <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 p-8 rounded-none shadow-none border-4 border-black dark:border-white max-w-md w-full">
    <h2 class="text-2xl font-bold text-black dark:text-white mb-6 text-center tracking-tighter">Reset Your Password</h2>
    <form>
      <div class="mb-4">
        <label for="email" class="block text-sm font-bold text-black dark:text-white mb-2">Email Address</label>
        <input type="email" id="email" class="w-full px-3 py-2 border-4 border-black dark:border-white rounded-none bg-gray-200 dark:bg-gray-700 text-black dark:text-white focus:outline-none focus:border-black dark:focus:border-white" required>
      </div>
      <div class="mb-6">
        <button type="submit" class="w-full bg-black dark:bg-white text-white dark:text-black font-bold py-2 px-4 border-4 border-black dark:border-white rounded-none hover:bg-gray-800 dark:hover:bg-gray-200 transition duration-0 ease-linear">Send Reset Link</button>
      </div>
    </form>
    <div class="text-center">
      <p class="text-sm">
        <a href="#" class="text-black dark:text-white hover:underline font-bold">Remember your password?</a>
      </p>
    </div>
  </div>
</div>

Komponente zum Zurücksetzen des Kennworts

Komponente zum Zurücksetzen des Passworts mit Skeuomorphismus-Design, responsiven Effekten und Unterstützung für dunkle Themen.

Offen Vorschau

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="p-8 bg-white dark:bg-gray-800 rounded-xl shadow-neumorphic dark:shadow-neumorphic-dark w-full max-w-md">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Reset Password</h2>
    <form>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email Address</label>
        <input type="email" id="email" class="shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline bg-gray-200 dark:bg-gray-700" placeholder="Enter your email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">New Password</label>
        <input type="password" id="password" class="shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline bg-gray-200 dark:bg-gray-700" placeholder="Enter your new password">
      </div>
      <div class="mb-6">
        <label for="confirm-password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Confirm New Password</label>
        <input type="password" id="confirm-password" class="shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline bg-gray-200 dark:bg-gray-700" placeholder="Confirm your new password">
      </div>
      <div class="flex items-center justify-between">
        <button type="button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline shadow-neumorphic-pressed dark:shadow-neumorphic-pressed-dark">
          Reset Password
        </button>
      </div>
    </form>
  </div>
</div>

<style>
  .shadow-neumorphic {
    box-shadow: 5px 5px 10px #cbced1, -5px -5px 10px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 5px 5px 10px #1a202c, -5px -5px 10px #2d3748;
  }

  .shadow-inner-neumorphic {
    box-shadow: inset 5px 5px 10px #cbced1, inset -5px -5px 10px #ffffff;
  }

  .dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 5px 5px 10px #1a202c, inset -5px -5px 10px #2d3748;
  }

    .shadow-neumorphic-pressed {
    box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
  }

  .dark .shadow-neumorphic-pressed-dark {
    box-shadow: inset 5px 5px 10px #1a202c, inset -5px -5px 10px #2d3748;
  }
</style>

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 Vorschau

                <div class="min-h-screen flex items-center justify-center bg-gray-200 dark:bg-gray-800 p-6">
  <div class="max-w-sm w-full bg-gray-200 dark:bg-gray-800 p-8 rounded-xl shadow-neumorphic dark:shadow-neumorphic-dark">
    <h2 class="text-2xl font-bold text-center text-gray-700 dark:text-gray-200 mb-6">Reset Password</h2>
    <form>
      <div class="mb-6">
        <label for="email" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">Email Address</label>
        <input type="email" id="email" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 text-gray-700 dark:text-gray-200 shadow-neumorphic-input dark:shadow-neumorphic-input-dark" placeholder="Enter your email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">New Password</label>
        <input type="password" id="password" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 text-gray-700 dark:text-gray-200 shadow-neumorphic-input dark:shadow-neumorphic-input-dark" placeholder="Enter new password">
      </div>
      <div class="mb-6">
        <label for="confirm-password" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">Confirm New Password</label>
        <input type="password" id="confirm-password" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 text-gray-700 dark:text-gray-200 shadow-neumorphic-input dark:shadow-neumorphic-input-dark" placeholder="Confirm new password">
      </div>
      <button type="submit" class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-600 dark:focus:ring-opacity-50 shadow-neumorphic-button dark:shadow-neumorphic-button-dark">
        Reset Password
      </button>
    </form>
  </div>
</div>

<style>
  .shadow-neumorphic {
    box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 5px 5px 10px #717171, -5px -5px 10px #999999;
  }
  .shadow-neumorphic-input {
    box-shadow: inset 3px 3px 5px #bebebe, inset -3px -3px 5px #ffffff;
  }
  .dark .shadow-neumorphic-input-dark {
    box-shadow: inset 3px 3px 5px #717171, inset -3px -3px 5px #999999;
  }
  .shadow-neumorphic-button {
    box-shadow: 3px 3px 7px #bebebe, -3px -3px 7px #ffffff;
  }
    .dark .shadow-neumorphic-button-dark {
    box-shadow: 3px 3px 7px #717171, -3px -3px 7px #999999;
  }
</style>