Search Components

Checkout Form

Form for completing purchase process

Checkout Form Component

A clean, minimalist and responsive checkout form component with a Swiss/International Typography design influence, muted color scheme, and dark mode support, suitable for finance and banking interfaces.

Open Preview

                <div class="min-h-screen bg-gray-100 p-4 dark:bg-gray-900 flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white rounded-lg shadow-xl overflow-hidden dark:bg-gray-800 transition-colors duration-300">
    <div class="p-6 md:p-8 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl md:text-3xl font-bold text-gray-800 dark:text-gray-100 tracking-tight leading-tight mb-2">
        <span class="text-blue-600 dark:text-blue-400">Secure</span> Checkout
      </h2>
      <p class="text-gray-600 dark:text-gray-400 text-sm md:text-base">Please fill in your details to complete your secure transaction.</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6 md:p-8">
      <div class="lg:col-span-2 space-y-6">
        <!-- Contact Information -->
        <section>
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Contact Information</h3>
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
              <input type="email" id="email" name="email" placeholder="[email protected]" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
            </div>
            <div>
              <label for="phone" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Phone Number (Optional)</label>
              <input type="tel" id="phone" name="phone" placeholder="+1 (555) 123-4567" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
            </div>
          </div>
        </section>

        <!-- Shipping Address -->
        <section>
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Shipping Address</h3>
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
            <div>
              <label for="first-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">First Name</label>
              <input type="text" id="first-name" name="first-name" placeholder="John" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
            </div>
            <div>
              <label for="last-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Last Name</label>
              <input type="text" id="last-name" name="last-name" placeholder="Doe" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
            </div>
          </div>
          <div class="mb-4">
            <label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Address</label>
            <input type="text" id="address" name="address" placeholder="123 Main St" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div>
              <label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">City</label>
              <input type="text" id="city" name="city" placeholder="Springfield" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
            </div>
            <div>
              <label for="state" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">State / Province</label>
              <input type="text" id="state" name="state" placeholder="IL" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
            </div>
            <div>
              <label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Zip / Postcode</label>
              <input type="text" id="zip" name="zip" placeholder="62704" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
            </div>
          </div>
        </section>

        <!-- Payment Information -->
        <section>
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Payment Information</h3>
          <div class="mb-4">
            <label for="card-number" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Card Number</label>
            <input type="text" id="card-number" name="card-number" placeholder="XXXX XXXX XXXX XXXX" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div>
              <label for="expiration" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Expiration Date</label>
              <input type="text" id="expiration" name="expiration" placeholder="MM/YY" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
            </div>
            <div>
              <label for="cvc" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">CVC</label>
              <input type="text" id="cvc" name="cvc" placeholder="CVC" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
            </div>
            <div class="sm:col-span-1">
              <label for="card-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name on Card</label>
              <input type="text" id="card-name" name="card-name" placeholder="John Doe" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
            </div>
          </div>
        </section>
      </div>

      <!-- Order Summary / Cart Details -->
      <aside class="lg:col-span-1 border-t lg:border-t-0 lg:border-l border-gray-200 dark:border-gray-700 p-6 pt-8 lg:p-6 lg:pt-0">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Order Summary</h3>
        <div class="space-y-4">
          <div class="flex justify-between items-center">
            <div class="flex items-center space-x-3">
              <img src="https://picsum.photos/seed/product1/80/80" alt="Product Image" class="w-16 h-16 rounded-md object-cover border border-gray-200 dark:border-gray-600">
              <div>
                <p class="text-gray-700 dark:text-gray-300 text-sm font-medium">Premium Finance Course</p>
                <p class="text-gray-500 dark:text-gray-400 text-xs">Quantity: 1</p>
              </div>
            </div>
            <span class="text-gray-700 dark:text-gray-300 text-sm font-semibold">$199.00</span>
          </div>
          <div class="flex justify-between items-center">
            <div class="flex items-center space-x-3">
              <img src="https://picsum.photos/seed/product2/80/80" alt="Product Image" class="w-16 h-16 rounded-md object-cover border border-gray-200 dark:border-gray-600">
              <div>
                <p class="text-gray-700 dark:text-gray-300 text-sm font-medium">Financial Planning Toolkit</p>
                <p class="text-gray-500 dark:text-gray-400 text-xs">Quantity: 1</p>
              </div>
            </div>
            <span class="text-gray-700 dark:text-gray-300 text-sm font-semibold">$49.00</span>
          </div>
        </div>

        <div class="mt-6 space-y-2 border-t border-gray-200 dark:border-gray-700 pt-6">
          <div class="flex justify-between text-gray-700 dark:text-gray-300 text-sm">
            <span>Subtotal</span>
            <span>$248.00</span>
          </div>
          <div class="flex justify-between text-gray-700 dark:text-gray-300 text-sm">
            <span>Tax (8%)</span>
            <span>$19.84</span>
          </div>
          <div class="flex justify-between text-gray-700 dark:text-gray-300 text-sm">
            <span>Shipping</span>
            <span>Free</span>
          </div>
          <div class="flex justify-between font-bold text-lg text-gray-800 dark:text-gray-100 pt-2">
            <span>Total</span>
            <span>$267.84</span>
          </div>
        </div>

        <button type="submit" class="mt-8 w-full bg-blue-600 text-white py-3 px-4 rounded-md font-semibold text-base shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors duration-200">
          Complete Purchase
        </button>

        <p class="text-center text-gray-500 dark:text-gray-400 text-xs mt-4">
          Your information is secured with <span class="font-medium text-green-600 dark:text-green-400">256-bit encryption</span>.
        </p>
      </aside>
    </div>
  </div>
</div>

Checkout Form Component

A responsive checkout form with black and white monochrome styling, a bright accent color, gradient transitions, and dark mode support, suitable for sports/fitness applications.

Open Preview

                <div class="min-h-screen bg-gray-50 dark:bg-gray-900 py-12 flex items-center justify-center font-sans tracking-tight">
  <div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden md:flex
              transform transition-all duration-500 ease-in-out
              dark:shadow-2xl dark:shadow-purple-500/20">

    <!-- Left Section: Order Summary (Monochrome) -->
    <div class="md:w-1/2 p-8 md:p-12 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800
                flex flex-col justify-between transition-all duration-500 ease-out">
      <div>
        <h2 class="text-2xl md:text-3xl font-extrabold mb-6 text-gray-900 dark:text-white capitalize leading-tight">
          Your Order Summary
        </h2>
        
        <ul class="space-y-4 mb-8">
          <li class="flex justify-between items-center pb-2 border-b border-gray-300 dark:border-gray-600">
            <span class="text-gray-700 dark:text-gray-300 text-lg">Fitness Membership (1 Month)</span>
            <span class="text-gray-900 dark:text-white font-semibold text-lg">$49.99</span>
          </li>
          <li class="flex justify-between items-center pb-2 border-b border-gray-300 dark:border-gray-600">
            <span class="text-gray-700 dark:text-gray-300 text-lg">Personal Training (3 sessions)</span>
            <span class="text-gray-900 dark:text-white font-semibold text-lg">$149.00</span>
          </li>
          <li class="flex justify-between items-center pb-2 border-b border-gray-300 dark:border-gray-600">
            <span class="text-gray-700 dark:text-gray-300 text-lg">Sports Drink Bundle</span>
            <span class="text-gray-900 dark:text-white font-semibold text-lg">$19.50</span>
          </li>
        </ul>

        <div class="flex justify-between items-center pt-4 border-t-2 border-gray-400 dark:border-gray-500">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-200">Total</span>
          <span class="text-2xl font-extrabold text-array-900 dark:text-white">$218.49</span>
        </div>

        <p class="text-sm text-gray-500 dark:text-gray-400 mt-4 leading-relaxed">
          By completing your purchase, you agree to our <a href="#" class="text-gray-700 dark:text-gray-300 hover:underline">terms and conditions</a> and <a href="#" class="text-gray-700 dark:text-gray-300 hover:underline">privacy policy</a>.
        </p>
      </div>
    </div>

    <!-- Right Section: Payment Form (Accent) -->
    <div class="md:w-1/2 p-8 md:p-12 bg-gradient-to-tr from-purple-500 to-fuchsia-600 dark:from-purple-600 dark:to-fuchsia-700
                relative transition-all duration-500 ease-out flex flex-col justify-center">
      
      <!-- Floating Icons -->
      <div class="absolute top-4 right-4 flex space-x-2">
        <img src="https://picsum.photos/40/40?random=1" alt="Visa" class="h-8 w-8 rounded-full shadow-md transition-all duration-300 hover:scale-110" />
        <img src="https://picsum.photos/40/40?random=2" alt="Mastercard" class="h-8 w-8 rounded-full shadow-md transition-all duration-300 hover:scale-110" />
        <img src="https://picsum.photos/40/40?random=3" alt="Amex" class="h-8 w-8 rounded-full shadow-md transition-all duration-300 hover:scale-110" />
      </div>

      <h2 class="text-2xl md:text-3xl font-extrabold mb-6 text-white capitalize leading-tight">
        Payment Information
      </h2>

      <form class="space-y-6">
        <div>
          <label for="card-number" class="block text-sm font-semibold text-white mb-2">Card Number</label>
          <input type="text" id="card-number" placeholder="XXXX XXXX XXXX XXXX" class="w-full px-4 py-3 rounded-xl bg-white/20 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white focus:bg-white/30 transition-all duration-300 ease-in-out dark:bg-purple-800/30 dark:focus:ring-fuchsia-300" pattern="[0-9]{13,16}" required>
        </div>
        
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label for="expiry-date" class="block text-sm font-semibold text-white mb-2">Expiry Date</label>
            <input type="text" id="expiry-date" placeholder="MM/YY" class="w-full px-4 py-3 rounded-xl bg-white/20 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white focus:bg-white/30 transition-all duration-300 ease-in-out dark:bg-purple-800/30 dark:focus:ring-fuchsia-300" pattern="(0[1-9]|1[0-2])\/([0-9]{2})" required>
          </div>
          <div>
            <label for="cvv" class="block text-sm font-semibold text-white mb-2">CVV</label>
            <input type="text" id="cvv" placeholder="XXX" class="w-full px-4 py-3 rounded-xl bg-white/20 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white focus:bg-white/30 transition-all duration-300 ease-in-out dark:bg-purple-800/30 dark:focus:ring-fuchsia-300" pattern="[0-9]{3,4}" required>
          </div>
        </div>

        <div>
          <label for="card-name" class="block text-sm font-semibold text-white mb-2">Name on Card</label>
          <input type="text" id="card-name" placeholder="John Doe" class="w-full px-4 py-3 rounded-xl bg-white/20 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white focus:bg-white/30 transition-all duration-300 ease-in-out dark:bg-purple-800/30 dark:focus:ring-fuchsia-300" required>
        </div>

        <button type="submit" class="mt-8 w-full py-3 px-6 rounded-xl
                                 bg-white text-purple-600 font-bold text-lg
                                 hover:bg-gray-100 hover:scale-105
                                 focus:outline-none focus:ring-4 focus:ring-white/50
                                 transition-all duration-300 ease-in-out
                                 dark:bg-fuchsia-300 dark:text-purple-900 dark:hover:bg-fuchsia-200 dark:hover:scale-105 dark:focus:ring-fuchsia-400/50">
          Complete Payment
        </button>
      </form>
    </div>

  </div>
</div>

Neon_Sepia_Checkout_Form

A simple, responsive checkout form component with neon/glow effects and sepia/brown color scheme, designed for cryptocurrency/blockchain applications. Includes dark mode support.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-stone-950 via-neutral-900 to-stone-950 p-4 sm:p-6 lg:p-8 flex items-center justify-center font-sans dark:from-black dark:via-gray-950 dark:to-black">
  <div class="w-full max-w-md bg-stone-900 rounded-lg shadow-xl border border-stone-800 dark:bg-gray-900 dark:border-gray-800 relative overflow-hidden">
    <div class="absolute inset-0 bg-amber-800/10 dark:bg-lime-500/10 transform scale-[3] blur-3xl opacity-20 dark:opacity-10 pointer-events-none animate-pulse-slow"></div>
    <div class="relative p-6 sm:p-8">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-amber-500 dark:text-lime-400 mb-6 text-center tracking-wide" style="text-shadow: 0 0 8px rgba(217, 119, 6, 0.6), 0 0 16px rgba(217, 119, 6, 0.4); dark:text-shadow: 0 0 8px rgba(132, 204, 22, 0.6), 0 0 16px rgba(132, 204, 22, 0.4);">
        Checkout
      </h2>

      <form class="space-y-4">
        <div>
          <label for="wallet-address" class="block text-sm font-medium text-amber-200 dark:text-lime-200 mb-1 leading-relaxed">
            Wallet Address
          </label>
          <input type="text" id="wallet-address" name="wallet-address" placeholder="0x..." class="w-full p-3 bg-stone-800 rounded-md border border-stone-700 focus:outline-none focus:ring-2 focus:ring-amber-600 dark:bg-gray-800 dark:border-gray-700 dark:focus:ring-lime-500 text-amber-100 dark:text-lime-100 placeholder-stone-400 dark:placeholder-gray-500 transition duration-300 ease-in-out glow-input">
        </div>

        <div>
          <label for="amount" class="block text-sm font-medium text-amber-200 dark:text-lime-200 mb-1 leading-relaxed">
            Amount (ETH)
          </label>
          <input type="number" id="amount" name="amount" step="0.001" placeholder="0.05" class="w-full p-3 bg-stone-800 rounded-md border border-stone-700 focus:outline-none focus:ring-2 focus:ring-amber-600 dark:bg-gray-800 dark:border-gray-700 dark:focus:ring-lime-500 text-amber-100 dark:text-lime-100 placeholder-stone-400 dark:placeholder-gray-500 transition duration-300 ease-in-out glow-input">
        </div>

        <!-- Hidden input for a minimal simple form -->
        <input type="hidden" name="currency" value="ETH">

        <button type="submit" class="w-full py-3 px-4 bg-amber-700 text-white font-semibold rounded-md shadow-lg
          hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-900
          dark:bg-lime-600 dark:hover:bg-lime-500 dark:focus:ring-lime-400 dark:focus:ring-offset-gray-900
          transition duration-300 ease-in-out transform hover:scale-105 active:scale-100 glow-button">
          Confirm Payment
        </button>
      </form>

      <p class="text-center text-xs text-stone-500 dark:text-gray-500 mt-6">
        By clicking 'Confirm Payment', you agree to our <a href="#" class="text-amber-400 hover:underline dark:text-lime-300">Terms of Service</a>.
      </p>
    </div>
  </div>

  <style>
    @keyframes pulse-slow {
      0%, 100% { transform: scale(3) blur(3rem) opacity(0.2); }
      50% { transform: scale(3.1) blur(3.5rem) opacity(0.25); }
    }
    .animate-pulse-slow { animation: pulse-slow 8s infinite ease-in-out; }
    .glow-input { box-shadow: 0 0 0px #d97706; transition: box-shadow 0.3s ease-in-out; }
    .glow-input:focus { box-shadow: 0 0 10px rgba(217, 119, 6, 0.7); }
    .dark .glow-input { box-shadow: none; }
    .dark .glow-input:focus { box-shadow: 0 0 10px rgba(132, 204, 22, 0.7); }
    .glow-button { box-shadow: 0 0 0px #d97706; transition: box-shadow 0.3s ease-in-out; }
    .glow-button:hover { box-shadow: 0 0 15px rgba(217, 119, 6, 0.8); }
    .dark .glow-button { box-shadow: none; }
    .dark .glow-button:hover { box-shadow: 0 0 1px rgba(132, 204, 22, 0.8); }
  </style>
</div>

Checkout Form Component

A complex, paper/print-inspired checkout form component with jewel tones, designed for documentation/wiki sites, featuring full responsiveness and dark mode support.

Open Preview

                <div class="bg-gradient-to-br from-emerald-50 to-teal-100 p-4 sm:p-6 md:p-8 min-h-screen dark:from-slate-900 dark:to-emerald-950">

  <!-- Paper Container -->
  <div class="max-w-4xl mx-auto bg-white rounded-lg shadow-xl overflow-hidden md:flex md:before:content-[''] md:before:absolute md:before:inset-0 md:before:bg-[url('https://www.transparenttextures.com/patterns/paper-fibers.png')] dark:bg-slate-800 dark:shadow-2xl dark:shadow-emerald-900 border border-t-8 border-gem-blue-500 relative dark:border-gem-blue-700">

    <!-- Left Fold / Navigation -->
    <div class="md:w-1/3 p-6 bg-gem-navy-800 text-gem-gold-100 flex flex-col justify-between dark:bg-gem-navy-900 border-r border-gem-navy-700">
      <div>
        <h2 class="text-2xl font-serif mb-4 text-gem-gold-200">Order Summary</h2>
        <ul class="space-y-3 text-sm">
          <li class="flex justify-between items-center">
            <span>Product Name One</span>
            <span>$19.99</span>
          </li>
          <li class="flex justify-between items-center">
            <span>Product Name Two</span>
            <span>$29.99</span>
          </li>
          <li class="flex justify-between items-center">
            <span>Shipping</span>
            <span>$5.00</span>
          </li>
          <li class="flex justify-between items-center font-bold border-t border-gem-navy-700 pt-3 mt-3">
            <span>Total</span>
            <span>$54.98</span>
          </li>
        </ul>

        <div class="mt-8">
          <h3 class="text-lg font-serif mb-3 text-gem-gold-200">Order Progress</h3>
          <div class="space-y-4">
            <div class="flex items-center">
              <div class="w-8 h-8 rounded-full bg-gem-emerald-500 flex items-center justify-center text-gem-navy-900 font-bold text-sm mr-3 dark:bg-gem-emerald-600">1</div>
              <span class="text-gem-gold-500">Personal Details</span>
            </div>
            <div class="flex items-center">
              <div class="w-8 h-8 rounded-full bg-gem-sapphire-500 flex items-center justify-center text-gem-navy-900 font-bold text-sm mr-3 dark:bg-gem-sapphire-600">2</div>
              <span class="text-gem-gold-500">Shipping Address</span>
            </div>
            <div class="flex items-center">
              <div class="w-8 h-8 rounded-full bg-gem-ruby-500 flex items-center justify-center text-gem-navy-900 font-bold text-sm mr-3 dark:bg-gem-ruby-600">3</div>
              <span class="text-gem-gold-500">Payment Information</span>
            </div>
            <div class="flex items-center opacity-60">
              <div class="w-8 h-8 rounded-full bg-gray-500 flex items-center justify-center text-gray-900 font-bold text-sm mr-3">4</div>
              <span>Review & Confirm</span>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-8 pt-6 border-t border-gem-navy-700 text-xs text-gem-gold-300">
        <p>&copy; 2023 Acme Corp. All rights reserved.</p>
        <p class="mt-1">Documentation & Support</p>
      </div>
    </div>

    <!-- Right Page / Form Content -->
    <div class="md:w-2/3 p-6 sm:p-8 bg-gem-gold-50 dark:bg-slate-850 dark:text-gray-200 relative">
      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/paper-fibers.png')] opacity-[0.03] dark:opacity-5"></div>
      <div class="relative z-10">
        <h1 class="text-3xl sm:text-4xl font-serif text-gem-ruby-700 mb-6 dark:text-gem-ruby-400">Checkout Details</h1>

        <form class="space-y-6">
          <!-- Personal Details -->
          <fieldset>
            <legend class="text-xl font-serif text-gem-emerald-700 mb-4 pb-2 border-b border-gem-emerald-200 dark:text-gem-emerald-400 dark:border-gem-emerald-700">1. Personal Details</legend>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div>
                <label for="first_name" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">First Name</label>
                <input type="text" id="first_name" name="first_name" autocomplete="given-name" class="w-full p-3 border border-gem-sapphire-300 rounded-md focus:ring-2 focus:ring-gem-sapphire-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-sapphire-600 dark:text-gray-100 dark:focus:ring-gem-sapphire-400 placeholder-gem-sapphire-400" placeholder="John">
              </div>
              <div>
                <label for="last_name" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">Last Name</label>
                <input type="text" id="last_name" name="last_name" autocomplete="family-name" class="w-full p-3 border border-gem-sapphire-300 rounded-md focus:ring-2 focus:ring-gem-sapphire-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-sapphire-600 dark:text-gray-100 dark:focus:ring-gem-sapphire-400" placeholder="Doe">
              </div>
              <div class="sm:col-span-2">
                <label for="email" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">Email Address</label>
                <input type="email" id="email" name="email" autocomplete="email" class="w-full p-3 border border-gem-sapphire-300 rounded-md focus:ring-2 focus:ring-gem-sapphire-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-sapphire-600 dark:text-gray-100 dark:focus:ring-gem-sapphire-400" placeholder="[email protected]">
              </div>
            </div>
          </fieldset>

          <!-- Shipping Address -->
          <fieldset>
            <legend class="text-xl font-serif text-gem-sapphire-700 mb-4 pb-2 border-b border-gem-sapphire-200 dark:text-gem-sapphire-400 dark:border-gem-sapphire-700">2. Shipping Address</legend>
            <div class="grid grid-cols-1 gap-4">
              <div>
                <label for="address_line1" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">Address Line 1</label>
                <input type="text" id="address_line1" name="address_line1" autocomplete="address-line1" class="w-full p-3 border border-gem-ruby-300 rounded-md focus:ring-2 focus:ring-gem-ruby-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-ruby-600 dark:text-gray-100 dark:focus:ring-gem-ruby-400" placeholder="123 Main St">
              </div>
              <div>
                <label for="address_line2" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">Address Line 2 (Optional)</label>
                <input type="text" id="address_line2" name="address_line2" autocomplete="address-line2" class="w-full p-3 border border-gem-ruby-300 rounded-md focus:ring-2 focus:ring-gem-ruby-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-ruby-600 dark:text-gray-100 dark:focus:ring-gem-ruby-400" placeholder="Apt, Suite, Etc.">
              </div>
              <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div>
                  <label for="city" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">City</label>
                  <input type="text" id="city" name="city" autocomplete="address-level2" class="w-full p-3 border border-gem-ruby-300 rounded-md focus:ring-2 focus:ring-gem-ruby-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-ruby-600 dark:text-gray-100 dark:focus:ring-gem-ruby-400" placeholder="Anytown">
                </div>
                <div>
                  <label for="state" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">State / Province</label>
                  <input type="text" id="state" name="state" autocomplete="address-level1" class="w-full p-3 border border-gem-ruby-300 rounded-md focus:ring-2 focus:ring-gem-ruby-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-ruby-600 dark:text-gray-100 dark:focus:ring-gem-ruby-400" placeholder="CA">
                </div>
                <div>
                  <label for="zip" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">ZIP / Postal Code</label>
                  <input type="text" id="zip" name="zip" autocomplete="postal-code" class="w-full p-3 border border-gem-ruby-300 rounded-md focus:ring-2 focus:ring-gem-ruby-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-ruby-600 dark:text-gray-100 dark:focus:ring-gem-ruby-400" placeholder="90210">
                </div>
              </div>
             <div>
                <label for="country" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">Country</label>
                <select id="country" name="country" autocomplete="country-name" class="w-full p-3 border border-gem-ruby-300 rounded-md focus:ring-2 focus:ring-gem-ruby-500 focus:border-transparent appearance-none bg-no-repeat bg-right-center pr-10 dark:bg-slate-700 dark:border-gem-ruby-600 dark:text-gray-100 dark:focus:ring-gem-ruby-400" style="background-image: url(&#x27;data:image/svg+xml;utf8,<svg fill=&#x22;%234F46E5&#x22; viewBox=&#x22;0 0 20 20&#x22; xmlns=&#x22;http://www.w3.org/2000/svg&#x22;%3E%3Cpath fill-rule=&#x22;evenodd&#x22; d=&#x22;M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z&#x22; clip-rule=&#x22;evenodd&#x22;/%3E%3C/svg%3E&#x27;); background-size: 1.5rem;">
                  <option value="">Select Country</option>
                  <option value="US">United States</option>
                  <option value="CA">Canada</option>
                  <option value="GB">United Kingdom</option>
                </select>
             </div>
            </div>
          </fieldset>

          <!-- Payment Information -->
          <fieldset>
            <legend class="text-xl font-serif text-gem-ruby-700 mb-4 pb-2 border-b border-gem-ruby-200 dark:text-gem-ruby-400 dark:border-gem-ruby-700">3. Payment Information</legend>
            <div class="grid grid-cols-1 gap-4">
              <div>
                <label for="card_number" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">Card Number</label>
                <input type="text" id="card_number" name="card_number" autocomplete="cc-number" placeholder="XXXX XXXX XXXX XXXX" class="w-full p-3 border border-gem-emerald-300 rounded-md focus:ring-2 focus:ring-gem-emerald-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-emerald-600 dark:text-gray-100 dark:focus:ring-gem-emerald-400">
              </div>
              <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div class="sm:col-span-2">
                  <label for="expiry_date" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">Expiry Date (MM/YY)</label>
                  <input type="text" id="expiry_date" name="expiry_date" autocomplete="cc-exp" placeholder="MM/YY" class="w-full p-3 border border-gem-emerald-300 rounded-md focus:ring-2 focus:ring-gem-emerald-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-emerald-600 dark:text-gray-100 dark:focus:ring-gem-emerald-400">
                </div>
                <div>
                  <label for="cvv" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">CVV</label>
                  <input type="text" id="cvv" name="cvv" autocomplete="cc-csc" placeholder="123" class="w-full p-3 border border-gem-emerald-300 rounded-md focus:ring-2 focus:ring-gem-emerald-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-emerald-600 dark:text-gray-100 dark:focus:ring-gem-emerald-400">
                </div>
              </div>
            </div>
          </fieldset>

          <div class="flex justify-end pt-4">
            <button type="submit" class="bg-gem-ruby-600 text-gem-gold-50 py-3 px-8 rounded-full font-bold shadow-lg hover:bg-gem-ruby-700 focus:outline-none focus:ring-4 focus:ring-gem-ruby-300 transition duration-300 ease-in-out dark:bg-gem-ruby-700 dark:hover:bg-gem-ruby-800 dark:focus:ring-gem-ruby-500">
              Complete Order
            </button>
          </div>
        </form>

      </div>
    </div>

  </div>

  <!-- Custom Colors for Jewel Tones (define in your tailwind.config.js) -->
  <style>
    .text-gem-gold-100 { color: #fdf5e6; }
    .text-gem-gold-200 { color: #fcf1d8; }
    .text-gem-gold-300 { color: #f7e0b5; }
    .text-gem-gold-50 { color: #fffefb; /* Nearly white for contrast */ }
    .bg-gem-gold-50 { background-color: #fffefb; /* Nearly white for contrast */ }
    .text-gem-emerald-700 { color: #065F46; }
    .bg-gem-emerald-500 { background-color: #10B981; }
    .border-gem-emerald-200 { border-color: #A7F3D0; }
    .border-gem-emerald-300 { border-color: #6EE7B7; }
    .focus-ring-gem-emerald-500 { --tw-ring-color: #10B981; }
    .dark\:text-gem-emerald-400 { color: #4ade80; }
    .dark\:border-gem-emerald-600 { border-color: #059669; }
    .dark\:focus\:ring-gem-emerald-400 { --tw-ring-color: #4ade80; }
    .dark\:bg-gem-emerald-600 { background-color: #059669; }
    .dark\:border-gem-emerald-700 { border-color: #047857; }

    .text-gem-sapphire-700 { color: #1e3a8a; }
    .bg-gem-sapphire-500 { background-color: #3B82F6; }
    .border-gem-sapphire-200 { border-color: #BFDBFE; }
    .border-gem-sapphire-300 { border-color: #93C5FD; }
    .focus-ring-gem-sapphire-500 { --tw-ring-color: #3B82F6; }
    .dark\:text-gem-sapphire-400 { color: #60a5fa; }
    .dark\:border-gem-sapphire-600 { border-color: #2563eb; }
    .dark\:focus\:ring-gem-sapphire-400 { --tw-ring-color: #60a5fa; }
    .dark\:bg-gem-sapphire-600 { background-color: #2563eb; }
    .dark\:border-gem-sapphire-700 { border-color: #1d4ed8; }

    .text-gem-ruby-700 { color: #991B1B; }
    .bg-gem-ruby-500 { background-color: #EF4444; }
    .bg-gem-ruby-600 { background-color: #DC2626; }
    .hover\:bg-gem-ruby-700:hover { background-color: #B91C1C; }
    .border-gem-ruby-200 { border-color: #FECACA; }
    .border-gem-ruby-300 { border-color: #FCA5A5; }
    .focus-ring-gem-ruby-300 { --tw-ring-color: #FECACA; }
    .focus-ring-gem-ruby-500 { --tw-ring-color: #EF4444; }
    .dark\:text-gem-ruby-400 { color: #F87171; }
    .dark\:border-gem-ruby-600 { border-color: #DC2626; }
    .dark\:focus\:ring-gem-ruby-400 { --tw-ring-color: #F87171; }
    .dark\:bg-gem-ruby-700 { background-color: #B91C1C; }
    .dark\:hover\:bg-gem-ruby-800:hover { background-color: #991B1B; }
    .dark\:focus\:ring-gem-ruby-500 { --tw-ring-color: #EF4444;}

    .bg-gem-navy-800 { background-color: #1E293B; }
    .dark\:bg-gem-navy-900 { background-color: #0F172A; }
    .border-gem-navy-700 { border-color: #334155; }
    .border-gem-blue-500 { border-color: #3B82F6; }
    .dark\:border-gem-blue-700 { border-color: #1D4ED8; }
  </style>
</div>

Brutalist_Grayscale_Checkout_Form

A complex, brutalist-style checkout form component with a grayscale color scheme, optimized for portfolio showcasing. Features high contrast, unusual layouts, full responsiveness, and dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-8 font-mono">
  <div class="max-w-6xl mx-auto border-4 border-black dark:border-white shadow-xl dark:shadow-[0_0_20px_rgba(255,255,255,0.2)] bg-white dark:bg-gray-800">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-0">
      <!-- Left Column: Order Summary / Image -->
      <div class="relative col-span-1 border-b-4 md:border-b-0 md:border-r-4 border-black dark:border-white p-6 md:p-8 bg-gray-200 dark:bg-gray-700 overflow-hidden group">
        <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 opacity-50"></div>
        <img src="https://picsum.photos/seed/brutalism/600/800" alt="Abstract Brutalist Structure" class="absolute inset-0 w-full h-full object-cover opacity-60 mix-blend-multiply group-hover:scale-105 transition-transform duration-500 ease-in-out">
        <div class="relative z-10">
          <h2 class="text-4xl sm:text-5xl font-extrabold mb-8 uppercase leading-none border-b-4 border-black dark:border-white pb-3 sm:pb-5">
            <span class="block">Your</span>
            <span class="block">Order</span>
            <span class="block">Summary</span>
          </h2>

          <div class="space-y-6 mb-8">
            <div class="flex justify-between items-start border-b border-gray-600 dark:border-gray-400 pb-3">
              <div class="flex flex-col">
                <span class="font-bold text-lg">Product X-1</span>
                <span class="text-sm text-gray-700 dark:text-gray-300">SKU: BRUX-001</span>
              </div>
              <span class="font-bold text-lg">$199.00</span>
            </div>
            <div class="flex justify-between items-start border-b border-gray-600 dark:border-gray-400 pb-3">
              <div class="flex flex-col">
                <span class="font-bold text-lg">Design Service</span>
                <span class="text-sm text-gray-700 dark:text-gray-300">Consultation Fee</span>
              </div>
              <span class="font-bold text-lg">$50.00</span>
            </div>
            <div class="flex justify-between items-start border-b border-gray-600 dark:border-gray-400 pb-3">
              <div class="flex flex-col">
                <span class="font-bold text-lg">Material Pack Beta</span>
                <span class="text-sm text-gray-700 dark:text-gray-300">Edition M-23</span>
              </div>
              <span class="font-bold text-lg">$75.00</span>
            </div>
          </div>

          <div class="border-t-4 border-r-4 border-black dark:border-white pt-4 md:pt-6">
            <div class="flex justify-between items-center mb-2">
              <span class="text-lg uppercase text-gray-700 dark:text-gray-300">Subtotal</span>
              <span class="text-lg font-bold">$324.00</span>
            </div>
            <div class="flex justify-between items-center mb-2">
              <span class="text-lg uppercase text-gray-700 dark:text-gray-300">Shipping</span>
              <span class="text-lg font-bold">$15.00</span>
            </div>
            <div class="flex justify-between items-center mb-6">
              <span class="text-lg uppercase text-gray-700 dark:text-gray-300">Tax (8%)</span>
              <span class="text-lg font-bold">$25.92</span>
            </div>
            <div class="flex justify-between items-center border-t-4 border-black dark:border-white pt-4">
              <span class="text-3xl font-extrabold uppercase">Total</span>
              <span class="text-3xl font-extrabold">$364.92</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Right Column: Form -->
      <div class="col-span-1 md:col-span-2 p-6 md:p-8">
        <h1 class="text-4xl sm:text-5xl font-extrabold mb-8 uppercase leading-none border-b-4 border-b-black dark:border-b-white pb-3 sm:pb-5">
          <span class="block">Complete</span>
          <span class="block">Your</span>
          <span class="block">Purchase</span>
        </h1>

        <form class="space-y-8">
          <!-- Contact Information -->
          <div>
            <h3 class="text-2xl font-bold uppercase mb-4 border-b-2 border-black dark:border-white pb-2">Contact Info</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
              <div>
                <label for="email" class="block text-sm font-bold uppercase mb-2">Email Address</label>
                <input type="email" id="email" name="email" placeholder="[email protected]" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
              </div>
              <div>
                <label for="phone" class="block text-sm font-bold uppercase mb-2">Phone Number <span class="text-gray-600 dark:text-gray-400 text-xs">(Optional)</span></label>
                <input type="tel" id="phone" name="phone" placeholder="+1 (555) 123-4567" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
              </div>
            </div>
          </div>

          <!-- Shipping Address -->
          <div>
            <h3 class="text-2xl font-bold uppercase mb-4 border-b-2 border-black dark:border-white pb-2">Shipping Address</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-6">
              <div>
                <label for="first_name" class="block text-sm font-bold uppercase mb-2">First Name</label>
                <input type="text" id="first_name" name="first_name" placeholder="John" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
              </div>
              <div>
                <label for="last_name" class="block text-sm font-bold uppercase mb-2">Last Name</label>
                <input type="text" id="last_name" name="last_name" placeholder="Doe" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
              </div>
            </div>
            <div class="mb-6">
              <label for="address1" class="block text-sm font-bold uppercase mb-2">Address Line 1</label>
              <input type="text" id="address1" name="address1" placeholder="123 Brutalist Blvd" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
            </div>
            <div class="mb-6">
              <label for="address2" class="block text-sm font-bold uppercase mb-2">Address Line 2 <span class="text-gray-600 dark:text-gray-400 text-xs">(Apt, Suite, Etc.)</span></label>
              <input type="text" id="address2" name="address2" placeholder="Apt 4B" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
              <div>
                <label for="city" class="block text-sm font-bold uppercase mb-2">City</label>
                <input type="text" id="city" name="city" placeholder="Metropolis" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
              </div>
              <div>
                <label for="state" class="block text-sm font-bold uppercase mb-2">State / Province</label>
                <input type="text" id="state" name="state" placeholder="NY" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
              </div>
              <div>
                <label for="zip" class="block text-sm font-bold uppercase mb-2">Zip / Postal Code</label>
                <input type="text" id="zip" name="zip" placeholder="10001" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
              </div>
            </div>
          </div>

          <!-- Payment Information -->
          <div>
            <h3 class="text-2xl font-bold uppercase mb-4 border-b-2 border-black dark:border-white pb-2">Payment Info</h3>
            <div class="mb-6">
              <label for="card_number" class="block text-sm font-bold uppercase mb-2">Card Number</label>
              <input type="text" id="card_number" name="card_number" placeholder="•••• •••• •••• ••••" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
              <div>
                <label for="expiry_date" class="block text-sm font-bold uppercase mb-2">Expiry Date</label>
                <input type="text" id="expiry_date" name="expiry_date" placeholder="MM/YY" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
              </div>
              <div>
                <label for="cvv" class="block text-sm font-bold uppercase mb-2">CVV</label>
                <input type="text" id="cvv" name="cvv" placeholder="123" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
              </div>
              <div class="hidden sm:block"></div>
            </div>
          </div>

          <!-- Billing Address Checkbox -->
          <div class="flex items-center mt-8 -ml-1">
            <input type="checkbox" id="same_as_shipping" name="same_as_shipping" checked class="w-6 h-6 checked:bg-black dark:checked:bg-white checked:border-black dark:checked:border-white border-2 border-black dark:border-white focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 appearance-none inline-block align-middle relative after:content-[''] after:inline-block after:w-[calc(100%-4px)] after:h-[calc(100%-4px)] after:left-[2px] after:top-[2px] after:absolute after:bg-gray-900 dark:after:bg-gray-100 transition-colors duration-200">
            <label for="same_as_shipping" class="ml-3 text-lg font-bold uppercase cursor-pointer">Billing address same as shipping</label>
          </div>

          <!-- Submit Button -->
          <button type="submit" class="w-full bg-black dark:bg-white text-white dark:text-black text-2xl font-extrabold uppercase py-5 mt-10 border-4 border-black dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 hover:text-white dark:hover:text-black transition-colors duration-300 transform active:scale-98 focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 relative group overflow-hidden">
            <span class="relative z-10">PROCESS PAYMENT</span>
            <span class="absolute inset-0 bg-gray-500 dark:bg-gray-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></span>
          </button>

          <p class="text-center text-sm text-gray-600 dark:text-gray-400 pt-4">
            By clicking 'PROCESS PAYMENT', you agree to our <a href="#" class="underline font-bold hover:text-gray-800 dark:hover:text-gray-200">terms and conditions</a>.
          </p>
        </form>

        <div class="mt-12 pt-8 border-t-2 border-black dark:border-white text-center">
          <p class="text-xl font-bold uppercase mb-4">Secured by:</p>
          <div class="flex justify-center items-center space-x-6">
            <img src="https://picsum.photos/seed/security1/80/40" alt="Security Badge 1" class="h-10 w-auto filter grayscale opacity-80 hover:opacity-100 transition-opacity duration-300">
            <img src="https://picsum.photos/seed/security2/80/40" alt="Security Badge 2" class="h-10 w-auto filter grayscale opacity-80 hover:opacity-100 transition-opacity duration-300">
            <img src="https://picsum.photos/seed/security3/80/40" alt="Security Badge 3" class="h-10 w-auto filter grayscale opacity-80 hover:opacity-100 transition-opacity duration-300">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Checkout Form Component - Healthcare/Medical

A complex, responsive checkout form component with a soft, artistic watercolor design theme, warm neutral color scheme, and dark mode support, suitable for healthcare and medical applications.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gradient-to-br from-rose-50 to-orange-50 dark:from-gray-900 dark:to-gray-800 font-sans">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden relative">
    <!-- Artistic Overlay -->
    <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10 pointer-events-none" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1000 1000\'><filter id=\'blur\'><feGaussianBlur in=\'SourceGraphic\' stdDeviation=\'50\'/></filter><rect fill=\'rgb(240,240,240)\' width=\'100%\' height=\'100%\'/><path fill=\'rgb(230,220,210)\' d=\'M0,500 C150,700 300,300 500,450 C700,600 850,200 1000,400 L1000,0 L0,0 Z\' filter=\'url(%23blur)\' opacity=\'0.5\'/><path fill=\'rgb(245,235,225)\' d=\'M0,300 C100,200 200,400 350,300 C500,200 600,500 750,400 C900,300 1000,500 1000,500 L1000,0 L0,0 Z\' filter=\'url(%23blur)\' opacity=\'0.7\'/></svg>'); background-size: cover;"></div>

    <div class="relative z-10 p-6 sm:p-10 lg:p-12">
      <header class="mb-8 text-center">
        <h1 class="text-3xl sm:text-4xl font-extrabold text-gray-800 dark:text-orange-100 mb-2 leading-tight tracking-tight drop-shadow-sm">Complete Your Order</h1>
        <p class="text-lg text-gray-600 dark:text-gray-300">Secure and confidential checkout for your healthcare needs.</p>
      </header>

      <form class="grid grid-cols-1 lg:grid-cols-2 gap-x-10 gap-y-8">

        <!-- Shipping Information -->
        <section class="bg-gray-50 dark:bg-gray-700 rounded-2xl p-6 shadow-inner">
          <h2 class="text-2xl font-bold text-gray-700 dark:text-orange-200 mb-6 pb-2 border-b border-gray-200 dark:border-gray-600">Shipping Information</h2>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label for="first-name" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">First Name</label>
              <input type="text" id="first-name" name="first-name" autocomplete="given-name" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="Jane">
            </div>
            <div>
              <label for="last-name" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Last Name</label>
              <input type="text" id="last-name" name="last-name" autocomplete="family-name" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="Doe">
            </div>
            <div class="md:col-span-2">
              <label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Address</label>
              <input type="text" id="address" name="address" autocomplete="street-address" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="123 Main St">
            </div>
            <div>
              <label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">City</label>
              <input type="text" id="city" name="city" autocomplete="address-level2" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="Anytown">
            </div>
            <div>
              <label for="state" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">State / Province</label>
              <input type="text" id="state" name="state" autocomplete="address-level1" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="CA">
            </div>
            <div>
              <label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">ZIP / Postal Code</label>
              <input type="text" id="zip" name="zip" autocomplete="postal-code" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="90210">
            </div>
            <div>
              <label for="country" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Country</label>
              <select id="country" name="country" autocomplete="country-name" class="mt-1 block w-full pl-3 pr-10 py-2 text-base bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-rose-500 focus:border-rose-500 sm:text-sm rounded-md text-gray-900 dark:text-gray-100">
                <option>United States</option>
                <option>Canada</option>
                <option>Mexico</option>
              </select>
            </div>
          </div>
        </section>

        <!-- Payment Information -->
        <section class="bg-gray-50 dark:bg-gray-700 rounded-2xl p-6 shadow-inner">
          <h2 class="text-2xl font-bold text-gray-700 dark:text-orange-200 mb-6 pb-2 border-b border-gray-200 dark:border-gray-600">Payment Information</h2>
          <div class="grid grid-cols-1 gap-6">
            <div>
              <label for="card-name" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Name on Card</label>
              <input type="text" id="card-name" name="card-name" autocomplete="cc-name" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="Jane Doe">
            </div>
            <div>
              <label for="card-number" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Card Number</label>
              <input type="text" id="card-number" name="card-number" autocomplete="cc-number" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="XXXX-XXXX-XXXX-XXXX">
            </div>
            <div class="grid grid-cols-3 gap-4">
              <div class="col-span-2">
                <label for="expiration-date" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Expiration Date</label>
                <input type="text" id="expiration-date" name="expiration-date" autocomplete="cc-exp" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="MM/YY">
              </div>
              <div>
                <label for="cvv" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">CVV</label>
                <input type="text" id="cvv" name="cvv" autocomplete="cc-csc" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="123">
              </div>
            </div>
            <div>
              <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Email Address</label>
              <input type="email" id="email" name="email" autocomplete="email" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="[email protected]">
            </div>
          </div>
        </section>

        <!-- Order Summary -->
        <section class="lg:col-span-2 bg-gray-50 dark:bg-gray-700 rounded-2xl p-6 shadow-inner">
          <h2 class="text-2xl font-bold text-gray-700 dark:text-orange-200 mb-6 pb-2 border-b border-gray-200 dark:border-gray-600">Order Summary</h2>
          <div class="space-y-4 mb-6">
            <div class="flex justify-between items-center">
              <span class="text-gray-600 dark:text-gray-300">Medical Consultation</span>
              <span class="font-semibold text-gray-900 dark:text-gray-100">$75.00</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-gray-600 dark:text-gray-300">Lab Test Kit</span>
              <span class="font-semibold text-gray-900 dark:text-gray-100">$120.00</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-gray-600 dark:text-gray-300">Shipping</span>
              <span class="font-semibold text-gray-900 dark:text-gray-100">$10.00</span>
            </div>
            <div class="border-t border-gray-200 dark:border-gray-600 pt-4 flex justify-between items-center">
              <span class="text-xl font-bold text-gray-800 dark:text-orange-100">Total</span>
              <span class="text-2xl font-extrabold text-rose-600 dark:text-rose-400">$205.00</span>
            </div>
          </div>
        </section>

        <!-- Terms and Conditions & Submit Button -->
        <div class="lg:col-span-2 flex flex-col sm:flex-row items-center justify-between mt-4">
          <div class="flex items-start mb-4 sm:mb-0">
            <input id="terms" name="terms" type="checkbox" class="h-4 w-4 text-rose-600 focus:ring-rose-500 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-800 dark:checked:bg-rose-600">
            <label for="terms" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
              I agree to the <a href="#" class="font-medium text-rose-600 hover:text-rose-500 dark:text-rose-400 dark:hover:text-rose-300">Terms of Service</a> and <a href="#" class="font-medium text-rose-600 hover:text-rose-500 dark:text-rose-400 dark:hover:text-rose-300">Privacy Policy</a>.
            </label>
          </div>
          <button type="submit" class="w-full sm:w-auto px-8 py-3 bg-gradient-to-r from-rose-500 to-rose-700 hover:from-rose-600 hover:to-rose-800 text-white font-semibold rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
            Place Order
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

LuxuryCheckoutForm

A luxury/premium style checkout form component with a multi-color gradient background, sophisticated typography, and refined elements. Designed for documentation/wiki sites, it's fully responsive and supports dark mode.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 min-h-screen flex items-center justify-center bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 dark:from-gray-900 dark:via-gray-800 dark:to-black">
  <div class="w-full max-w-4xl bg-white/90 dark:bg-gray-800/90 backdrop-blur-md rounded-2xl shadow-xl p-6 sm:p-8 lg:p-10 border border-gray-200 dark:border-gray-700">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 dark:from-indigo-400 dark:via-purple-400 dark:to-pink-400 mb-6 text-center tracking-tight">
      Secure Checkout
    </h2>
    <p class="text-center text-gray-700 dark:text-gray-300 mb-8 max-w-md mx-auto text-lg leading-relaxed">
      Complete your premium experience. Your information is safe with us.
    </p>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
      <!-- Billing Information -->
      <div>
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-5 border-b pb-3 border-gray-300 dark:border-gray-600">
          Billing Information
        </h3>
        <form class="space-y-6">
          <div>
            <label for="fullName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Full Name</label>
            <input type="text" id="fullName" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="John Doe">
          </div>
          <div>
            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
            <input type="email" id="email" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="[email protected]">
          </div>
          <div>
            <label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Address</label>
            <input type="text" id="address" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="123 Main St">
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div>
              <label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">City</label>
              <input type="text" id="city" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="New York">
            </div>
            <div>
              <label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Zip Code</label>
              <input type="text" id="zip" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="10001">
            </div>
            <div>
              <label for="country" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Country</label>
              <select id="country" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 transition duration-300 ease-in-out">
                <option value="US">United States</option>
                <option value="CA">Canada</option>
                <option value="GB">United Kingdom</option>
                <option value="AU">Australia</option>
              </select>
            </div>
          </div>
        </form>
      </div>

      <!-- Payment Information -->
      <div>
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-5 border-b pb-3 border-gray-300 dark:border-gray-600">
          Payment Information
        </h3>
        <form class="space-y-6">
          <div>
            <label for="cardName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Name on Card</label>
            <input type="text" id="cardName" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="John Doe">
          </div>
          <div>
            <label for="cardNumber" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Card Number</label>
            <input type="text" id="cardNumber" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="&#9679;&#9679;&#9679;&#9679; &#9679;&#9679;&#9679;&#9679; &#9679;&#9679;&#9679;&#9679; 1234">
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label for="expDate" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Expiration Date</label>
              <input type="text" id="expDate" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="MM/YY">
            </div>
            <div>
              <label for="cvv" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">CVV</label>
              <input type="text" id="cvv" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="123">
            </div>
          </div>

          <!-- Order Summary (basic version) -->
          <div class="mt-8 pt-6 border-t border-gray-300 dark:border-gray-600">
            <h4 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Order Summary</h4>
            <div class="flex justify-between text-gray-700 dark:text-gray-300 mb-2">
              <span>Product Name</span>
              <span>$99.00</span>
            </div>
            <div class="flex justify-between text-gray-700 dark:text-gray-300 mb-2">
              <span>Tax</span>
              <span>$5.00</span>
            </div>
            <div class="flex justify-between font-bold text-lg text-gray-900 dark:text-gray-50 border-t border-gray-300 dark:border-gray-600 pt-3 mt-3">
              <span>Total</span>
              <span class="text-transparent bg-clip-text bg-gradient-to-r from-green-500 to-blue-500 dark:from-green-400 dark:to-blue-400">$104.00</span>
            </div>
          </div>
        </form>
      </div>
    </div>

    <div class="mt-10 pt-6 border-t border-gray-300 dark:border-gray-600 flex justify-center">
      <button type="submit" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white rounded-xl shadow-lg hover:shadow-xl transform hover:scale-105 transition duration-300 ease-in-out font-semibold text-lg animate-gradient-xy focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700">
        Place Order
      </button>
    </div>

    <!-- Placeholder for an image in a luxury theme -->
    <div class="mt-10 hidden sm:block">
      <img src="https://picsum.photos/800/200?grayscale&blur=2" alt="Elegant Payment Iconography" class="w-full rounded-xl opacity-80 shadow-md" loading="lazy">
    </div>

  </div>
</div>

<style>
  /* Custom keyframes for the gradient animation */
  @keyframes gradient-xy {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  .animate-gradient-xy {
    background-size: 400% 400%;
    animation: gradient-xy 6s ease infinite;
  }
</style>

Checkout Form Component

A responsive checkout form component designed with a dark mode UI and jewel-toned color scheme, suitable for entertainment/media platforms. Includes payment details and summary sections.

Open Preview

                <div class="min-h-screen bg-gray-900 text-white dark:bg-gray-900 py-8 px-4 sm:px-6 lg:px-8">
  <div class="max-w-4xl mx-auto">
    <h1 class="text-3xl font-extrabold tracking-tight text-white dark:text-white sm:text-4xl mb-8 text-center">
      Complete Your Purchase
    </h1>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Payment Details Section -->
      <div class="bg-gray-800 dark:bg-gray-800 rounded-lg shadow-xl p-6 sm:p-8">
        <h2 class="text-2xl font-bold text-emerald-400 dark:text-emerald-400 mb-6">
          Payment Information
        </h2>

        <form class="space-y-6">
          <div>
            <label for="card-number" class="block text-sm font-medium text-gray-300 dark:text-gray-300 mb-2">Card Number</label>
            <input type="text" id="card-number" name="card-number" placeholder="XXXX XXXX XXXX XXXX" class="block w-full rounded-md border-gray-700 dark:border-gray-700 bg-gray-700 dark:bg-gray-700 text-white dark:text-white focus:border-emerald-500 focus:ring-emerald-500 sm:text-sm p-3">
          </div>

          <div class="grid grid-cols-2 gap-4">
            <div>
              <label for="expiration-date" class="block text-sm font-medium text-gray-300 dark:text-gray-300 mb-2">Expiration Date</label>
              <input type="text" id="expiration-date" name="expiration-date" placeholder="MM/YY" class="block w-full rounded-md border-gray-700 dark:border-gray-700 bg-gray-700 dark:bg-gray-700 text-white dark:text-white focus:border-emerald-500 focus:ring-emerald-500 sm:text-sm p-3">
            </div>
            <div>
              <label for="cvc" class="block text-sm font-medium text-gray-300 dark:text-gray-300 mb-2">CVC</label>
              <input type="text" id="cvc" name="cvc" placeholder="123" class="block w-full rounded-md border-gray-700 dark:border-gray-700 bg-gray-700 dark:bg-gray-700 text-white dark:text-white focus:border-emerald-500 focus:ring-emerald-500 sm:text-sm p-3">
            </div>
          </div>

          <div>
            <label for="cardholder-name" class="block text-sm font-medium text-gray-300 dark:text-gray-300 mb-2">Cardholder Name</label>
            <input type="text" id="cardholder-name" name="cardholder-name" placeholder="John Doe" class="block w-full rounded-md border-gray-700 dark:border-gray-700 bg-gray-700 dark:bg-gray-700 text-white dark:text-white focus:border-emerald-500 focus:ring-emerald-500 sm:text-sm p-3">
          </div>

          <div>
            <label for="country" class="block text-sm font-medium text-gray-300 dark:text-gray-300 mb-2">Country</label>
            <select id="country" name="country" class="block w-full rounded-md border-gray-700 dark:border-gray-700 bg-gray-700 dark:bg-gray-700 text-white dark:text-white focus:border-emerald-500 focus:ring-emerald-500 sm:text-sm p-3">
              <option>United States</option>
              <option>Canada</option>
              <option>United Kingdom</option>
              <option>Germany</option>
              <option>Australia</option>
            </select>
          </div>
        </form>
      </div>

      <!-- Order Summary Section -->
      <div class="bg-gray-800 dark:bg-gray-800 rounded-lg shadow-xl p-6 sm:p-8">
        <h2 class="text-2xl font-bold text-sapphire-400 dark:text-sapphire-400 mb-6">
          Order Summary
        </h2>

        <div class="space-y-4 mb-6">
          <div class="flex justify-between items-center text-gray-300 dark:text-gray-300">
            <span class="font-medium">Premium Subscription (Monthly)</span>
            <span class="font-semibold">$12.99</span>
          </div>
          <div class="flex justify-between items-center text-gray-300 dark:text-gray-300">
            <span class="font-medium">Exclusive Content Add-on</span>
            <span class="font-semibold">$5.00</span>
          </div>
          <div class="border-t border-gray-700 dark:border-gray-700 pt-4 flex justify-between items-center text-white dark:text-white text-lg">
            <span class="font-bold">Total Due</span>
            <span class="font-extrabold text-ruby-400 dark:text-ruby-400">$17.99</span>
          </div>
        </div>

        <div class="mb-6">
          <h3 class="text-lg font-semibold text-gray-300 dark:text-gray-300 mb-3">Billing Address</h3>
          <address class="not-italic text-gray-400 dark:text-gray-400 space-y-1">
            <p>123 Stream St</p>
            <p>Entertainment City, 90210</p>
            <p>CA, USA</p>
          </address>
        </div>

        <button type="submit" class="w-full flex items-center justify-center p-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-ruby-600 hover:bg-ruby-700 dark:bg-ruby-600 dark:hover:bg-ruby-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-ruby-500 dark:focus:ring-ruby-500">
          Confirm Payment
        </button>

        <p class="mt-4 text-center text-sm text-gray-400 dark:text-gray-400">
          By clicking 'Confirm Payment', you agree to our <a href="#" class="text-emerald-400 hover:underline">Terms of Service</a> and <a href="#" class="text-emerald-400 hover:underline">Privacy Policy</a>.
        </p>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom color definitions for jewel tones */
  .text-emerald-400 {
    color: #34d399; /* Tailwind emerald-400 */
  }
  .text-sapphire-400 {
    color: #60a5fa; /* Tailwind blue-400 as sapphire */
  }
  .text-ruby-400 {
    color: #f87171; /* Tailwind red-400 as ruby */
  }
  .bg-ruby-600 {
    background-color: #dc2626; /* Tailwind red-600 */
  }
  .hover:bg-ruby-700:hover {
    background-color: #b91c1c; /* Tailwind red-700 */
  }
  .focus\:ring-ruby-500:focus {
    --tw-ring-color: #ef4444; /* Tailwind red-500 */
  }
</style>

Playful Checkout Form Component

A simple, playful, and responsive checkout form component with rounded elements and muted colors, suitable for job/career platforms. Includes dark mode support.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-indigo-50 to-blue-50 dark:from-gray-900 dark:to-blue-950 flex items-center justify-center p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] border border-gray-100 dark:border-gray-700">
    <div class="p-6 sm:p-8">
      <div class="text-center mb-6 sm:mb-8">
        <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-600 dark:text-blue-400 mb-2 font-['Inter',sans-serif]">Yay! Let's Get Started</h2>
        <p class="text-gray-500 dark:text-gray-400 text-lg sm:text-xl">Complete your registration</p>
      </div>

      <form class="space-y-5 sm:space-y-6">
        <div>
          <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Full Name</label>
          <input type="text" id="full-name" placeholder="Jane Doe" class="mt-1 block w-full px-4 py-2 bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
        </div>

        <div>
          <label for="email-address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
          <input type="email" id="email-address" placeholder="[email protected]" class="mt-1 block w-full px-4 py-2 bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
          <input type="password" id="password" placeholder="Minimum 8 characters" class="mt-1 block w-full px-4 py-2 bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
        </div>

        <div>
          <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Confirm Password</label>
          <input type="password" id="confirm-password" placeholder="Repeat your password" class="mt-1 block w-full px-4 py-2 bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
        </div>

        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg text-lg font-semibold text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 transform transition duration-200 ease-in-out hover:scale-105 active:scale-95">
          <svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          Complete Registration!
        </button>
      </form>

      <div class="mt-6 text-center text-sm">
        <p class="text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300 transition duration-150 ease-in-out">Sign In Here!</a></p>
      </div>
    </div>
    <div class="bg-blue-100 dark:bg-gray-900 py-4 px-6 sm:px-8 text-center text-gray-600 dark:text-gray-400 text-sm border-t border-blue-200 dark:border-gray-700">
      <p>&copy; 2023 Your Company. All rights reserved.</p>
    </div>
  </div>
</div>

Art Deco Checkout Form

A complex, responsive checkout form component with an Art Deco design style, featuring geometric patterns and luxurious styling in ocean/blue tones. Designed for professional consulting/services, with full dark mode support.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-blue-950 to-blue-700 dark:from-gray-950 dark:to-blue-900 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-serif">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-2xl overflow-hidden transform transition-all duration-300 ease-in-out scale-100 hover:scale-[1.01] border-4 border-blue-600 dark:border-blue-700 relative">
    <!-- Art Deco Top Border -->
    <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-r from-blue-800 via-sky-600 to-blue-800 dark:from-blue-900 dark:via-blue-700 dark:to-blue-900"></div>
    <div class="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-r from-blue-800 via-sky-600 to-blue-800 dark:from-blue-900 dark:via-blue-700 dark:to-blue-900"></div>
    
    <div class="p-6 sm:p-8 lg:p-10 relative z-10">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-center text-blue-900 dark:text-sky-400 mb-8 sm:mb-10 tracking-wider drop-shadow-lg leading-tight">
        <span class="block">Finalize Your <span class="text-blue-600 dark:text-blue-400">Consultation</span></span>
      </h2>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 sm:gap-10">

        <!-- Left Column: Order Summary / Service Details -->
        <div class="bg-blue-50 dark:bg-gray-700 rounded-lg p-6 shadow-inner border border-blue-200 dark:border-gray-600">
          <h3 class="text-2xl font-semibold text-blue-800 dark:text-sky-300 mb-5 relative pb-3 border-b-2 border-blue-300 dark:border-gray-600">
            Service Details
            <span class="absolute bottom-[-2px] left-0 w-1/4 h-[2px] bg-sky-500"></span>
          </h3>
          <dl class="space-y-4 text-blue-900 dark:text-gray-200">
            <div class="flex justify-between items-center">
              <dt class="font-medium">Service Package:</dt>
              <dd class="text-lg font-bold text-blue-700 dark:text-sky-400">Premium Business Strategy</dd>
            </div>
            <div class="flex justify-between items-center border-t border-dashed border-blue-200 dark:border-gray-600 pt-4">
              <dt class="font-medium">Consultant:</dt>
              <dd class="flex items-center space-x-2">
                <img src="https://randomuser.me/api/portraits/men/78.jpg" alt="Consultant John Doe" class="w-8 h-8 rounded-full border-2 border-sky-500 dark:border-sky-400">
                <span>John Doe</span>
              </dd>
            </div>
            <div class="flex justify-between items-center border-t border-dashed border-blue-200 dark:border-gray-600 pt-4">
              <dt class="font-medium">Planned Date:</dt>
              <dd>October 26, 2024</dd>
            </div>
            <div class="flex justify-between items-center border-t border-dashed border-blue-200 dark:border-gray-600 pt-4">
              <dt class="font-medium">Duration:</dt>
              <dd>3 Hours</dd>
            </div>
            <div class="flex justify-between items-center border-t border-dashed border-blue-200 dark:border-gray-600 pt-4">
              <dt class="font-medium">Base Price:</dt>
              <dd>$1,500.00</dd>
            </div>
            <div class="flex justify-between items-center border-t border-dashed border-blue-200 dark:border-gray-600 pt-4">
              <dt class="font-medium">Taxes (7%):</dt>
              <dd>$105.00</dd>
            </div>
            <div class="flex justify-between items-center border-t-2 border-blue-400 dark:border-blue-600 pt-4 font-bold text-xl">
              <dt class="text-blue-900 dark:text-sky-300">Total Amount:</dt>
              <dd class="text-blue-800 dark:text-sky-400">$1,605.00</dd>
            </div>
          </dl>
        </div>

        <!-- Right Column: Payment & Billing Details -->
        <div class="bg-blue-50 dark:bg-gray-700 rounded-lg p-6 shadow-inner border border-blue-200 dark:border-gray-600">
          <h3 class="text-2xl font-semibold text-blue-800 dark:text-sky-300 mb-5 relative pb-3 border-b-2 border-blue-300 dark:border-gray-600">
            Payment Information
            <span class="absolute bottom-[-2px] left-0 w-1/4 h-[2px] bg-sky-500"></span>
          </h3>
          <form class="space-y-6">
            <div>
              <label for="card-number" class="block text-sm font-medium text-blue-800 dark:text-gray-200 mb-2">Card Number</label>
              <input type="text" id="card-number" class="w-full p-3 border border-blue-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-blue-900 dark:text-white focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 ease-in-out placeholder-blue-400 dark:placeholder-gray-500" placeholder="_ _ _ _  _ _ _ _  _ _ _ _  _ _ _ _">
            </div>
            <div class="grid grid-cols-2 gap-4">
              <div>
                <label for="exp-date" class="block text-sm font-medium text-blue-800 dark:text-gray-200 mb-2">Exp. Date</label>
                <input type="text" id="exp-date" class="w-full p-3 border border-blue-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-blue-900 dark:text-white focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 ease-in-out placeholder-blue-400 dark:placeholder-gray-500" placeholder="MM/YY">
              </div>
              <div>
                <label for="cvv" class="block text-sm font-medium text-blue-800 dark:text-gray-200 mb-2">CVV</label>
                <input type="text" id="cvv" class="w-full p-3 border border-blue-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-blue-900 dark:text-white focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 ease-in-out placeholder-blue-400 dark:placeholder-gray-500" placeholder="123">
              </div>
            </div>
            <div>
              <label for="card-name" class="block text-sm font-medium text-blue-800 dark:text-gray-200 mb-2">Name on Card</label>
              <input type="text" id="card-name" class="w-full p-3 border border-blue-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-blue-900 dark:text-white focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 ease-in-out placeholder-blue-400 dark:placeholder-gray-500" placeholder="John D. Smith">
            </div>
            <div>
              <label for="billing-address" class="block text-sm font-medium text-blue-800 dark:text-gray-200 mb-2">Billing Address</label>
              <input type="text" id="billing-address" class="w-full p-3 border border-blue-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-blue-900 dark:text-white focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 ease-in-out placeholder-blue-400 dark:placeholder-gray-500" placeholder="123 Main St"> 
            </div>
            <div class="flex items-center justify-between text-blue-800 dark:text-gray-200 text-sm">
              <div class="flex items-center">
                <input id="save-card" name="save-card" type="checkbox" class="h-4 w-4 text-sky-600 border-blue-300 dark:border-gray-600 rounded focus:ring-sky-500">
                <label for="save-card" class="ml-2 block text-blue-800 dark:text-gray-200">Save card details</label>
              </div>
              <a href="#" class="text-sky-600 hover:text-sky-800 dark:text-sky-400 dark:hover:text-sky-300 font-medium transition duration-200 ease-in-out">Forgot something?</a>
            </div>
            <button type="submit" class="w-full py-4 px-6 bg-sky-600 hover:bg-sky-700 dark:bg-sky-500 dark:hover:bg-sky-600 text-white font-bold rounded-lg shadow-lg text-xl tracking-wide transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-sky-300 dark:focus:ring-sky-700 relative overflow-hidden">
              <span class="relative z-10">Confirm Booking & Pay</span>
              <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-shimmer transition-all duration-300"></div>
            </button>
          </form>
        </div>
      </div>

      <!-- Footer Note -->
      <div class="mt-10 text-center text-blue-800 dark:text-gray-300 text-sm sm:text-base">
        <p>&copy; <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-sky-400 dark:hover:text-sky-300 font-semibold">Art Deco Consulting</a> 2024. All rights reserved. Your data is secured with 256-bit encryption.</p>
      </div>

    </div>
  </div>
</div>

<style>
  /* Custom animations for Art Deco shimmer effect on button */
  @keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }

  .animate-shimmer {
    animation: shimmer 1.5s infinite;
  }
</style>

Search Components

Categories

Checkout Form