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

Komponente des Checkout-Formulars

Material Design Checkout Form Component mit monochromatischem Farbschema für Portfolio-Zwecke, reaktionsschnell mit Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-6">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="p-6">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Checkout</h2>
      <form>
        <div class="mb-4">
          <label for="name" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Full Name</label>
          <input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="John Doe">
        </div>
        <div class="mb-4">
          <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email</label>
          <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="[email protected]">
        </div>
        <div class="mb-4">
          <label for="address" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Address</label>
          <input type="text" id="address" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="123 Main St">
        </div>
        <div class="mb-4">
          <label for="city" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">City</label>
          <input type="text" id="city" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Anytown">
        </div>
        <div class="mb-4">
          <label for="zip" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Zip Code</label>
          <input type="text" id="zip" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="12345">
        </div>
        <div class="mb-6">
          <label for="card-number" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Card Number</label>
          <input type="text" id="card-number" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="**** **** **** ****">
        </div>
        <div class="flex items-center justify-between">
          <button type="button" class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:hover:bg-gray-600">
            Submit Payment
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

Verwandte Komponenten

Brutalist_Grayscale_Checkout_Form

Eine komplexe, brutalistisch gestaltete Checkout-Formularkomponente mit einem Graustufen-Farbschema, das für die Präsentation von Portfolios optimiert ist. Verfügt über hohen Kontrast, ungewöhnliche Layouts, volle Reaktionsfähigkeit und Unterstützung des Dunkelmodus.

Offen

Neumorphism Checkout-Formular

Neumorphism Checkout Form-Komponente mit analogem Farbschema für eine Portfolio-Website. Es hat ein responsives Design mit Unterstützung für den Dunkelmodus. Es ist kein JavaScript-Code enthalten, sondern nur HTML mit Tailwind-Klassen.

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