Komponenten Login-Formular Minimalistisches E-Commerce-Anmeldeformular

Minimalistisches E-Commerce-Anmeldeformular

Ein minimalistisches und flaches Design-Anmeldeformular mit Pastellfarben, das für E-Commerce-Websites entwickelt wurde. Es ist einfach, reaktionsschnell und unterstützt den Dunkelmodus mit Tailwind CSS.

Vorschau

HTML-Code

<div
      class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900"
    >
      <div
        class="max-w-md w-full p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md"
      >
        <h2
          class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6"
        >
          Login
        </h2>
        <form>
          <div class="mb-4">
            <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"
              name="email"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
              placeholder="Enter your email"
            />
          </div>
          <div class="mb-6">
            <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"
              name="password"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
              placeholder="Enter your password"
            />
          </div>
          <button
            type="submit"
            class="w-full bg-pastel-blue text-black py-2 px-4 rounded-md hover:bg-pastel-darker-blue focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-200"
          >
            Login
          </button>
        </form>
        <div class="mt-6 text-center">
          <p class="text-sm text-gray-600 dark:text-gray-300">
            Don't have an account? <a href="#" class="text-pastel-blue hover:underline">Sign Up</a>
          </p>
        </div>
      </div>
    </div>

Verwandte Komponenten

Retro-Login-Formular

Eine Anmeldeformularkomponente im Retro-/Vintage-Stil mit responsiven Effekten und Unterstützung für dunkle Themen, die mit Tailwind CSS entworfen wurde.

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

Komponente des Anmeldeformulars

Responsives Anmeldeformular mit Materialdesign, triadischem Farbschema und Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen