复古风格结账表单组件

<div class="container mx-auto p-6 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl font-mono">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Checkout Information</h2>
  <form>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="mb-4">
        <label for="full_name" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Full Name</label>
        <input type="text" id="full_name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your full name">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email Address</label>
        <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your email address">
      </div>
    </div>

    <div class="mb-4">
      <label for="address" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Address</label>
      <input type="text" id="address" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your address">
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="mb-4">
        <label for="city" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">City</label>
        <input type="text" id="city" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your city">
      </div>
      <div class="mb-4">
        <label for="state" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">State</label>
        <input type="text" id="state" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your state">
      </div>
      <div class="mb-4">
        <label for="zip" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Zip Code</label>
        <input type="text" id="zip" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your zip code">
      </div>
    </div>

    <div class="mb-6">
      <label for="card_number" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Credit Card Number</label>
      <input type="text" id="card_number" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your credit card number">
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="mb-6">
        <label for="expiry_date" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Expiry Date</label>
        <input type="text" id="expiry_date" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="MM/YY">
      </div>
      <div class="mb-6">
        <label for="cvv" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">CVV</label>
        <input type="text" id="cvv" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="CVV">
      </div>
        <div class="mb-6">
            <label for="country" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Country</label>
            <input type="text" id="country" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your country">
        </div>
    </div>

    <div class="flex items-center justify-between">
      <button class="bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-green-800 dark:hover:bg-green-900" type="button">
        Submit Payment
      </button>
    </div>
  </form>
</div>