遊び心のある求人応募フォーム

<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-orange-50 to-amber-50 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-700 rounded-3xl shadow-xl overflow-hidden animate-fade-in-up transition-colors duration-300">
    <div class="p-6 sm:p-8 md:p-10 bg-amber-100 dark:bg-gray-800 text-center rounded-t-3xl">
      <h2 class="text-3xl sm:text-4xl font-bold text-amber-800 dark:text-amber-200 mb-2 leading-tight">Ready for Your Next Big Adventure?</h2>
      <p class="text-lg text-amber-700 dark:text-amber-300">Fill out this form to apply for exciting opportunities!</p>
    </div>

    <form class="p-6 sm:p-8 md:p-10 space-y-6">
      <!-- Personal Information Section -->
      <div class="bg-gray-50 dark:bg-gray-600 p-6 rounded-2xl shadow-inner border border-gray-100 dark:border-gray-500">
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-5 pb-3 border-b border-gray-200 dark:border-gray-500 flex items-center">
          <svg class="w-7 h-7 mr-3 text-amber-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
          Tell Us About You
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label for="first-name" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">First Name <span class="text-red-500">*</span></label>
            <input type="text" id="first-name" name="first_name" required class="block w-full p-3 border border-gray-300 dark:border-gray-500 rounded-lg shadow-sm focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-400 transition-all duration-200 ease-in-out hover:border-amber-300 dark:hover:border-amber-600">
          </div>
          <div>
            <label for="last-name" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Last Name <span class="text-red-500">*</span></label>
            <input type="text" id="last-name" name="last_name" required class="block w-full p-3 border border-gray-300 dark:border-gray-500 rounded-lg shadow-sm focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-400 transition-all duration-200 ease-in-out hover:border-amber-300 dark:hover:border-amber-600">
          </div>
          <div class="md:col-span-2">
            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Email Address <span class="text-red-500">*</span></label>
            <input type="email" id="email" name="email" required class="block w-full p-3 border border-gray-300 dark:border-gray-500 rounded-lg shadow-sm focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-400 transition-all duration-200 ease-in-out hover:border-amber-300 dark:hover:border-amber-600">
          </div>
          <div>
            <label for="phone" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Phone Number</label>
            <input type="tel" id="phone" name="phone" class="block w-full p-3 border border-gray-300 dark:border-gray-500 rounded-lg shadow-sm focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-400 transition-all duration-200 ease-in-out hover:border-amber-300 dark:hover:border-amber-600">
          </div>
        </div>
      </div>

      <!-- Resume & Portfolio Section -->
      <div class="bg-gray-50 dark:bg-gray-600 p-6 rounded-2xl shadow-inner border border-gray-100 dark:border-gray-500">
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-5 pb-3 border-b border-gray-200 dark:border-gray-500 flex items-center">
          <svg class="w-7 h-7 mr-3 text-amber-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.5 4.043v1.854a.25.25 0 01-.4 0L7.043 4.043A.25.25 0 006.5 4.218v11.564a.25.25 0 00.41.171L9.5 13.957a.25.25 0 01.4 0l2.647 2.196a.25.25 0 00.41-.171V4.218a.25.25 0 00-.543-.175L9.5 4.043zM6.5 13.5v-7.39l.75-.621L9.5 7.043v6.457l-2.647 2.196L6.5 13.5zm7 0L10.5 15.696V7.043l2.25-1.854.75.621v7.39z"></path></svg>
          Your Accomplishments
        </h3>
        <div>
          <label for="resume-file" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Upload Resume/CV <span class="text-red-500">*</span></label>
          <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 dark:border-gray-500 border-dashed rounded-lg cursor-pointer hover:border-amber-400 dark:hover:border-amber-600 transition-colors duration-200">
            <div class="space-y-1 text-center">
              <svg class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-300" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
                <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 32" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
              <div class="flex text-sm text-gray-600 dark:text-gray-300">
                <label for="resume-file" class="relative cursor-pointer bg-white dark:bg-gray-700 rounded-md font-medium text-amber-600 hover:text-amber-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-amber-500 dark:focus-within:ring-offset-gray-700">
                  <span>Upload a file</span>
                  <input id="resume-file" name="resume_file" type="file" class="sr-only" accept=".pdf,.doc,.docx" required>
                </label>
                <p class="pl-1">or drag and drop</p>
              </div>
              <p class="text-xs text-gray-500 dark:text-gray-400">PDF, DOC, DOCX up to 10MB</p>
            </div>
          </div>
        </div>
        <div class="mt-6">
          <label for="portfolio-link" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Portfolio/LinkedIn Profile (Optional)</label>
          <input type="url" id="portfolio-link" name="portfolio_link" class="block w-full p-3 border border-gray-300 dark:border-gray-500 rounded-lg shadow-sm focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-400 transition-all duration-200 ease-in-out hover:border-amber-300 dark:hover:border-amber-600" placeholder="e.g., https://your-portfolio.com or https://linkedin.com/in/yourname">
        </div>
      </div>

      <!-- Experience & Skills Section -->
      <div class="bg-gray-50 dark:bg-gray-600 p-6 rounded-2xl shadow-inner border border-gray-100 dark:border-gray-500">
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-5 pb-3 border-b border-gray-200 dark:border-gray-500 flex items-center">
          <svg class="w-7 h-7 mr-3 text-amber-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
          Your Experience & Skills
        </h3>
        <div>
          <label for="position-applying-for" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Position Applying For</label>
          <select id="position-applying-for" name="position_applying_for" class="block w-full p-3 border border-gray-300 dark:border-gray-500 rounded-lg shadow-sm focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 transition-all duration-200 ease-in-out hover:border-amber-300 dark:hover:border-amber-600">
            <option value="">Select a position...</option>
            <option value="frontend-dev">Frontend Developer</option>
            <option value="backend-dev">Backend Developer</option>
            <option value="fullstack-dev">Fullstack Developer</option>
            <option value="ux-designer">UX/UI Designer</option>
            <option value="project-manager">Project Manager</option>
            <option value="data-scientist">Data Scientist</option>
          </select>
        </div>
        <div class="mt-6">
          <label for="years-experience" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Years of Professional Experience</label>
          <input type="number" id="years-experience" name="years_experience" min="0" max="50" class="block w-full p-3 border border-gray-300 dark:border-gray-500 rounded-lg shadow-sm focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-400 transition-all duration-200 ease-in-out hover:border-amber-300 dark:hover:border-amber-600" placeholder="e.g., 5">
        </div>
        <div class="mt-6">
          <label for="cover-letter" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Cover Letter (Optional)</label>
          <textarea id="cover-letter" name="cover_letter" rows="5" class="block w-full p-3 border border-gray-300 dark:border-gray-500 rounded-lg shadow-sm focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 dark:placeholder-gray-400 placeholder-gray-400 transition-all duration-200 ease-in-out hover:border-amber-300 dark:hover:border-amber-600" placeholder="Tell us why you're a great fit for this role..."></textarea>
        </div>
      </div>

      <!-- Availability & Preferences Section -->
      <div class="bg-gray-50 dark:bg-gray-600 p-6 rounded-2xl shadow-inner border border-gray-100 dark:border-gray-500">
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-5 pb-3 border-b border-gray-200 dark:border-gray-500 flex items-center">
          <svg class="w-7 h-7 mr-3 text-amber-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.5 12A.5.5 0 016 11.5a.5.5 0 00.5-.5H12a.5.5 0 00.5.5.5.5 0 01.5.5v1a.5.5 0 01-.5.5h-7a.5.5 0 01-.5-.5v-1a.5.5 0 01.5-.5zm0 0v-1a.5.5 0 01.5-.5h7a.5.5 0 01.5.5v1a.5.5 0 01-.5.5h-7a.5.5 0 01-.5-.5zM3 10V4.5A2.5 2.5 0 015.5 2H10a.5.5 0 01.5.5v15a.5.5 0 01-.5.5H5.5A2.5 2.5 0 013 15.5V10z" clip-rule="evenodd"></path></svg>
          Your Availability
        </h3>
        <div class="flex items-center space-x-3">
          <input id="remote-work" name="remote_work" type="checkbox" class="h-5 w-5 text-amber-600 focus:ring-amber-500 border-gray-300 dark:border-gray-500 rounded-md dark:bg-gray-700">
          <label for="remote-work" class="text-sm font-medium text-gray-700 dark:text-gray-200">Interested in remote work</label>
        </div>
        <div class="mt-4">
          <label for="start-date" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Earliest Start Date</label>
          <input type="date" id="start-date" name="start_date" class="block w-full p-3 border border-gray-300 dark:border-gray-500 rounded-lg shadow-sm focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 transition-all duration-200 ease-in-out hover:border-amber-300 dark:hover:border-amber-600">
        </div>
      </div>

      <div class="mt-8 flex justify-center">
        <button type="submit" class="inline-flex items-center px-8 py-4 border border-transparent text-lg font-semibold rounded-full shadow-lg text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-gray-700 transform transition-all duration-300 ease-in-out hover:scale-105 active:scale-95 group">
          <svg class="w-6 h-6 mr-3 -ml-1 text-white group-hover:animate-bounce-fwd" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          Submit Application
        </button>
      </div>
    </form>
  </div>
</div>