CCHub Logo CCHub Tailwind Collection
Komponenten Login-Formular Skeuomorphes Anmeldeformular

Skeuomorphes Anmeldeformular

Eine skeuomorphe Anmeldeformularkomponente mit einem Graustufen-Farbschema und komplexer Komplexität, die für eine Portfolio-Website entwickelt wurde. Es ist reaktionsschnell und unterstützt dunkles Design.

Vorschau

HTML-Code 

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

Verwandte Komponenten

Komponente des Anmeldeformulars

Eine responsive Anmeldeformularkomponente mit skeuomorphem Design, monochromatischem Farbschema und Unterstützung für dunkle Themen, die für Unternehmenswebsites geeignet ist.

Offen

Komponente des Anmeldeformulars

Eine skeuomorphe Login-Formularkomponente mit lebendigen Farben und moderater Komplexität, die für ein Portfolio geeignet ist.

Offen

Komponente des Anmeldeformulars

Eine responsive Login-Formular-Komponente, die nach den Prinzipien des Material Designs entworfen und mit Tailwind CSS gestaltet wurde. Es verfügt über ein Farbschema in Erdtönen und ein einfaches Layout, das für einen Blog oder eine Plattform zum Konsum von Inhalten geeignet ist, mit Unterstützung für dunkle Themen.

Offen