Forms 구성 요소

<div class="container mx-auto p-4">

  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-xl p-6 transform hover:scale-105 transition duration-300">

    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Shipping Information</h2>



    <form>

      <div class="mb-4">

        <label for="fullName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Full Name</label>

        <input type="text" id="fullName" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 transform translate-z-0 perspective-origin" placeholder="John Doe">

      </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" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 transform translate-z-0 perspective-origin" placeholder="123 Main St">

      </div>



      <div class="mb-4">

        <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" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 transform translate-z-0 perspective-origin" placeholder="Anytown">

      </div>



      <div class="mb-4">

        <label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Zip Code</label>

        <input type="text" id="zip" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 transform translate-z-0 perspective-origin" placeholder="12345">

      </div>



      <div class="flex items-center justify-between">

        <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transform translate-z-0 perspective-origin dark:bg-blue-700 dark:hover:bg-blue-900">

          Submit Order

        </button>

      </div>

    </form>

  </div>

</div>