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

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