Forms 구성 요소

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-6 md:p-12">
  <div class="container mx-auto">
    <div class="flex flex-col lg:flex-row bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
      
      <!-- Form Section -->
      <div class="lg:w-1/2 p-8 lg:p-12">
        <h2 class="text-3xl font-bold mb-6 text-gray-800 dark:text-white">Contact Us</h2>
        
        <form>
          <div class="mb-6">
            <label for="name" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Name</label>
            <input type="text" id="name" class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600" placeholder="Your Name">
          </div>

          <div class="mb-6">
            <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email</label>
            <input type="email" id="email" class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600" placeholder="Your Email">
          </div>

          <div class="mb-6">
            <label for="subject" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Subject</label>
            <input type="text" id="subject" class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600" placeholder="Subject of your message">
          </div>

          <div class="mb-6">
            <label for="message" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Message</label>
            <textarea id="message" rows="6" class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600" placeholder="Your Message"></textarea>
          </div>

          <div class="flex items-center justify-between">
            <button type="button" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-800">
              Send Message
            </button>
          </div>
        </form>
      </div>

      <!-- Image/Content Section (Analogous Color Scheme Example) -->
      <div class="lg:w-1/2 bg-gradient-to-br from-blue-500 to-purple-600 dark:from-blue-700 dark:to-purple-900 p-8 lg:p-12 flex items-center justify-center">
        <div class="text-center">
          <h3 class="text-2xl font-bold text-white mb-4">Get in Touch</h3>
          <p class="text-white text-opacity-90 mb-6">We'd love to hear from you! Fill out the form to get in touch with our team.</p>
          
          <!-- Example of complex elements: Icons and contact info -->
          <div class="text-white text-opacity-90">
            <div class="flex items-center justify-center mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0l-4.242-4.243m2.828 2.828l1.414-1.414m-5.656-5.656l1.414-1.414m6.364 6.364l-1.414 1.414m-7.071-7.071l1.414-1.414M3.432 7.393c-2.102 2.101-2.102 5.514 0 7.615a5.656 5.656 0 008.012 0l-4.243-4.242a1.997 1.997 0 010-2.828l4.243-4.242a5.656 5.656 0 00-8.012 0z"/>
              </svg>
              <p>123 Main Street, Anytown, USA</p>
            </div>
            <div class="flex items-center justify-center mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8m-7 13a9 9 0 110-18 9 9 0 010 18z"/>
              </svg>
              <p>[email protected]</p>
            </div>
            <div class="flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
              </svg>
              <p>+1 234 567 890</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>