CCHub Logo CCHub Tailwind Collection
Komponenten Checkout-Formular Komponente des Checkout-Formulars

Komponente des Checkout-Formulars

Eine einfache, reaktionsschnelle Checkout-Formularkomponente mit Neumorphism-Design, monochromatischem Farbschema, Unterstützung für den Dunkelmodus und Bildplatzhaltern.

Vorschau

HTML-Code 

<div class="min-h-screen bg-gray-100 dark:bg-gray-800 py-6 flex flex-col justify-center sm:py-12">
  <div class="relative py-3 sm:max-w-xl sm:mx-auto">
    <div class="relative px-4 py-10 bg-white dark:bg-gray-700 mx-8 md:mx-0 shadow-lg rounded-lg sm:p-10">
      <div class="max-w-md mx-auto">
        <div class="flex items-center space-x-5">
          <div class="h-14 w-14 bg-gray-200 dark:bg-gray-600 rounded-full flex flex-shrink-0 justify-center items-center text-gray-500 dark:text-gray-400 text-2xl font-mono"></div>
          <div class="block pl-2 font-semibold text-xl self-start text-gray-700 dark:text-gray-200">
            <h2 class="leading-relaxed">Checkout</h2>
          </div>
        </div>
        <div class="divide-y divide-gray-200 dark:divide-gray-600">
          <div class="py-8 text-base leading-6 space-y-4 text-gray-700 dark:text-gray-300 sm:opacity-100 ease-in-out">
            <div class="flex flex-col">
              <label class="leading-loose">Full Name</label>
              <input type="text" class="px-4 py-2 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-gray-400 dark:bg-gray-600 dark:text-white dark:focus:ring-gray-500 dark:focus:border-gray-500" placeholder="John Doe">
            </div>
            <div class="flex flex-col">
              <label class="leading-loose">Card Number</label>
              <input type="text" class="px-4 py-2 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-gray-400 dark:bg-gray-600 dark:text-white dark:focus:ring-gray-500 dark:focus:border-gray-500" placeholder="1234 5678 9012 3456">
            </div>
            <div class="flex items-center space-x-4">
              <div class="flex flex-col">
                <label class="leading-loose">Expiry</label>
                <div class="relative focus-within:text-gray-600 text-gray-400">
                  <input type="text" class="pr-4 pl-10 py-2 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-gray-400 dark:bg-gray-600 dark:text-white dark:focus:ring-gray-500 dark:focus:border-gray-500" placeholder="MM/YY">
                  <div class="absolute left-3 top-1/2 transform -translate-y-1/2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                  </div>
                </div>
              </div>
              <div class="flex flex-col">
                <label class="leading-loose">CVV</label>
                <div class="relative focus-within:text-gray-600 text-gray-400">
                  <input type="text" class="pr-4 pl-10 py-2 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-gray-400 dark:bg-gray-600 dark:text-white dark:focus:ring-gray-500 dark:focus:border-gray-500" placeholder="123">
                  <div class="absolute left-3 top-1/2 transform -translate-y-1/2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a2 2 0 00-2-2H8a2 2 0 00-2 2v3m6 0v-3"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="pt-4 flex items-center space-x-4">
            <button class="flex justify-center items-center w-full text-gray-900 dark:text-gray-100 px-4 py-3 rounded-md focus:outline-none bg-gray-200 dark:bg-gray-600 shadow-md hover:bg-gray-300 dark:hover:bg-gray-700">
              Checkout
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

Komponente des Checkout-Formulars

Eine einfache, reaktionsschnelle Checkout-Formularkomponente mit Glassmorphism-Design, monochromatischem Farbschema und Unterstützung für dunkle Themen, die mit Tailwind CSS erstellt wurde.

Offen

Skeuomorphes monochromatisches komplexes Checkout-Formular

Ein komplexes, responsives skeuomorphes Checkout-Formular mit monochromatischem Design, das für ein Portfolio geeignet ist. Enthält Unterstützung für dunkle Designs mit Tailwind CSS. Verwendet Hintergründe mit Farbverlauf, subtile Schatten und Eingabefelder, die physischen Elementen ähneln.

Offen

Komponente des Checkout-Formulars

Eine komplexe, reaktionsschnelle Checkout-Formularkomponente mit Material Design-Prinzipien, Graustufen-Farbschema und Unterstützung für den Dunkelmodus, implementiert mit Tailwind CSS für Social-Media-Schnittstellen.

Offen