Kategorien

Komponenten Login/Registrierung

Login/Registrierung

Komponenten für den Zugriff auf Benutzerkonten

Retro Dashboard Anmeldung/Anmeldung

Eine Login- und Registrierungskomponente im Retro-/Vintage-Stil für ein Dashboard mit einem komplexen Layout und einem triadischen Farbschema. Enthält Responsive Design und Unterstützung für den Dunkelmodus mit Tailwind CSS.

Vorschau öffnen

                <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-amber-200 via-red-400 to-rose-600 dark:from-gray-800 dark:via-gray-900 dark:to-black p-6">
  <div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg w-full max-w-md filter drop-shadow-lg transform rotate-2 transition duration-500 hover:rotate-0">
    <div class="mb-8 text-center">
      <h2 class="text-3xl font-bold text-gray-800 dark:text-white font-mono">Dashboard Access</h2>
      <p class="text-gray-600 dark:text-gray-300 mt-2">Enter your credentials to dive in!</p>
    </div>

    <div class="tabs">
      <input type="radio" name="tabs" id="login" checked class="hidden">
      <label for="login" class="tab-label inline-block px-4 py-2 text-gray-700 dark:text-gray-200 font-semibold border-b-2 border-transparent hover:border-rose-500 cursor-pointer transition duration-300">Login</label>

      <input type="radio" name="tabs" id="signup" class="hidden">
      <label for="signup" class="tab-label inline-block px-4 py-2 text-gray-700 dark:text-gray-200 font-semibold border-b-2 border-transparent hover:border-rose-500 cursor-pointer transition duration-300">Sign Up</label>

      <div id="tab-content-login" class="mt-8 tab-content">
        <form>
          <div class="mb-5">
            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Email Address</label>
            <input type="email" id="email" class="form-input w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-rose-500 focus:border-rose-500 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400" placeholder="[email protected]">
          </div>
          <div class="mb-5">
            <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Password</label>
            <input type="password" id="password" class="form-input w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-rose-500 focus:border-rose-500 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400" placeholder="********">
          </div>
          <div class="flex items-center justify-between mb-6">
            <div class="flex items-center">
              <input type="checkbox" id="remember" class="form-checkbox h-4 w-4 text-rose-600 dark:text-rose-400 rounded">
              <label for="remember" class="ml-2 block text-sm text-gray-800 dark:text-gray-200">Remember me</label>
            </div>
            <a href="#" class="text-sm text-rose-600 dark:text-rose-400 hover:underline">Forgot Password?</a>
          </div>
          <button type="submit" class="w-full bg-rose-500 hover:bg-rose-600 text-white font-bold py-2 px-4 rounded-md transition duration-300">Login</button>
        </form>
      </div>

      <div id="tab-content-signup" class="mt-8 tab-content hidden">
        <form>
           <div class="mb-5">
            <label for="new-email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Email Address</label>
            <input type="email" id="new-email" class="form-input w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-rose-500 focus:border-rose-500 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400" placeholder="[email protected]">
          </div>
           <div class="mb-5">
            <label for="new-password" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Password</label>
            <input type="password" id="new-password" class="form-input w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-rose-500 focus:border-rose-500 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400" placeholder="********">
          </div>
           <div class="mb-5">
            <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Confirm Password</label>
            <input type="password" id="confirm-password" class="form-input w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-rose-500 focus:border-rose-500 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400" placeholder="********">
          </div>
          <button type="submit" class="w-full bg-amber-400 hover:bg-amber-500 text-white font-bold py-2 px-4 rounded-md transition duration-300">Sign Up</button>
        </form>
      </div>
    </div>
  </div>
</div>

<style>
  /* Basic tab functionality (can be improved with JS) */
  .tabs input:checked + .tab-label {
    border-color: #f43f5e; /* rose-500 */
  }

  .tabs input:checked ~ .tab-content {
    display: block;
  }

  /* Hide inactive tab content */
  .tab-content {
    display: none;
  }
</style>

Login/Signup-Komponente

Eine reaktionsschnelle Login-/Signup-Komponente, die für den Dunkelmodus mit Tailwind CSS entwickelt wurde.

Vorschau öffnen

                <div class="min-h-screen flex items-center justify-center bg-gray-900 p-6">
    <div class="bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full">
        <h2 class="text-2xl text-white text-center mb-6">Welcome</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="email">Email</label>
                <input class="w-full p-3 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-blue-500" type="email" id="email" placeholder="Enter your email" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="password">Password</label>
                <input class="w-full p-3 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-blue-500" type="password" id="password" placeholder="Enter your password" required>
            </div>
            <button class="w-full bg-blue-600 text-white p-3 rounded hover:bg-blue-500 transition duration-300" type="submit">Login</button>
        </form>
        <div class="text-center text-gray-400 mt-4">
            <p>Don't have an account? <a href="#" class="text-blue-400">Sign up</a></p>
        </div>
    </div>
    <div class="bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full mt-8">
        <h2 class="text-2xl text-white text-center mb-6">Sign Up</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="name">Name</label>
                <input class="w-full p-3 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-blue-500" type="text" id="name" placeholder="Enter your name" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="email-signup">Email</label>
                <input class="w-full p-3 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-blue-500" type="email" id="email-signup" placeholder="Enter your email" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="password-signup">Password</label>
                <input class="w-full p-3 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-blue-500" type="password" id="password-signup" placeholder="Create a password" required>
            </div>
            <button class="w-full bg-blue-600 text-white p-3 rounded hover:bg-blue-500 transition duration-300" type="submit">Sign Up</button>
        </form>
    </div>
</div>

Login/Signup-Komponente

Eine minimalistische Login-/Registrierungskomponente, die mit Tailwind CSS entwickelt wurde, mit responsiven Effekten und Unterstützung für dunkle Themen. Die Komponente bietet eine saubere und einfache Ästhetik und gewährleistet gleichzeitig die Nutzbarkeit auf verschiedenen Geräten.

Vorschau öffnen

                <div class="min-h-screen flex items-center justify-center bg-white dark:bg-gray-900">
  <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center">Welcome Back</h2>
    <p class="text-gray-600 dark:text-gray-400 text-center mb-6">Login to your account</p>
    <form>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
        <input class="block w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" type="email" id="email" placeholder="[email protected]" required />
      </div>
      <div class="mb-6">
        <label class="block text-gray-700 dark:text-gray-300" for="password">Password</label>
        <input class="block w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" type="password" id="password" placeholder="********" required />
      </div>
      <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 rounded-md transition duration-200">Login</button>
    </form>
    <div class="mt-4 text-center">
      <p class="text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a></p>
    </div>
  </div>
</div>

<div class="min-h-screen flex items-center justify-center bg-white dark:bg-gray-900">
  <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full mt-8">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center">Create Account</h2>
    <p class="text-gray-600 dark:text-gray-400 text-center mb-6">Join us today!</p>
    <form>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300" for="name">Name</label>
        <input class="block w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" type="text" id="name" placeholder="John Doe" required />
      </div>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300" for="email-signup">Email</label>
        <input class="block w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" type="email" id="email-signup" placeholder="[email protected]" required />
      </div>
      <div class="mb-6">
        <label class="block text-gray-700 dark:text-gray-300" for="password-signup">Password</label>
        <input class="block w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" type="password" id="password-signup" placeholder="********" required />
      </div>
      <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 rounded-md transition duration-200">Sign Up</button>
    </form>
    <div class="mt-4 text-center">
      <p class="text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="text-blue-500 hover:underline">Login</a></p>
    </div>
  </div>
</div>

Login/Signup-Komponente

Eine minimalistische Login- und Signup-Komponente mit Tailwind CSS, die responsive Effekte und dunkles Theme unterstützt.

Vorschau öffnen

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 w-72">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4 text-center">Login</h2>
    <form>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
        <input class="w-full px-3 py-2 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="email" id="email" placeholder="[email protected]" required>
      </div>
      <div class="mb-6">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
        <input class="w-full px-3 py-2 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="password" id="password" placeholder="••••••••" required>
      </div>
      <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-600 dark:hover:bg-blue-700" type="submit">Login</button>
      <p class="mt-4 text-center text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-500 hover:text-blue-600">Sign up</a></p>
    </form>
  </div>
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 w-72 mt-8">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4 text-center">Sign Up</h2>
    <form>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
        <input class="w-full px-3 py-2 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="name" placeholder="John Doe" required>
      </div>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email-signup">Email</label>
        <input class="w-full px-3 py-2 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="email" id="email-signup" placeholder="[email protected]" required>
      </div>
      <div class="mb-6">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password-signup">Password</label>
        <input class="w-full px-3 py-2 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="password" id="password-signup" placeholder="••••••••" required>
      </div>
      <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-600 dark:hover:bg-blue-700" type="submit">Sign Up</button>
      <p class="mt-4 text-center text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="text-blue-500 hover:text-blue-600">Login</a></p>
    </form>
  </div>
  <div class="hidden">
    <img src="https://picsum.photos/600/400?random=1" alt="Placeholder" class="w-full h-auto">
    <img src="https://picsum.photos/600/400?random=2" alt="Placeholder" class="w-full h-auto">
    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16">
  </div>
</div>

Login/Signup-Komponente

Eine minimalistische und flache Design-Login/Signup-Komponente mit responsiven Effekten und Unterstützung für dunkle Themen, die Tailwind CSS verwendet.

Vorschau öffnen

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full">
        <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200 mb-6">Welcome</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="username">Username</label>
                <input type="text" id="username" class="border border-gray-300 dark:border-gray-700 rounded-lg w-full py-2 px-3 bg-gray-50 dark:bg-gray-700 focus:outline-none focus:ring focus:ring-blue-500" placeholder="Enter your username" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input type="password" id="password" class="border border-gray-300 dark:border-gray-700 rounded-lg w-full py-2 px-3 bg-gray-50 dark:bg-gray-700 focus:outline-none focus:ring focus:ring-blue-500" placeholder="Enter your password" required>
            </div>
            <div class="mb-6">
                <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-lg">Login</button>
            </div>
            <div class="text-center mb-4">
                <span class="text-gray-600 dark:text-gray-400">Or</span>
            </div>
            <div class="mb-6">
                <button type="button" class="w-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-bold py-2 rounded-lg">Signup</button>
            </div>
            <div class="text-center">
                <img class="rounded-full w-16 h-16 mx-auto" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            </div>
            <p class="text-center text-gray-500 dark:text-gray-400 mt-4">Need help? <a href="#" class="text-blue-500 hover:underline">Contact us</a></p>
        </form>
    </div>
</div>
<style>
@media (prefers-color-scheme: dark) {
    input:focus {
        background-color: #4A5568;
    }
    button {
        transition: background-color 0.3s;
    }
}
</style>

Login/Signup-Komponente

Eine reaktionsschnelle Login-/Signup-Komponente, die in einem skeuomorphen Stil mit Tailwind CSS gestaltet wurde, mit Unterstützung für dunkle Themen.

Vorschau öffnen

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
  <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-8 max-w-sm w-full">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Login / Signup</h2>
    <form>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="username">Username</label>
        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-white dark:bg-gray-700 focus:outline-none focus:shadow-outline"
          id="username" type="text" placeholder="Enter your username" required>
      </div>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="email">Email</label>
        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-white dark:bg-gray-700 focus:outline-none focus:shadow-outline"
          id="email" type="email" placeholder="Enter your email" required>
      </div>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="password">Password</label>
        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-white dark:bg-gray-700 focus:outline-none focus:shadow-outline"
          id="password" type="password" placeholder="Enter your password" required>
      </div>
      <div class="flex items-center justify-between mb-4">
        <label class="flex items-center">
          <input type="checkbox" class="form-checkbox h-5 w-5 text-gray-600 dark:text-gray-400">
          <span class="ml-2 text-gray-700 dark:text-gray-300">Remember Me</span>
        </label>
        <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800 dark:text-blue-300" href="#">
          Forgot Password?
        </a>
      </div>
      <div class="flex items-center justify-center">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
          Login / Signup
        </button>
      </div>
    </form>
    <div class="mt-4 text-center">
      <p class="text-gray-600 dark:text-gray-400">or</p>
      <button class="flex items-center justify-center mt-2 border border-gray-300 dark:border-gray-600 rounded-lg py-2 px-4 w-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
        <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-2">
        Sign in with Google
      </button>
    </div>
  </div>
</div>

Login/Registrierung Komponente 12

Eine reaktionsschnelle Login/Signup-Komponente, die im Dunkelmodus entwickelt wurde und Tailwind CSS für das Styling verwendet.

Vorschau öffnen

                <div class="min-h-screen flex items-center justify-center bg-gray-900 p-5">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6 w-full max-w-md">
        <h2 class="text-2xl font-bold text-white text-center">Welcome</h2>
        <p class="text-gray-400 text-center mb-6">Please login or signup to continue</p>
        <div class="mb-4">
            <label class="block text-gray-300 mb-1" for="email">Email</label>
            <input class="w-full bg-gray-700 text-white rounded border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 p-2" type="email" id="email" placeholder="Enter your email" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-300 mb-1" for="password">Password</label>
            <input class="w-full bg-gray-700 text-white rounded border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 p-2" type="password" id="password" placeholder="Enter your password" required />
        </div>
        <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">Login</button>
        <div class="flex items-center justify-between my-4">
            <hr class="w-1/4 border-gray-600">
            <span class="text-gray-400">or</span>
            <hr class="w-1/4 border-gray-600">
        </div>
        <button class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-green-500">Signup</button>
        <p class="text-gray-400 text-center mt-4">Already have an account? <a href="#" class="text-blue-400">Login</a></p>
        <p class="text-gray-400 text-center">Need an account? <a href="#" class="text-green-400">Signup</a></p>
    </div>
</div>