Komponenten Formt Corporate_Banking_Login_Form

Corporate_Banking_Login_Form

Ein minimalistisches und flaches Design-Anmeldeformular, das sich für Finanz- und Bankanwendungen von Unternehmen eignet, mit professionellen Blautönen, vollständiger Reaktionsfähigkeit und Unterstützung des Dunkelmodus.

Vorschau

HTML-Code

<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-6 lg:p-8">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden md:max-w-xl lg:max-w-md">
    <div class="md:flex">
      <div class="w-full p-8">
        <div class="text-center mb-8">
          <h2 class="text-3xl font-extrabold text-blue-800 dark:text-blue-400 mb-2">Welcome Back</h2>
          <p class="text-gray-600 dark:text-gray-400">Sign in to your account</p>
        </div>

        <form class="space-y-6">
          <div>
            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
            <input type="email" id="email" name="email" autocomplete="email" required class="block w-full px-4 py-2 border border-blue-300 dark:border-blue-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 sm:text-sm">
          </div>

          <div>
            <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
            <input type="password" id="password" name="password" autocomplete="current-password" required class="block w-full px-4 py-2 border border-blue-300 dark:border-blue-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 sm:text-sm">
          </div>

          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded dark:border-gray-600 dark:bg-gray-700">
              <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
            </div>

            <div class="text-sm">
              <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Forgot your password?</a>
            </div>
          </div>

          <div>
            <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-150 ease-in-out">
              Sign in
            </button>
          </div>
        </form>

        <div class="mt-6 text-center">
          <p class="text-sm text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Sign up</a></p>
        </div>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

Komponente "Formulare"

Eine komplexe Material Design-Formularkomponente mit einem triadischen Farbschema für ein Dashboard. Es ist reaktionsschnell und unterstützt den Dunkelmodus.

Offen

Minimalistische Formularkomponente

Eine minimalistische Formularkomponente, die auf Portfolios zugeschnitten ist, mit einem pastellfarbenen Farbschema, einfachem Layout, responsivem Design und Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen

Komponente "Brutalistische Formen"

Eine Formularkomponente, die mit einer brutalistischen Ästhetik gestaltet wurde, Pastellfarben verwendet und für Geschäfts-/Unternehmenswebsites geeignet ist. Es verfügt über ein responsives Design mit Unterstützung für dunkle Themen.

Offen