Registration Form 구성 요소

<div class="min-h-screen bg-gray-950 dark:bg-black p-4 sm:p-6 lg:p-8 flex items-center justify-center font-sans">
  <div class="max-w-md w-full bg-gray-900 dark:bg-gray-900 rounded-lg shadow-2xl p-6 sm:p-8 border border-purple-700 dark:border-purple-600 animate-fade-in">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-white text-center mb-6 sm:mb-8 tracking-wide animate-pulse-light">
      Book Your Spot
    </h2>
    <p class="text-center text-gray-400 mb-6 sm:mb-8 text-sm sm:text-base">
      Fill out the form below to reserve your appointment.
    </p>

    <form class="space-y-4 sm:space-y-6">
      <div>
        <label for="full-name" class="block text-sm font-medium text-purple-400 mb-2">Full Name</label>
        <input type="text" id="full-name" class="w-full p-3 bg-gray-800 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-green-400 border border-transparent focus:border-green-400 placeholder-gray-500 transition duration-300 ease-in-out" placeholder="John Doe" required>
      </div>

      <div>
        <label for="email" class="block text-sm font-medium text-purple-400 mb-2">Email Address</label>
        <input type="email" id="email" class="w-full p-3 bg-gray-800 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 border border-transparent focus:border-blue-400 placeholder-gray-500 transition duration-300 ease-in-out" placeholder="[email protected]" required>
      </div>

      <div>
        <label for="phone" class="block text-sm font-medium text-purple-400 mb-2">Phone Number</label>
        <input type="tel" id="phone" class="w-full p-3 bg-gray-800 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-pink-400 border border-transparent focus:border-pink-400 placeholder-gray-500 transition duration-300 ease-in-out" placeholder="+1 (555) 123-4567">
      </div>

      <div>
        <label for="date" class="block text-sm font-medium text-purple-400 mb-2">Preferred Date</label>
        <input type="date" id="date" class="w-full p-3 bg-gray-800 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-green-400 border border-transparent focus:border-green-400 transition duration-300 ease-in-out" required>
      </div>

      <div>
        <label for="time" class="block text-sm font-medium text-purple-400 mb-2">Preferred Time</label>
        <input type="time" id="time" class="w-full p-3 bg-gray-800 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 border border-transparent focus:border-blue-400 transition duration-300 ease-in-out" required>
      </div>

      <div>
        <label for="service" class="block text-sm font-medium text-purple-400 mb-2">Service Type</label>
        <select id="service" class="w-full p-3 bg-gray-800 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-pink-400 border border-transparent focus:border-pink-400 transition duration-300 ease-in-out" required>
          <option value="">Select a service</option>
          <option value="consultation">Consultation</option>
          <option value="repair">Repair</option>
          <option value="installation">Installation</option>
          <option value="maintenance">Maintenance</option>
        </select>
      </div>

      <div>
        <label for="message" class="block text-sm font-medium text-purple-400 mb-2">Additional Notes (Optional)</label>
        <textarea id="message" rows="3" class="w-full p-3 bg-gray-800 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-green-400 border border-transparent focus:border-green-400 placeholder-gray-500 transition duration-300 ease-in-out resize-y" placeholder="Any specific requests or details..."></textarea>
      </div>

      <button type="submit" class="w-full flex items-center justify-center p-3 text-lg font-semibold rounded-md bg-gradient-to-r from-purple-600 to-blue-500 text-white hover:from-purple-700 hover:to-blue-600 focus:outline-none focus:ring-4 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 animate-gradient-hover">
        Confirm Booking
        <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </form>

    <p class="text-center text-gray-500 text-xs sm:text-sm mt-8">
      Need help? <a href="#" class="text-purple-400 hover:underline">Contact support</a>
    </p>
  </div>
</div>

<style>
  /* Adding a subtle animation for the form as it loads */
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in {
    animation: fade-in 0.7s ease-out forwards;
  }

  /* Neon light effect for the title */
  @keyframes pulse-light {
    0%, 100% { text-shadow: 0 0 5px #e879f9, 0 0 10px #e879f9, 0 0 15px #c084fc; }
    50% { text-shadow: 0 0 7px #d946ef, 0 0 12px #d946ef, 0 0 17px #a78bfa; }
  }
  .animate-pulse-light {
    animation: pulse-light 3s infinite alternate;
  }

  /* Button hover effect - inspired by gradients */
  @keyframes gradient-hover {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
  }
  .animate-gradient-hover:hover {
    background-size: 200% auto;
    animation: gradient-hover 3s ease-in-out infinite alternate;
  }
</style>