検索コンポーネント

カテゴリ

コンポーネントチェックアウトフォーム

チェックアウトフォーム

購入手続き完了フォーム

チェックアウトフォームコンポーネント

CRM/ビジネスツール用のミニマリストでフラットなデザインのチェックアウトフォームコンポーネントで、温かみのある夕焼けの配色とダークモードのサポートによる完全な応答性が特徴です。

                <div class="min-h-screen bg-orange-50 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="p-6 sm:p-8 bg-gradient-to-r from-orange-400 to-red-500 dark:from-orange-600 dark:to-red-700 text-white">
      <h2 class="text-2xl sm:text-3xl font-bold mb-2">Checkout</h2>
      <p class="text-orange-100 dark:text-orange-200">Please fill in your details to complete the purchase.</p>
    </div>

    <form class="p-6 sm:p-8 space-y-6">
      <!-- Contact Information -->
      <div>
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Contact Information</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
            <input type="email" id="email" name="email" autocomplete="email" required
                   class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
                          dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
          </div>
          <div>
            <label for="phone" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Phone Number (Optional)</label>
            <input type="tel" id="phone" name="phone" autocomplete="tel"
                   class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
                          dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
          </div>
        </div>
      </div>

      <!-- Shipping Information -->
      <div>
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Shipping Information</h3>
        <div class="grid grid-cols-1 gap-4">
          <div>
            <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
            <input type="text" id="full-name" name="full-name" autocomplete="name" required
                   class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
                          dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
          </div>
          <div>
            <label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Street Address</label>
            <input type="text" id="address" name="address" autocomplete="street-address" required
                   class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
                          dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
          </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">City</label>
              <input type="text" id="city" name="city" autocomplete="address-level2" required
                     class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
                            dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
            </div>
            <div>
              <label for="state" class="block text-sm font-medium text-gray-700 dark:text-gray-300">State/Province</label>
              <input type="text" id="state" name="state" autocomplete="address-level1" required
                     class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
                            dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
            </div>
            <div>
              <label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Zip/Postal Code</label>
              <input type="text" id="zip" name="zip" autocomplete="postal-code" required
                     class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
                            dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
            </div>
          </div>
        </div>
      </div>

      <!-- Payment Information -->
      <div>
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Payment Information</h3>
        <div class="grid grid-cols-1 gap-4">
          <div>
            <label for="card-number" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Card Number</label>
            <input type="text" id="card-number" name="card-number" autocomplete="cc-number" required
                   class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
                          dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600" placeholder="•••• •••• •••• ••••">
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div>
              <label for="exp-date" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Expiration Date</label>
              <input type="text" id="exp-date" name="exp-date" autocomplete="cc-exp" required
                     class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
                            dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600" placeholder="MM/YY">
            </div>
            <div>
              <label for="cvv" class="block text-sm font-medium text-gray-700 dark:text-gray-300">CVV</label>
              <input type="text" id="cvv" name="cvv" autocomplete="cc-csc" required
                     class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
                            dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600" placeholder="•••">
            </div>
          </div>
        </div>
      </div>

      <!-- Submit Button -->
      <div class="pt-4">
        <button type="submit"
                class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-medium text-white bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500
                       dark:bg-orange-700 dark:hover:bg-orange-800 dark:focus:ring-offset-gray-800">
          Complete Purchase
        </button>
      </div>
    </form>
  </div>
</div>

チェックアウトフォームコンポーネント - Neumorphic Corporate Blues

複雑で応答性の高いチェックアウトフォームコンポーネントで、企業の青の色調を使用したニューモルフィックデザインスタイルです。ダークモードをサポートし、ビジネス/企業のWebサイトに適しています。

開けるプレビュー

                <div class="min-h-screen flex items-center justify-center p-4 bg-blue-50 dark:bg-gray-800 font-sans">

  <div class="w-full max-w-4xl bg-blue-100 dark:bg-gray-700 rounded-xl shadow-xl p-8 transition-all duration-300 transform
              dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
              shadow-[inset_5px_5px_10px_rgba(174,174,192,0.6),inset_-5px_-5px_10px_rgba(255,255,255,0.8)]">

    <h2 class="text-3xl font-bold text-blue-800 dark:text-blue-300 mb-8 text-center">
      Secure Checkout
    </h2>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">

      <!-- Payment Information Section -->
      <div class="p-6 rounded-xl bg-blue-50 dark:bg-gray-800
                  shadow-[5px_5px_10px_rgba(174,174,192,0.6),-5px_-5px_10px_rgba(255,255,255,0.8)]
                  dark:shadow-[5px_5px_10px_rgba(0,0,0,0.5),-5px_-5px_10px_rgba(255,255,255,0.1)]">
        <h3 class="text-xl font-semibold text-blue-700 dark:text-blue-400 mb-6">Payment Details</h3>

        <div class="space-y-4">

          <!-- Card Number -->
          <div>
            <label for="card-number" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">Card Number</label>
            <input type="text" id="card-number" placeholder="•••• •••• •••• ••••" maxlength="19" class="w-full p-3 rounded-lg
                          bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
                          border border-transparent outline-none
                          focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
                          shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                          dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
                          placeholder:text-blue-400 dark:placeholder:text-gray-400">
          </div>

          <!-- Card Name -->
          <div>
            <label for="card-name" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">Card Holder Name</label>
            <input type="text" id="card-name" placeholder="John Doe" class="w-full p-3 rounded-lg
                          bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
                          border border-transparent outline-none
                          focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
                          shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                          dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
                          placeholder:text-blue-400 dark:placeholder:text-gray-400">
          </div>

          <div class="grid grid-cols-2 gap-4">
            <!-- Expiration Date -->
            <div>
              <label for="exp-date" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">Expiry Date</label>
              <input type="text" id="exp-date" placeholder="MM/YY" maxlength="5" class="w-full p-3 rounded-lg
                            bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
                            border border-transparent outline-none
                            focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
                            shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                            dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
                            placeholder:text-blue-400 dark:placeholder:text-gray-400">
            </div>
            <!-- CVV -->
            <div>
              <label for="cvv" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">CVV</label>
              <input type="text" id="cvv" placeholder="•••" maxlength="3" class="w-full p-3 rounded-lg
                            bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
                            border border-transparent outline-none
                            focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
                            shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                            dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
                            placeholder:text-blue-400 dark:placeholder:text-gray-400">
            </div>
          </div>

          <!-- Payment Options -->
          <div class="mt-6">
            <h4 class="text-md font-semibold text-blue-700 dark:text-blue-400 mb-3">Choose Payment Method</h4>
            <div class="flex flex-wrap gap-4">
              <button class="flex items-center justify-center gap-2 p-3 rounded-lg text-blue-700 dark:text-blue-200
                              bg-blue-200 dark:bg-gray-900
                              shadow-[5px_5px_10px_rgba(174,174,192,0.6),-5px_-5px_10px_rgba(255,255,255,0.8)]
                              dark:shadow-[5px_5px_10px_rgba(0,0,0,0.5),-5px_-5px_10px_rgba(255,255,255,0.1)]
                              hover:shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                              dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
                              transition-all duration-200 text-sm">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4V8h16v10zm-12-6L4 8h16l-8 4-8-4z"/></svg>
                Credit Card
              </button>
              <button class="flex items-center justify-center gap-2 p-3 rounded-lg text-blue-700 dark:text-blue-200
                              bg-blue-200 dark:bg-gray-900
                              shadow-[5px_5px_10px_rgba(174,174,192,0.6),-5px_-5px_10px_rgba(255,255,255,0.8)]
                              dark:shadow-[5px_5px_10px_rgba(0,0,0,0.5),-5px_-5px_10px_rgba(255,255,255,0.1)]
                              hover:shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                              dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
                              transition-all duration-200 text-sm">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.47-7-7.39h5L10 9l3 3.01L14.99 12H19c0 4.87-3.93 8.8-8 8.93V19z"/></svg>
                PayPal
              </button>
            </div>
          </div>

        </div>
      </div>

      <!-- Order Summary / Billing Address Section -->
      <div class="p-6 rounded-xl bg-blue-50 dark:bg-gray-800
                  shadow-[5px_5px_10px_rgba(174,174,192,0.6),-5px_-5px_10px_rgba(255,255,255,0.8)]
                  dark:shadow-[5px_5px_10px_rgba(0,0,0,0.5),-5px_-5px_10px_rgba(255,255,255,0.1)]">
        <h3 class="text-xl font-semibold text-blue-700 dark:text-blue-400 mb-6">Billing Address</h3>

        <div class="space-y-4">
          <div>
            <label for="full-name" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">Full Name</label>
            <input type="text" id="full-name" placeholder="Jane Doe" class="w-full p-3 rounded-lg
                          bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
                          border border-transparent outline-none
                          focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
                          shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                          dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
                          placeholder:text-blue-400 dark:placeholder:text-gray-400">
          </div>
          <div>
            <label for="address" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">Address</label>
            <input type="text" id="address" placeholder="123 Main St" class="w-full p-3 rounded-lg
                          bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
                          border border-transparent outline-none
                          focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
                          shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                          dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
                          placeholder:text-blue-400 dark:placeholder:text-gray-400">
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label for="city" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">City</label>
              <input type="text" id="city" placeholder="Anytown" class="w-full p-3 rounded-lg
                            bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
                            border border-transparent outline-none
                            focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
                            shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                            dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
                            placeholder:text-blue-400 dark:placeholder:text-gray-400">
            </div>
            <div>
              <label for="zip" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">Zip Code</label>
              <input type="text" id="zip" placeholder="12345" class="w-full p-3 rounded-lg
                            bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
                            border border-transparent outline-none
                            focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
                            shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                            dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
                            placeholder:text-blue-400 dark:placeholder:text-gray-400">
            </div>
          </div>
          <div>
            <label for="country" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">Country</label>
            <select id="country" class="w-full p-3 rounded-lg
                          bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
                          border border-transparent outline-none
                          focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
                          shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                          dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]">
              <option value="">Select Country</option>
              <option value="US">United States</option>
              <option value="CA">Canada</option>
              <option value="GB">United Kingdom</option>
              <option value="AU">Australia</option>
              <option value="DE">Germany</option>
              <!-- Add more countries as needed -->
            </select>
          </div>
        </div>
      </div>

    </div>

    <!-- Order Summary Footer -->
    <div class="mt-8 p-6 rounded-xl bg-blue-50 dark:bg-gray-800
                shadow-[5px_5px_10px_rgba(174,174,192,0.6),-5px_-5px_10px_rgba(255,255,255,0.8)]
                dark:shadow-[5px_5px_10px_rgba(0,0,0,0.5),-5px_-5px_10px_rgba(255,255,255,0.1)]">
      <h3 class="text-xl font-semibold text-blue-700 dark:text-blue-400 mb-4">Order Summary</h3>
      <div class="flex justify-between items-center text-blue-600 dark:text-blue-200 mb-2">
        <span>Subtotal</span>
        <span>$200.00</span>
      </div>
      <div class="flex justify-between items-center text-blue-600 dark:text-blue-200 mb-2">
        <span>Shipping</span>
        <span>$15.00</span>
      </div>
      <div class="flex justify-between items-center text-blue-700 dark:text-blue-100 font-bold text-xl mt-4 pt-4 border-t border-blue-200 dark:border-gray-600">
        <span>Total</span>
        <span>$215.00</span>
      </div>

      <button type="submit" class="w-full mt-8 p-4 rounded-xl
                      bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700
                      text-white font-bold text-lg
                      shadow-[5px_5px_10px_rgba(0,0,0,0.2),-5px_-5px_10px_rgba(255,255,255,0.7)]
                      dark:shadow-[5px_5px_10px_rgba(0,0,0,0.8),-5px_-5px_10px_rgba(255,255,255,0.1)]
                      hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.6)]
                      dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.9),inset_-2px_-2px_5px_rgba(255,255,255,0.05)]
                      transition-all duration-300 transform active:scale-98">
        Place Order
      </button>
    </div>

  </div>
</div>

チェックアウトフォームコンポーネント

スイス/インターナショナルタイポグラフィデザインの影響、落ち着いた配色、ダークモードのサポートを備えた、すっきりとしたミニマリストでレスポンシブなチェックアウトフォームコンポーネントで、金融や銀行のインターフェースに適しています。

開けるプレビュー

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

チェックアウトフォームコンポーネント

黒と白のモノクロスタイル、明るいアクセントカラー、グラデーショントランジション、ダークモードのサポートを備えたレスポンシブチェックアウトフォームで、スポーツ/フィットネスアプリケーションに適しています。

開けるプレビュー

                <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

ネオン/グロー効果とセピア/ブラウンの配色を備えたシンプルでレスポンシブなチェックアウトフォームコンポーネントで、暗号通貨/ブロックチェーンアプリケーション向けに設計されています。ダークモードのサポートが含まれています。

開けるプレビュー

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

チェックアウトフォームコンポーネント

複雑な紙/印刷物にインスパイアされた、ジュエルトーンのチェックアウトフォームコンポーネントで、ドキュメント/Wikiサイト向けに設計されており、完全な応答性とダークモードのサポートを特長としています。

開けるプレビュー

                <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

グレースケールの配色を備えた複雑なブルータリズムスタイルのチェックアウトフォームコンポーネントで、ポートフォリオの展示に最適化されています。ハイコントラスト、珍しいレイアウト、完全な応答性、ダークモードのサポートを特長としています。

開けるプレビュー

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

チェックアウトフォームコンポーネント - ヘルスケア/医療

柔らかく芸術的な水彩デザインテーマ、温かみのあるニュートラルカラースキーム、ダークモードのサポートを備えた、複雑でレスポンシブなチェックアウトフォームコンポーネントで、ヘルスケアおよび医療アプリケーションに適しています。

開けるプレビュー

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

ラグジュアリーチェックアウトフォーム

マルチカラーのグラデーション背景、洗練されたタイポグラフィ、洗練された要素を備えたラグジュアリー/プレミアムスタイルのチェックアウトフォームコンポーネント。ドキュメント/Wikiサイト向けに設計されており、完全にレスポンシブで、ダークモードをサポートしています。

開けるプレビュー

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

チェックアウトフォームコンポーネント

ダークモードUIと宝石のような配色でデザインされたレスポンシブチェックアウトフォームコンポーネントで、エンターテインメント/メディアプラットフォームに適しています。支払いの詳細と概要セクションが含まれています。

開けるプレビュー

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