CCHub Logo CCHub Tailwind Collection
Komponenten Login/Registrierung Login/Signup-Komponente

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

HTML-Code 

<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>

Verwandte Komponenten

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.

Offen

Industrial_Candy_Login_Signup_Component

Eine reaktionsschnelle Login-/Registrierungskomponente mit einer industriellen, rohen Ästhetik in Kombination mit leuchtenden Bonbonfarben. Verfügt über freiliegende Elemente, ein nützliches Design und vollständige Unterstützung des Dunkelmodus, geeignet für einen Blog oder eine Content-Plattform.

Offen

Brutalism Login/Signup-Komponente

Eine Login/Signup-Komponente im brutalistischen Stil mit einem triadischen Farbschema, mittlerer Komplexität, responsivem Design und Unterstützung für den Dunkelmodus. Verwendet picsum.photos für Bilder und randomuser.me für Avatare.

Offen