3D_Education_Form_Component

<div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-950 flex items-center justify-center p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden relative border border-gray-200 dark:border-gray-700
              transform perspective-1000 rotateX-0 rotateY-0 hover:rotateX-3 hover:rotateY-3 transition-all duration-500 ease-in-out
              group dark:shadow-2xl dark:shadow-indigo-900/50">

    <!-- 3D Top Edge Effect -->
    <div class="absolute top-0 left-0 w-full h-4 bg-gradient-to-b from-gray-100 to-transparent dark:from-gray-700 -z-10
                transform rotateX-10 origin-top opacity-50"></div>

    <!-- 3D Bottom Edge Effect -->
    <div class="absolute bottom-0 left-0 w-full h-4 bg-gradient-to-t from-gray-100 to-transparent dark:from-gray-700 -z-10 
                transform rotateX-10 origin-bottom opacity-50"></div>

    <!-- 3D Left Edge Effect -->
    <div class="absolute top-0 left-0 h-full w-4 bg-gradient-to-r from-gray-100 to-transparent dark:from-gray-700 -z-10 
                transform rotateY-10 origin-left opacity-50"></div>

    <!-- 3D Right Edge Effect -->
    <div class="absolute top-0 right-0 h-full w-4 bg-gradient-to-l from-gray-100 to-transparent dark:from-gray-700 -z-10 
                transform rotateY-10 origin-right opacity-50"></div>


    <div class="p-6 sm:p-8 flex flex-col items-center">
      <div class="mb-6 text-center">
        <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-2 leading-tight relative z-10">
          <span class="relative inline-block">
            Pathway to Knowledge
            <span class="absolute inset-x-0 bottom-0 h-2 bg-indigo-500 dark:bg-indigo-600 rounded-full opacity-60 transform translate-y-1 scale-x-75 group-hover:scale-x-90 transition-transform duration-300"></span>
          </span>
        </h2>
        <p class="text-sm text-gray-600 dark:text-gray-300">Unlock your potential, one step at a time.</p>
      </div>

      <form class="w-full space-y-5">
        <div>
          <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Full Name</label>
          <input type="text" id="full-name" name="full-name" placeholder="Jane Doe"
                 class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400
                        bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-400
                        transition-all duration-200 ease-in-out
                        transform group-hover:scale-[1.01] hover:shadow-md">
        </div>

        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Email Address</label>
          <input type="email" id="email" name="email" placeholder="[email protected]"
                 class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400
                        bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-400
                        transition-all duration-200 ease-in-out
                        transform group-hover:scale-[1.01] hover:shadow-md">
        </div>

        <div>
          <label for="course" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Select a Course</label>
          <div class="relative">
            <select id="course" name="course"
                    class="block appearance-none w-full px-4 py-2 pr-8 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400
                           bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white
                           transition-all duration-200 ease-in-out
                           transform group-hover:scale-[1.01] hover:shadow-md">
              <option value="" disabled selected>Choose an option</option>
              <option value="web-dev">Web Development Fundamentals</option>
              <option value="data-sci">Introduction to Data Science</option>
              <option value="ux-design">UX/UI Design Principles</option>
              <option value="ai-ml">AI & Machine Learning Basics</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-200">
              <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 6.757 7.586 5.343 9z"/>
              </svg>
            </div>
          </div>
        </div>

        <div class="flex items-center">
          <input id="terms" name="terms" type="checkbox"
                 class="h-4 w-4 text-indigo-600 dark:text-indigo-400 focus:ring-indigo-500 dark:focus:ring-indigo-400 border-gray-300 dark:border-gray-600 rounded
                        transform group-hover:scale-[1.05] transition-transform duration-200">
          <label for="terms" class="ml-2 block text-sm text-gray-900 dark:text-gray-200">
            I agree to the <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Terms of Service</a>
          </label>
        </div>

        <button type="submit"
                class="w-full relative py-3 px-4 bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-700 dark:to-purple-700 text-white font-semibold rounded-lg
                       shadow-lg hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-indigo-500/50 dark:focus:ring-indigo-400/50
                       transform translate-z-0 group-hover:translate-z-3 transition-all duration-300 ease-in-out
                       group-hover:scale-105 group-hover:from-indigo-700 group-hover:to-purple-700 dark:group-hover:from-indigo-600 dark:group-hover:to-purple-600">
          
          <span class="absolute inset-0 flex items-center justify-center -z-10 group-hover:opacity-0 transition-opacity duration-300">
            <span class="bg-indigo-700 dark:bg-indigo-800 rounded-lg absolute inset-0 transform translate-y-1 translate-x-1 opacity-75 blur-sm"></span>
          </span>
          <span class="relative z-10">Enroll Now</span>
          <svg class="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out transform -translate-x-full group-hover:translate-x-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
          </svg>
        </button>
      </form>

      <p class="mt-6 text-xs text-gray-500 dark:text-gray-400 text-center">
        By enrolling, you agree to receive educational updates and offers.
      </p>
    </div>
  </div>
</div>

<style>
  /* This is for tailwind's JIT compiler to pick up custom values */
  /* If you are using Tailwind Play or a full build, you might not need this explicitly */
  .perspective-1000 {
    perspective: 1000px;
  }
  .rotateX-3 {
    transform: rotateX(3deg);
  }
  .rotateY-3 {
    transform: rotateY(3deg);
  }
  .rotateX-10 {
    transform: rotateX(10deg);
  }
  .rotateY-10 {
    transform: rotateY(10deg);
  }
  .translate-z-0 {
    transform: translateZ(0);
  }
  .translate-z-3 {
    transform: translateZ(12px); /* equivalent to translate-z-3 */
  }
</style>