검색 구성 요소

카테고리

양식

사용자 입력을 수집하기 위한 필드 모음

Forms 구성 요소

Swiss/International Typography 원칙에 따라 디자인된 깨끗하고 미니멀한 형태의 구성 요소로, 보석 톤의 색 구성표가 특징입니다. 전문 컨설팅 또는 서비스 웹 사이트에 이상적이며 완전한 응답성과 다크 모드 지원을 제공합니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 p-4 sm:p-6 lg:p-8 dark:bg-gray-900 flex items-center justify-center">
  <div class="w-full max-w-md bg-white rounded-lg shadow-xl p-6 sm:p-8 dark:bg-gray-800 border dark:border-gray-700">
    <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4 text-center dark:text-white font-serif tracking-tight leading-tight">
      Get in Touch
    </h2>
    <p class="text-center text-gray-600 mb-8 dark:text-gray-300 text-sm sm:text-base leading-relaxed">
      We'd love to hear from you. Please fill out the form below.
    </p>

    <form>
      <div class="mb-5">
        <label for="name" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300 tracking-wide">
          FULL NAME
        </label>
        <input type="text" id="name" name="name" placeholder="John Doe" class="appearance-none block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-emerald-600 focus:border-emerald-600 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500 transition duration-200 ease-in-out">
      </div>

      <div class="mb-5">
        <label for="email" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300 tracking-wide">
          EMAIL ADDRESS
        </label>
        <input type="email" id="email" name="email" placeholder="[email protected]" class="appearance-none block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-sapphire-600 focus:border-sapphire-600 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500 transition duration-200 ease-in-out">
      </div>

      <div class="mb-6">
        <label for="message" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300 tracking-wide">
          YOUR MESSAGE
        </label>
        <textarea id="message" name="message" rows="4" placeholder="Tell us about your needs..." class="appearance-none block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-ruby-600 focus:border-ruby-600 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500 resize-y transition duration-200 ease-in-out"></textarea>
      </div>

      <div class="mt-6">
        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-base font-semibold text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:focus:ring-offset-gray-900 transition duration-200 ease-in-out tracking-wide uppercase">
          SUBMIT
        </button>
      </div>
    </form>
  </div>
</div>

Corporate_Professional_Contact_Form

포레스트/그린 팔레트로 설계된 깔끔하고 전문적이며 반응이 빠른 연락처 양식 구성 요소로, 기업 또는 포트폴리오 웹 사이트에 적합합니다. 다크 모드 지원과 현대적인 디자인 기능이 포함되어 있습니다.

열다 미리 보기

                <section class="py-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 to-green-100 dark:from-gray-950 dark:to-gray-900 font-sans">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 md:p-12 border border-green-200 dark:border-gray-700">
    <div class="text-center mb-10">
      <h2 class="text-4xl font-extrabold text-green-800 dark:text-green-300 mb-4 tracking-tight leading-tight">
        Get in Touch
      </h2>
      <p class="text-lg text-green-700 dark:text-gray-400 max-w-2xl mx-auto">
        We'd love to hear from you. Whether you have a project in mind, a question, or just want to say hi, fill out the form below.
      </p>
    </div>

    <form class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div>
        <label for="first-name" class="block text-sm font-medium text-green-700 dark:text-gray-300 mb-1">First Name</label>
        <input type="text" id="first-name" name="first-name" autocomplete="given-name" placeholder="John" class="block w-full px-4 py-3 border border-green-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 bg-green-50 dark:bg-gray-700 text-green-900 dark:text-white placeholder-green-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
      </div>
      <div>
        <label for="last-name" class="block text-sm font-medium text-green-700 dark:text-gray-300 mb-1">Last Name</label>
        <input type="text" id="last-name" name="last-name" autocomplete="family-name" placeholder="Doe" class="block w-full px-4 py-3 border border-green-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 bg-green-50 dark:bg-gray-700 text-green-900 dark:text-white placeholder-green-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
      </div>
      <div class="md:col-span-2">
        <label for="email" class="block text-sm font-medium text-green-700 dark:text-gray-300 mb-1">Email Address</label>
        <input type="email" id="email" name="email" autocomplete="email" placeholder="[email protected]" class="block w-full px-4 py-3 border border-green-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 bg-green-50 dark:bg-gray-700 text-green-900 dark:text-white placeholder-green-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
      </div>
      <div class="md:col-span-2">
        <label for="phone" class="block text-sm font-medium text-green-700 dark:text-gray-300 mb-1">Phone Number (Optional)</label>
        <input type="tel" id="phone" name="phone" autocomplete="tel" placeholder="+1 (555) 123-4567" class="block w-full px-4 py-3 border border-green-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 bg-green-50 dark:bg-gray-700 text-green-900 dark:text-white placeholder-green-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
      </div>
      <div class="md:col-span-2">
        <label for="subject" class="block text-sm font-medium text-green-700 dark:text-gray-300 mb-1">Subject</label>
        <input type="text" id="subject" name="subject" placeholder="Project Inquiry" class="block w-full px-4 py-3 border border-green-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 bg-green-50 dark:bg-gray-700 text-green-900 dark:text-white placeholder-green-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
      </div>
      <div class="md:col-span-2">
        <label for="message" class="block text-sm font-medium text-green-700 dark:text-gray-300 mb-1">How can we help you?</label>
        <textarea id="message" name="message" rows="6" placeholder="Tell us about your project, your needs, or any questions you have..." class="block w-full px-4 py-3 border border-green-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 bg-green-50 dark:bg-gray-700 text-green-900 dark:text-white placeholder-green-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base"></textarea>
      </div>
      <div class="md:col-span-2 flex items-center">
        <input id="terms-and-privacy" name="terms-and-privacy" type="checkbox" class="h-4 w-4 text-green-600 dark:text-green-400 focus:ring-green-500 border-green-300 dark:border-gray-600 rounded">
        <label for="terms-and-privacy" class="ml-2 block text-sm text-green-700 dark:text-gray-400">
          By submitting, you agree to our
          <a href="#" class="text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 font-medium">Privacy Policy</a>.
        </label>
      </div>
      <div class="md:col-span-2 flex justify-end">
        <button type="submit" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-green-700 hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-500 transition duration-200 ease-in-out transform hover:-translate-y-0.5">
          Send Message
          <svg class="ml-3 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </form>
  </div>
</section>

Corporate_Banking_Login_Form

기업 금융 및 은행 애플리케이션에 적합한 미니멀하고 평평한 디자인의 로그인 양식으로, 전문적인 블루 톤, 완전한 응답성 및 다크 모드 지원을 특징으로 합니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-6 lg:p-8">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden md:max-w-xl lg:max-w-md">
    <div class="md:flex">
      <div class="w-full p-8">
        <div class="text-center mb-8">
          <h2 class="text-3xl font-extrabold text-blue-800 dark:text-blue-400 mb-2">Welcome Back</h2>
          <p class="text-gray-600 dark:text-gray-400">Sign in to your account</p>
        </div>

        <form class="space-y-6">
          <div>
            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
            <input type="email" id="email" name="email" autocomplete="email" required class="block w-full px-4 py-2 border border-blue-300 dark:border-blue-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 sm:text-sm">
          </div>

          <div>
            <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
            <input type="password" id="password" name="password" autocomplete="current-password" required class="block w-full px-4 py-2 border border-blue-300 dark:border-blue-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 sm:text-sm">
          </div>

          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded dark:border-gray-600 dark:bg-gray-700">
              <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
            </div>

            <div class="text-sm">
              <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Forgot your password?</a>
            </div>
          </div>

          <div>
            <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-150 ease-in-out">
              Sign in
            </button>
          </div>
        </form>

        <div class="mt-6 text-center">
          <p class="text-sm text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Sign up</a></p>
        </div>
      </div>
    </div>
  </div>
</div>

JobApplicationForm_WatercolorArtistic

수채화/예술적 디자인 스타일과 그라데이션 무지개 색 구성표가 있는 복잡하고 반응이 빠른 입사 지원서입니다. 개인 정보, 경험, 교육 및 파일 업로드를 위한 섹션이 포함되어 있으며 다크 모드를 지원하며 구인 게시판 및 경력 플랫폼에 적합합니다.

열다 미리 보기

                <div class="min-h-screen bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 dark:from-gray-900 dark:via-purple-950 dark:to-teal-950 p-4 sm:p-6 lg:p-8 font-sans relative overflow-hidden">

  <!-- Background Artistic Elements (Subtle on light, more pronounced on dark) -->
  <div class="absolute inset-0 z-0 opacity-30 dark:opacity-20 pointer-events-none">
    <div class="absolute top-0 left-1/4 w-96 h-96 bg-gradient-to-br from-purple-200 to-pink-200 dark:from-purple-800 dark:to-pink-800 rounded-full mix-blend-multiply opacity-50 blur-3xl animate-blob"></div>
    <div class="absolute bottom-0 right-1/4 w-80 h-80 bg-gradient-to-br from-blue-200 to-green-200 dark:from-blue-800 dark:to-green-800 rounded-full mix-blend-multiply opacity-50 blur-3xl animate-blob animation-delay-2000"></div>
    <div class="absolute top-1/3 right-0 w-72 h-72 bg-gradient-to-br from-red-200 to-orange-200 dark:from-red-800 dark:to-orange-800 rounded-full mix-blend-multiply opacity-50 blur-3xl animate-blob animation-delay-4000"></div>
  </div>

  <style>
    @keyframes blob {
      0% { transform: translate(0px, 0px) scale(1); }
      33% { transform: translate(30px, -50px) scale(1.1); }
      66% { transform: translate(-20px, 20px) scale(0.9); }
      100% { transform: translate(0px, 0px) scale(1); }
    }
    .animate-blob {
      animation: blob 7s infinite;
    }
    .animation-delay-2000 { animation-delay: 2s; }
    .animation-delay-4000 { animation-delay: 4s; }
    /* Custom scrollbar for dark mode */
    .dark ::-webkit-scrollbar-track {
      background: #2a0044; /* Darker purple */
    }
    .dark ::-webkit-scrollbar-thumb {
      background-color: #6a00ff; /* Brighter purple for thumb */
      border-radius: 20px;
      border: 3px solid #2a0044;
    }
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px; /* For horizontal scrollbars */
    }
    ::-webkit-scrollbar-track {
        background: #f0f0f0;
        border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb {
        background-color: #d1d5db; /* Light gray */
        border-radius: 10px;
        border: 2px solid #f0f0f0;
    }
  </style>

  <div class="relative z-10 max-w-5xl mx-auto bg-white/70 dark:bg-gray-800/80 backdrop-filter backdrop-blur-lg rounded-3xl shadow-xl border border-white/50 dark:border-gray-700/50 p-6 sm:p-8 lg:p-10 transform transition-all duration-300 hover:shadow-2xl">
    <div class="text-center mb-8">
      <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-400 dark:to-indigo-400 mb-3 drop-shadow-lg leading-tight">
        Join Our Visionary Team
      </h1>
      <p class="text-base sm:text-lg text-gray-700 dark:text-gray-300 max-w-2xl mx-auto leading-relaxed">
        Embark on a creative journey with us. Fill out this form to apply for exciting opportunities.
      </p>
    </div>

    <form class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 lg:gap-10">

      <!-- Section: Personal Details -->
      <section class="md:col-span-2 p-5 sm:p-6 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-gray-700 dark:to-gray-800 rounded-2xl border border-blue-200/50 dark:border-gray-600/50 shadow-inner group">
        <h2 class="text-2xl font-bold mb-5 text-gray-800 dark:text-gray-100 flex items-center">
          Personal Details
          <span class="ml-2 text-blue-500 dark:text-blue-400 group-hover:rotate-3 transition-transform duration-300">✨</span>
        </h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div>
            <label for="first-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">First Name</label>
            <input type="text" id="first-name" name="first-name" placeholder="e.g., Aurora" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-200 outline-none focus:shadow-md focus:shadow-purple-200 dark:focus:shadow-purple-900/50">
          </div>
          <div>
            <label for="last-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Last Name</label>
            <input type="text" id="last-name" name="last-name" placeholder="e.g., Rivers" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-200 outline-none focus:shadow-md focus:shadow-purple-200 dark:focus:shadow-purple-900/50">
          </div>
          <div class="sm:col-span-2">
            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
            <input type="email" id="email" name="email" placeholder="e.g., [email protected]" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-200 outline-none focus:shadow-md focus:shadow-purple-200 dark:focus:shadow-purple-900/50">
          </div>
          <div class="sm:col-span-2">
            <label for="phone" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Phone Number (Optional)</label>
            <input type="tel" id="phone" name="phone" placeholder="e.g., +1 (555) 123-4567" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-200 outline-none focus:shadow-md focus:shadow-purple-200 dark:focus:shadow-purple-900/50">
          </div>
        </div>
      </section>

      <!-- Section: Experience -->
      <section class="md:col-span-2 p-5 sm:p-6 bg-gradient-to-br from-pink-50 to-orange-50 dark:from-gray-700 dark:to-gray-800 rounded-2xl border border-pink-200/50 dark:border-gray-600/50 shadow-inner group">
        <h2 class="text-2xl font-bold mb-5 text-gray-800 dark:text-gray-100 flex items-center">
          Work Experience
          <span class="ml-2 text-pink-500 dark:text-pink-400 group-hover:rotate-6 transition-transform duration-300">🖌️</span>
        </h2>
        <div id="experience-container" class="space-y-6">
          <!-- Experience Entry 1 (Default) -->
          <div class="bg-white/60 dark:bg-gray-900/50 p-4 rounded-xl border border-white/70 dark:border-gray-700/70 shadow-sm flex flex-col sm:flex-row gap-4 items-start sm:items-end">
            <div class="flex-grow grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div>
                <label for="job-title-1" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Job Title</label>
                <input type="text" id="job-title-1" name="job-title-1" placeholder="e.g., Lead Designer" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 text-sm">
              </div>
              <div>
                <label for="company-1" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Company</label>
                <input type="text" id="company-1" name="company-1" placeholder="e.g., Creative Canvas Studio" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 text-sm">
              </div>
              <div class="col-span-1 sm:col-span-2">
                <label for="job-description-1" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Key Responsibilities/Achievements</label>
                <textarea id="job-description-1" name="job-description-1" rows="3" placeholder="Describe your role and impact..." class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 text-sm resize-y"></textarea>
              </div>
            </div>
            <button type="button" class="mt-2 sm:mt-0 px-4 py-2 bg-red-400 text-white rounded-lg shadow hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors duration-200 text-sm align-bottom flex-shrink-0">
              Remove
            </button>
          </div>
        </div>
        <button type="button" id="add-experience" class="mt-6 px-6 py-3 bg-gradient-to-r from-orange-400 to-red-400 text-white rounded-xl shadow-lg hover:shadow-xl hover:from-orange-500 hover:to-red-500 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700 transition-all duration-300 transform hover:-translate-y-0.5 text-base font-semibold">
          Add More Experience <span aria-hidden="true">+</span>
        </button>
      </section>

      <!-- Section: Education -->
      <section class="md:col-span-2 p-5 sm:p-6 bg-gradient-to-br from-green-50 to-blue-50 dark:from-gray-700 dark:to-gray-800 rounded-2xl border border-green-200/50 dark:border-gray-600/50 shadow-inner group">
        <h2 class="text-2xl font-bold mb-5 text-gray-800 dark:text-gray-100 flex items-center">
          Education Background
          <span class="ml-2 text-green-500 dark:text-green-400 group-hover:scale-105 transition-transform duration-300">🎓</span>
        </h2>
        <div id="education-container" class="space-y-6">
          <!-- Education Entry 1 (Default) -->
          <div class="bg-white/60 dark:bg-gray-900/50 p-4 rounded-xl border border-white/70 dark:border-gray-700/70 shadow-sm flex flex-col sm:flex-row gap-4 items-start sm:items-end">
            <div class="flex-grow grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div>
                <label for="degree-1" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Degree/Program</label>
                <input type="text" id="degree-1" name="degree-1" placeholder="e.g., MFA in Digital Arts" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-green-500 focus:border-green-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 text-sm">
              </div>
              <div>
                <label for="university-1" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">University/Institution</label>
                <input type="text" id="university-1" name="university-1" placeholder="e.g., Evergreen Arts Institute" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-green-500 focus:border-green-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 text-sm">
              </div>
            </div>
            <button type="button" class="mt-2 sm:mt-0 px-4 py-2 bg-red-400 text-white rounded-lg shadow hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors duration-200 text-sm align-bottom flex-shrink-0">
              Remove
            </button>
          </div>
        </div>
        <button type="button" id="add-education" class="mt-6 px-6 py-3 bg-gradient-to-r from-green-400 to-teal-400 text-white rounded-xl shadow-lg hover:shadow-xl hover:from-green-500 hover:to-teal-500 focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-700 transition-all duration-300 transform hover:-translate-y-0.5 text-base font-semibold">
          Add More Education <span aria-hidden="true">+</span>
        </button>
      </section>

      <!-- Section: Skills & Portfolio -->
      <section class="p-5 sm:p-6 bg-gradient-to-br from-yellow-50 to-orange-50 dark:from-gray-700 dark:to-gray-800 rounded-2xl border border-yellow-200/50 dark:border-gray-600/50 shadow-inner group">
        <h2 class="text-2xl font-bold mb-5 text-gray-800 dark:text-gray-100 flex items-center">
          Skills & Portfolio
          <span class="ml-2 text-yellow-500 dark:text-yellow-400 group-hover:animate-bounce transition-transform duration-300">⭐</span>
        </h2>
        <div class="space-y-4">
          <div>
            <label for="skills" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Key Skills (comma-separated)</label>
            <input type="text" id="skills" name="skills" placeholder="e.g., UI/UX Design, Oil Painting, Animation" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-yellow-500 focus:border-yellow-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-200 outline-none focus:shadow-md focus:shadow-yellow-200 dark:focus:shadow-yellow-900/50">
          </div>
          <div>
            <label for="portfolio-link" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Portfolio Link (Optional)</label>
            <input type="url" id="portfolio-link" name="portfolio-link" placeholder="e.g., https://yourportfolio.com" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-yellow-500 focus:border-yellow-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-200 outline-none focus:shadow-md focus:shadow-yellow-200 dark:focus:shadow-yellow-900/50">
          </div>
        </div>
      </section>

      <!-- Section: Upload Files -->
      <section class="p-5 sm:p-6 bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800 rounded-2xl border border-purple-200/50 dark:border-gray-600/50 shadow-inner group">
        <h2 class="text-2xl font-bold mb-5 text-gray-800 dark:text-gray-100 flex items-center">
          Upload Your Artwork
          <span class="ml-2 text-purple-500 dark:text-purple-400 group-hover:rotate-12 transition-transform duration-300">🖼️</span>
        </h2>
        <div class="space-y-4">
          <div>
            <label for="resume" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Resume/CV (PDF preferred)</label>
            <input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx" class="block w-full text-sm text-gray-700 dark:text-gray-300
              file:mr-4 file:py-2 file:px-4
              file:rounded-full file:border-0
              file:text-sm file:font-semibold
              file:bg-purple-100 file:text-purple-700
              hover:file:bg-purple-200 dark:file:bg-gray-600 dark:file:text-purple-300 dark:hover:file:bg-gray-700
              transition-colors duration-200 cursor-pointer">
          </div>
          <div>
            <label for="cover-letter" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Cover Letter (Optional)</label>
            <input type="file" id="cover-letter" name="cover-letter" accept=".pdf,.doc,.docx" class="block w-full text-sm text-gray-700 dark:text-gray-300
              file:mr-4 file:py-2 file:px-4
              file:rounded-full file:border-0
              file:text-sm file:font-semibold
              file:bg-indigo-100 file:text-indigo-700
              hover:file:bg-indigo-200 dark:file:bg-gray-600 dark:file:text-indigo-300 dark:hover:file:bg-gray-700
              transition-colors duration-200 cursor-pointer">
          </div>
        </div>
      </section>

      <!-- Section: Additional Information -->
      <section class="md:col-span-2 p-5 sm:p-6 bg-gradient-to-br from-teal-50 to-cyan-50 dark:from-gray-700 dark:to-gray-800 rounded-2xl border border-teal-200/50 dark:border-gray-600/50 shadow-inner group">
        <h2 class="text-2xl font-bold mb-5 text-gray-800 dark:text-gray-100 flex items-center">
          Creative Insights
          <span class="ml-2 text-teal-500 dark:text-teal-400 group-hover:rotate-6 transition-transform duration-300">💡</span>
        </h2>
        <div class="space-y-4">
          <div>
            <label for="desired-salary" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Desired Salary (USD/Year)</label>
            <input type="number" id="desired-salary" name="desired-salary" placeholder="e.g., 75000" min="0" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-teal-500 focus:border-teal-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-200 outline-none focus:shadow-md focus:shadow-teal-200 dark:focus:shadow-teal-900/50">
          </div>
          <div>
            <label for="availability" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">When can you start?</label>
            <input type="date" id="availability" name="availability" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-teal-500 focus:border-teal-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-200 outline-none focus:shadow-md focus:shadow-teal-200 dark:focus:shadow-teal-900/50">
          </div>
          <div>
            <label for="about-you" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tell us about your creative philosophy or what inspires you.</label>
            <textarea id="about-you" name="about-you" rows="4" placeholder="Your unique vision..." class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-teal-500 focus:border-teal-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-200 outline-none focus:shadow-md focus:shadow-teal-200 dark:focus:shadow-teal-900/50 resize-y"></textarea>
          </div>
          <div class="flex items-center">
            <input type="checkbox" id="terms" name="terms" class="h-5 w-5 text-teal-600 dark:text-teal-400 border-gray-300 dark:border-gray-600 rounded focus:ring-teal-500 dark:focus:ring-teal-400 cursor-pointer">
            <label for="terms" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">I agree to the <a href="#" class="text-teal-600 hover:text-teal-800 dark:text-teal-400 dark:hover:text-teal-200 font-medium hover:underline">terms and conditions</a>.</label>
          </div>
        </div>
      </section>

      <!-- Submit Button -->
      <div class="md:col-span-2 text-center mt-6 sm:mt-8">
        <button type="submit" class="px-10 py-4 bg-gradient-to-r from-purple-500 via-indigo-500 to-blue-500 text-white font-bold text-lg rounded-full shadow-2xl hover:shadow-purple-400/50 dark:hover:shadow-purple-900/50 hover:scale-105 transition-all duration-300 ease-out transform focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-indigo-700 group relative overflow-hidden">
          <span class="relative z-10">Submit Application</span>
          <span class="absolute inset-0 bg-gradient-to-r from-pink-400 via-purple-300 to-blue-300 opacity-0 group-hover:opacity-100 transition-opacity duration-300 mix-blend-overlay"></span>
          <span class="absolute inset-0 rounded-full border-2 border-white/50 dark:border-white/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
        </button>
      </div>

    </form>
  </div>

  <!-- Sample JavaScript for 'Add More' functionality (not part of the HTML requirement, but for completeness) -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      let experienceCount = 1;
      let educationCount = 1;

      document.getElementById('add-experience')?.addEventListener('click', function() {
        experienceCount++;
        const container = document.getElementById('experience-container');
        const newEntry = document.createElement('div');
        newEntry.className = 'bg-white/60 dark:bg-gray-900/50 p-4 rounded-xl border border-white/70 dark:border-gray-700/70 shadow-sm flex flex-col sm:flex-row gap-4 items-start sm:items-end';
        newEntry.innerHTML = `
          <div class="flex-grow grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label for="job-title-${experienceCount}" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Job Title</label>
              <input type="text" id="job-title-${experienceCount}" name="job-title-${experienceCount}" placeholder="e.g., Lead Designer" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 text-sm">
            </div>
            <div>
              <label for="company-${experienceCount}" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Company</label>
              <input type="text" id="company-${experienceCount}" name="company-${experienceCount}" placeholder="e.g., Creative Canvas Studio" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 text-sm">
            </div>
            <div class="col-span-1 sm:col-span-2">
              <label for="job-description-${experienceCount}" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Key Responsibilities/Achievements</label>
              <textarea id="job-description-${experienceCount}" name="job-description-${experienceCount}" rows="3" placeholder="Describe your role and impact..." class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 text-sm resize-y"></textarea>
            </div>
          </div>
          <button type="button" class="mt-2 sm:mt-0 px-4 py-2 bg-red-400 text-white rounded-lg shadow hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors duration-200 text-sm align-bottom flex-shrink-0 remove-item">
            Remove
          </button>
        `;
        container.appendChild(newEntry);

        newEntry.querySelector('.remove-item')?.addEventListener('click', function() {
          newEntry.remove();
        });
      });

      document.getElementById('add-education')?.addEventListener('click', function() {
        educationCount++;
        const container = document.getElementById('education-container');
        const newEntry = document.createElement('div');
        newEntry.className = 'bg-white/60 dark:bg-gray-900/50 p-4 rounded-xl border border-white/70 dark:border-gray-700/70 shadow-sm flex flex-col sm:flex-row gap-4 items-start sm:items-end';
        newEntry.innerHTML = `
          <div class="flex-grow grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label for="degree-${educationCount}" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Degree/Program</label>
              <input type="text" id="degree-${educationCount}" name="degree-${educationCount}" placeholder="e.g., MFA in Digital Arts" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-green-500 focus:border-green-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 text-sm">
            </div>
            <div>
              <label for="university-${educationCount}" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">University/Institution</label>
              <input type="text" id="university-${educationCount}" name="university-${educationCount}" placeholder="e.g., Evergreen Arts Institute" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-green-500 focus:border-green-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 text-sm">
            </div>
          </div>
          <button type="button" class="mt-2 sm:mt-0 px-4 py-2 bg-red-400 text-white rounded-lg shadow hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors duration-200 text-sm align-bottom flex-shrink-0 remove-item">
            Remove
          </button>
        `;
        container.appendChild(newEntry);

        newEntry.querySelector('.remove-item')?.addEventListener('click', function() {
          newEntry.remove();
        });
      });

      // Initial setup for existing remove buttons (if they were generated by server)
      document.querySelectorAll('.remove-item').forEach(button => {
        button.addEventListener('click', function() {
          button.closest('.flex.flex-col.sm\:flex-row')?.remove();
        });
      });
    });
  </script>
</div>

장난기 넘치는 입사 지원서

따뜻한 무채색, 둥근 요소, 다크 모드 지원을 갖춘 반응이 빠르고 재미있는 입사 지원서 구성 요소로, 구인 게시판 및 경력 개발 플랫폼에 적합합니다.

열다 미리 보기

                <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>

Healthcare_Form_Gradient_Neon

네온/일렉트릭 컬러 그라디언트와 부드러운 전환이 있는 복잡하고 반응이 빠른 의료 양식 구성 요소로, 다크 모드를 지원합니다. 여러 대화형 요소가 있는 의료 응용 분야를 위해 설계되었습니다.

열다 미리 보기

                <div class="min-h-screen py-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-purple-900 via-zinc-950 to-blue-900 dark:from-zinc-950 dark:via-blue-950 dark:to-purple-950 text-white font-sans overflow-hidden">
  <div class="max-w-4xl mx-auto bg-gradient-to-br from-purple-700 via-pink-700 to-blue-700 dark:from-zinc-800 dark:via-purple-800 dark:to-blue-800 rounded-3xl shadow-xl p-8 sm:p-10 lg:p-12 border border-purple-500 dark:border-blue-700 transform transition-all duration-500 hover:shadow-2xl hover:scale-[1.01]">
    <h2 class="text-4xl sm:text-5xl font-extrabold text-center mb-10 bg-clip-text text-transparent bg-gradient-to-r from-teal-300 via-pink-300 to-lime-300 dark:from-teal-400 dark:via-pink-400 dark:to-lime-400 drop-shadow-lg animate-pulse-light">
      Patient Registration Form
    </h2>

    <form class="space-y-8">
      <!-- Personal Information Section -->
      <fieldset class="border-t-2 border-b-2 border-indigo-400 dark:border-teal-600 pt-6 pb-8 space-y-6">
        <legend class="text-2xl sm:text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-lime-300 to-pink-300 dark:from-lime-400 dark:to-pink-400 px-3 -mt-6 ml-4 drop-shadow-md">Personal Information</legend>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label for="full-name" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Full Name</label>
            <input type="text" name="full-name" id="full-name" autocomplete="name" placeholder="John Doe" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
          </div>
          <div>
            <label for="dob" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Date of Birth</label>
            <input type="date" name="dob" id="dob" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
          </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label for="email" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Email Address</label>
            <input type="email" name="email" id="email" autocomplete="email" placeholder="[email protected]" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
          </div>
          <div>
            <label for="phone" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Phone Number</label>
            <input type="tel" name="phone" id="phone" autocomplete="tel" placeholder="(123) 456-7890" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
          </div>
        </div>

        <div>
          <label for="address" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Street Address</label>
          <input type="text" name="address" id="address" autocomplete="street-address" placeholder="123 Main St" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
          <div>
            <label for="city" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">City</label>
            <input type="text" name="city" id="city" autocomplete="address-level2" placeholder="Anytown" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
          </div>
          <div>
            <label for="state" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">State</label>
            <input type="text" name="state" id="state" autocomplete="address-level1" placeholder="CA" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
          </div>
          <div>
            <label for="zip" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">ZIP Code</label>
            <input type="text" name="zip" id="zip" autocomplete="postal-code" placeholder="90210" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
          </div>
        </div>
      </fieldset>

      <!-- Medical History Section -->
      <fieldset class="border-t-2 border-b-2 border-indigo-400 dark:border-teal-600 pt-6 pb-8 space-y-6">
        <legend class="text-2xl sm:text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-lime-300 to-pink-300 dark:from-lime-400 dark:to-pink-400 px-3 -mt-6 ml-4 drop-shadow-md">Medical History</legend>

        <div>
          <label class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-3">Are you currently taking any medications?</label>
          <div class="flex flex-wrap gap-x-6 gap-y-3">
            <div class="flex items-center">
              <input id="meds-yes" name="medications" type="radio" class="h-5 w-5 text-teal-400 dark:text-lime-400 bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
              <label for="meds-yes" class="ml-2 block text-base text-white">Yes</label>
            </div>
            <div class="flex items-center">
              <input id="meds-no" name="medications" type="radio" class="h-5 w-5 text-teal-400 dark:text-lime-400 bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
              <label for="meds-no" class="ml-2 block text-base text-white">No</label>
            </div>
          </div>
        </div>

        <div>
          <label for="past-conditions" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Please list any significant past medical conditions or surgeries:</label>
          <textarea id="past-conditions" name="past-conditions" rows="4" placeholder="e.g., Hypertension, Appendectomy (2010)" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300"></textarea>
        </div>

        <div>
          <label class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-3">Do you have any known allergies?</label>
          <div class="flex flex-wrap gap-x-6 gap-y-3 pb-2">
            <div class="flex items-center">
              <input id="allergies-yes" name="allergies" type="radio" class="h-5 w-5 text-teal-400 dark:text-lime-400 bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
              <label for="allergies-yes" class="ml-2 block text-base text-white">Yes</label>
            </div>
            <div class="flex items-center">
              <input id="allergies-no" name="allergies" type="radio" class="h-5 w-5 text-teal-400 dark:text-lime-400 bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
              <label for="allergies-no" class="ml-2 block text-base text-white">No</label>
            </div>
          </div>
          <textarea id="allergy-details" name="allergy-details" rows="2" placeholder="If yes, please specify (e.g., Penicillin, Peanuts)" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300"></textarea>
        </div>

        <div>
          <label class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-3">Immunization Status (check all that apply):</label>
          <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
            <div class="flex items-center">
              <input id="immunization-flu" name="immunizations[]" type="checkbox" value="flu" class="h-5 w-5 text-teal-400 dark:text-lime-400 rounded bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
              <label for="immunization-flu" class="ml-2 block text-base text-white">Annual Flu Shot</label>
            </div>
            <div class="flex items-center">
              <input id="immunization-tetanus" name="immunizations[]" type="checkbox" value="tetanus" class="h-5 w-5 text-teal-400 dark:text-lime-400 rounded bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
              <label for="immunization-tetanus" class="ml-2 block text-base text-white">Tetanus (last 10 yrs)</label>
            </div>
            <div class="flex items-center">
              <input id="immunization-hpv" name="immunizations[]" type="checkbox" value="hpv" class="h-5 w-5 text-teal-400 dark:text-lime-400 rounded bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
              <label for="immunization-hpv" class="ml-2 block text-base text-white">HPV</label>
            </div>
            <div class="flex items-center">
              <input id="immunization-covid" name="immunizations[]" type="checkbox" value="covid" class="h-5 w-5 text-teal-400 dark:text-lime-400 rounded bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
              <label for="immunization-covid" class="ml-2 block text-base text-white">COVID-19</label>
            </div>
            <div class="flex items-center">
              <input id="immunization-mmr" name="immunizations[]" type="checkbox" value="mmr" class="h-5 w-5 text-teal-400 dark:text-lime-400 rounded bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
              <label for="immunization-mmr" class="ml-2 block text-base text-white">MMR</label>
            </div>
            <div class="flex items-center">
              <input id="immunization-other" name="immunizations[]" type="checkbox" value="other" class="h-5 w-5 text-teal-400 dark:text-lime-400 rounded bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
              <label for="immunization-other" class="ml-2 block text-base text-white mb-2">Other (specify below)</label>
            </div>
          </div>
          <textarea id="immunization-details" name="immunization-details" rows="2" placeholder="Specify other immunizations" class="w-full mt-2 px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300"></textarea>
        </div>
      </fieldset>

      <!-- Emergency Contact Section -->
      <fieldset class="border-t-2 border-b-2 border-emerald-400/50 dark:border-cyan-600/50 pt-6 pb-8 space-y-6">
        <legend class="text-2xl sm:text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-orange-300 to-cyan-300 dark:from-orange-400 dark:to-cyan-400 px-3 -mt-6 ml-4 drop-shadow-md">Emergency Contact</legend>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label for="ec-name" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Full Name</label>
            <input type="text" name="ec-name" id="ec-name" autocomplete="name" placeholder="Jane Doe" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
          </div>
          <div>
            <label for="ec-relationship" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Relationship</label>
            <input type="text" name="ec-relationship" id="ec-relationship" placeholder="Spouse, Parent, Friend" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
          </div>
        </div>
        <div>
          <label for="ec-phone" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Phone Number</label>
          <input type="tel" name="ec-phone" id="ec-phone" autocomplete="tel" placeholder="(987) 654-3210" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
        </div>
      </fieldset>

      <div class="flex justify-end pt-4">
        <button type="submit" class="w-full sm:w-auto px-8 py-4 rounded-xl font-bold text-lg bg-gradient-to-r from-teal-400 to-lime-400 dark:from-sky-400 dark:to-cyan-400 text-zinc-900 shadow-lg hover:from-teal-300 hover:to-lime-300 dark:hover:from-sky-300 dark:hover:to-cyan-300 focus:outline-none focus:ring-4 focus:ring-teal-500/50 dark:focus:ring-cyan-500/50 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 active:scale-95 glow-on-hover">
          Submit Registration
        </button>
      </div>
    </form>
  </div>

  <style>
    @keyframes pulse-light {
      0%, 100% { filter: brightness(1); }
      50% { filter: brightness(1.2); }
    }

    .animate-pulse-light {
      animation: pulse-light 3s infinite ease-in-out;
    }

    .glow-on-hover {
      transition: all 0.3s ease;
      position: relative;
      z-index: 1;
    }

    .glow-on-hover::before {
      content: '';
      background: linear-gradient(45deg, #00C9FF, #92FE9D, #00FFC0, #FFD700, #FF4500, #FF0077, #FF00C1, #A020F0, #00C9FF);
      position: absolute;
      top: -2px;
      left: -2px;
      background-size: 400%;
      z-index: -1;
      filter: blur(8px);
      width: calc(100% + 4px);
      height: calc(100% + 4px);
      animation: glowing 20s linear infinite;
      opacity: 0;
      transition: opacity .3s ease-in-out;
      border-radius: 20px;
    }

    .glow-on-hover:active {
      color: #000
    }

    .glow-on-hover:active:after {
      background: transparent;
    }

    .glow-on-hover:hover:before {
      opacity: 1;
    }

    .glow-on-hover::after {
      z-index: -1;
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: inherit; /* inherit the background of the button */
      left: 0;
      top: 0;
      border-radius: inherit;
    }

    @keyframes glowing {
      0% { background-position: 0 0; }
      50% { background-position: 400% 0; }
      100% { background-position: 0 0; }
    }
  </style>
</div>

3D_Education_Form_Component

교육용 플랫폼을 위한 반응형 고대비 3D에서 영감을 받은 양식 구성 요소로, 다크 모드를 지원합니다.

열다 미리 보기

                <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>

Forms 구성 요소

여러 색상의 그라데이션 배경과 부드러운 전환이 있는 복잡하고 반응이 빠른 양식 구성 요소로, 기술/SaaS 애플리케이션에 적합합니다. 다크 모드 지원 및 대화형 요소가 포함되어 있습니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 dark:from-gray-900 dark:via-blue-900 dark:to-purple-900 transition-all duration-500 ease-in-out">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-700 ease-in-out hover:scale-[1.01] hover:shadow-3xl border-2 border-transparent dark:border-gray-700
              bg-gradient-to-br from-white via-white to-white
              dark:from-gray-800 dark:via-gray-800 dark:to-gray-800
              sm:hover:border-purple-300 sm:dark:hover:border-blue-500">

    <div class="relative p-8 md:p-12 text-center text-white
                bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500
                dark:from-gray-700 dark:via-gray-800 dark:to-gray-900
                transition-all duration-700 ease-in-out">
      <div class="absolute inset-0 bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 opacity-20 dark:from-gray-600 dark:via-gray-700 dark:to-gray-800 transition-opacity duration-700 ease-in-out"></div>
      <h2 class="relative text-3xl md:text-4xl font-extrabold mb-2 leading-tight tracking-tight drop-shadow-lg">Sign Up for Our Service</h2>
      <p class="relative text-lg md:text-xl font-medium opacity-90">Unlock a world of possibilities.</p>
      <div class="absolute -bottom-4 left-1/2 transform -translate-x-1/2 w-24 h-2 rounded-full
                  bg-gradient-to-r from-yellow-300 via-green-400 to-blue-500
                  dark:from-cyan-400 dark:via-sky-500 dark:to-indigo-600 transition-all duration-700 ease-in-out"></div>
    </div>

    <form class="p-6 md:p-10 space-y-6 md:space-y-8">
      <!-- Full Name Field -->
      <div>
        <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 transition-colors duration-300">Full Name</label>
        <input type="text" id="full-name" name="full-name" placeholder="John Doe"
               class="w-full px-4 py-3 rounded-lg border-2 border-gray-300 dark:border-gray-600
                      focus:outline-none focus:ring-4 focus:ring-opacity-50
                      focus:border-purple-500 focus:ring-purple-200
                      dark:bg-gray-700 dark:text-gray-200 dark:focus:border-blue-500 dark:focus:ring-blue-800
                      transition-all duration-300 ease-in-out placeholder-gray-400 dark:placeholder-gray-500">
      </div>

      <!-- Email Field -->
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 transition-colors duration-300">Email Address</label>
        <input type="email" id="email" name="email" placeholder="[email protected]"
               class="w-full px-4 py-3 rounded-lg border-2 border-gray-300 dark:border-gray-600
                      focus:outline-none focus:ring-4 focus:ring-opacity-50
                      focus:border-pink-500 focus:ring-pink-200
                      dark:bg-gray-700 dark:text-gray-200 dark:focus:border-cyan-500 dark:focus:ring-cyan-800
                      transition-all duration-300 ease-in-out placeholder-gray-400 dark:placeholder-gray-500">
      </div>

      <!-- Password Field -->
      <div>
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 transition-colors duration-300">Password</label>
        <input type="password" id="password" name="password" placeholder="Minimum 8 characters"
               class="w-full px-4 py-3 rounded-lg border-2 border-gray-300 dark:border-gray-600
                      focus:outline-none focus:ring-4 focus:ring-opacity-50
                      focus:border-yellow-500 focus:ring-yellow-200
                      dark:bg-gray-700 dark:text-gray-200 dark:focus:border-green-500 dark:focus:ring-green-800
                      transition-all duration-300 ease-in-out placeholder-gray-400 dark:placeholder-gray-500">
      </div>

      <!-- Service Tier Selection (Radio Buttons) -->
      <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3 transition-colors duration-300">Choose Your Tier</label>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <label class="flex items-center p-4 rounded-lg border-2 border-gray-300 dark:border-gray-600
                        cursor-pointer hover:border-blue-500 dark:hover:border-purple-500
                        transition-all duration-300 ease-in-out
                        has-[:checked]:bg-blue-50 has-[:checked]:border-blue-500 has-[:checked]:ring-1 has-[:checked]:ring-blue-500
                        dark:has-[:checked]:bg-gray-700 dark:has-[:checked]:border-purple-500 dark:has-[:checked]:ring-1 dark:has-[:checked]:ring-purple-500">
            <input type="radio" name="service-tier" value="basic" class="h-5 w-5 text-blue-600 dark:text-purple-600 border-gray-300 dark:border-gray-600 focus:ring-blue-500 dark:focus:ring-purple-500 transition-colors duration-300">
            <div class="ml-3">
              <span class="block text-sm font-medium text-gray-800 dark:text-gray-200">Basic</span>
              <span class="block text-xs text-gray-500 dark:text-gray-400">Essential features for new users.</span>
            </div>
          </label>
          <label class="flex items-center p-4 rounded-lg border-2 border-gray-300 dark:border-gray-600
                        cursor-pointer hover:border-teal-500 dark:hover:border-pink-500
                        transition-all duration-300 ease-in-out
                        has-[:checked]:bg-teal-50 has-[:checked]:border-teal-500 has-[:checked]:ring-1 has-[:checked]:ring-teal-500
                        dark:has-[:checked]:bg-gray-700 dark:has-[:checked]:border-pink-500 dark:has-[:checked]:ring-1 dark:has-[:checked]:ring-pink-500">
            <input type="radio" name="service-tier" value="premium" class="h-5 w-5 text-teal-600 dark:text-pink-600 border-gray-300 dark:border-gray-600 focus:ring-teal-500 dark:focus:ring-pink-500 transition-colors duration-300">
            <div class="ml-3">
              <span class="block text-sm font-medium text-gray-800 dark:text-gray-200">Premium</span>
              <span class="block text-xs text-gray-500 dark:text-gray-400">Advanced tools for growing teams.</span>
            </div>
          </label>
        </div>
      </div>

      <!-- Terms and Conditions Checkbox -->
      <div class="flex items-center">
        <input id="terms" name="terms" type="checkbox"
               class="h-5 w-5 rounded border-gray-300 text-purple-600 focus:ring-purple-500
                      dark:border-gray-600 dark:bg-gray-700 dark:text-indigo-600 dark:focus:ring-indigo-500
                      transition-colors duration-300">
        <label for="terms" class="ml-3 block text-sm text-gray-900 dark:text-gray-300 transition-colors duration-300">
          I agree to the
          <a href="#" class="font-medium text-purple-600 hover:text-purple-700 dark:text-indigo-500 dark:hover:text-indigo-600 transition-colors duration-300">Terms of Service</a>
          and
          <a href="#" class="font-medium text-purple-600 hover:text-purple-700 dark:text-indigo-500 dark:hover:text-indigo-600 transition-colors duration-300">Privacy Policy</a>.
        </label>
      </div>

      <!-- Submit Button -->
      <button type="submit"
              class="w-full flex justify-center py-3 px-6 rounded-lg
                     text-white font-semibold text-lg
                     bg-gradient-to-r from-green-500 via-blue-500 to-indigo-600
                     hover:from-green-600 hover:via-blue-600 hover:to-indigo-700
                     dark:from-cyan-600 dark:via-blue-600 dark:to-purple-700
                     dark:hover:from-cyan-700 dark:hover:via-blue-700 dark:hover:to-purple-800
                     focus:outline-none focus:ring-4 focus:ring-offset-2
                     focus:ring-green-300 dark:focus:ring-cyan-500
                     transform transition-all duration-300 ease-in-out hover:scale-105 active:scale-95 shadow-lg drop-shadow-md">
        Create Account
      </button>

      <!-- Login Link -->
      <p class="mt-6 text-center text-gray-600 dark:text-gray-400 transition-colors duration-300">
        Already have an account?
        <a href="#" class="font-medium text-blue-600 hover:text-blue-700 dark:text-sky-500 dark:hover:text-sky-600 transition-colors duration-300">Sign In</a>
      </p>
    </form>
  </div>
</div>

Brutalism_Music_Audio_Form

사탕/달콤한 색 구성표를 가진 음악/오디오 플랫폼을 위한 복잡하고 브루탈리즘 스타일의 형태로, 다양한 입력 유형, 다크 모드 지원 및 완전한 응답성을 특징으로 합니다.

열다 미리 보기

                <div class="min-h-screen bg-[#FFF0F5] dark:bg-[#1A001A] p-4 sm:p-8 font-sans transition-colors duration-300">
  <div class="max-w-4xl mx-auto border-4 border-black dark:border-white shadow-[8px_8px_0_0_#9D00FC] dark:shadow-[8px_8px_0_0_#0FFF00] bg-[#FFC0CB] dark:bg-[#4B0082] p-6 sm:p-10 relative overflow-hidden">
    <div class="absolute top-0 left-0 w-24 h-24 bg-[#00FFFF] dark:bg-[#FFD700] transform -translate-x-12 -translate-y-12 rotate-45 border-4 border-black dark:border-white"></div>
    <div class="absolute bottom-0 right-0 w-32 h-32 bg-[#FF1493] dark:bg-[#00BFFF] transform translate-x-16 translate-y-16 -rotate-30 border-4 border-black dark:border-white"></div>

    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-black dark:text-white mb-4 sm:mb-6 leading-tight select-none uppercase tracking-wide border-b-4 border-black dark:border-white pb-2">
      <span class="block transform -rotate-2 inline-block bg-[#00FFFF] dark:bg-[#FFD700] px-3 py-1 mr-2">AUDIO</span> UPLOAD
    </h1>
    <p class="text-lg sm:text-xl text-black dark:text-white mb-8 select-none font-bold italic ">
      Unleash your sound, now on our platform. Brutally simple. Sweetly effective.
    </p>

    <form class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8">
      <div class="mb-4 col-span-full md:col-span-1">
        <label for="song-title" class="block text-black dark:text-white text-lg sm:text-xl font-bold mb-2 uppercase tracking-wider select-none">
          Song / Track Title
        </label>
        <input type="text" id="song-title" name="song-title" placeholder="e.g., 'Synthwave Dreamscape'" class="w-full p-3 sm:p-4 bg-[#A3EAAA] dark:bg-[#2F4F4F] text-black dark:text-white border-4 border-black dark:border-white shadow-[4px_4px_0_0_#FF69B4] dark:shadow-[4px_4px_0_0_#00FFFF] focus:outline-none focus:border-[#9D00FC] dark:focus:border-[#0FFF00] transition-all duration-200 placeholder-black dark:placeholder-white::placeholder text-lg sm:text-xl font-mono">
      </div>

      <div class="mb-4 col-span-full md:col-span-1">
        <label for="artist-name" class="block text-black dark:text-white text-lg sm:text-xl font-bold mb-2 uppercase tracking-wider select-none">
          Artist / Band Name
        </label>
        <input type="text" id="artist-name" name="artist-name" placeholder="e.g., 'Neon Echoes'" class="w-full p-3 sm:p-4 bg-[#A3EAAA] dark:bg-[#2F4F4F] text-black dark:text-white border-4 border-black dark:border-white shadow-[4px_4px_0_0_#FF69B4] dark:shadow-[4px_4px_0_0_#00FFFF] focus:outline-none focus:border-[#9D00FC] dark:focus:border-[#0FFF00] transition-all duration-200 placeholder-black dark:placeholder-white::placeholder text-lg sm:text-xl font-mono">
      </div>

      <div class="mb-4 col-span-full">
        <label for="genre" class="block text-black dark:text-white text-lg sm:text-xl font-bold mb-2 uppercase tracking-wider select-none">
          Genre
        </label>
        <select id="genre" name="genre" class="w-full p-3 sm:p-4 bg-[#A3EAAA] dark:bg-[#2F4F4F] text-black dark:text-white border-4 border-black dark:border-white shadow-[4px_4px_0_0_#FF69B4] dark:shadow-[4px_4px_0_0_#00FFFF] focus:outline-none focus:border-[#9D00FC] dark:focus:border-[#0FFF00] transition-all duration-200 text-lg sm:text-xl font-mono appearance-none pr-8 bg-no-repeat bg-[length:24px_24px] bg-[right_1rem_center] bg-[url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>')] dark:bg-[url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>')]" style="background-image:
          url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');">
          <option value="">Select a genre...</option>
          <option value="electronic">Electronic</option>
          <option value="rock">Rock</option>
          <option value="hip-hop">Hip-Hop</option>
          <option value="pop">Pop</option>
          <option value="classical">Classical</option>
          <option value="jazz">Jazz</option>
          <option value="ambient">Ambient</option>
          <option value="synthwave">Synthwave</option>
          <option value="vaporwave">Vaporwave</option>
          <option value="other">Other</option>
        </select>
      </div>

      <div class="mb-4 col-span-full">
        <label for="description" class="block text-black dark:text-white text-lg sm:text-xl font-bold mb-2 uppercase tracking-wider select-none">
          Track Description\u00a0<span class="text-[#9D00FC] dark:text-[#0FFF00] text-sm italic">(Max 500 chars)</span>
        </label>
        <textarea id="description" name="description" rows="5" maxlength="500" placeholder="Tell us about your track: its mood, inspiration, or how it was made..." class="w-full p-3 sm:p-4 bg-[#A3EAAA] dark:bg-[#2F4F4F] text-black dark:text-white border-4 border-black dark:border-white shadow-[4px_4px_0_0_#FF69B4] dark:shadow-[4px_4px_0_0_#00FFFF] focus:outline-none focus:border-[#9D00FC] dark:focus:border-[#0FFF00] transition-all duration-200 placeholder-black dark:placeholder-white::placeholder text-lg sm:text-xl font-mono resize-y"></textarea>
      </div>

      <div class="mb-4 col-span-full">
        <label for="album-art" class="block text-black dark:text-white text-lg sm:text-xl font-bold mb-2 uppercase tracking-wider select-none">
          Album Art\u00a0<span class="text-[#9D00FC] dark:text-[#0FFF00] text-sm italic">(PNG, JPG, max 5MB)</span>
        </label>
        <div class="flex flex-col sm:flex-row items-center gap-4">
          <input type="file" id="album-art" name="album-art" accept="image/png, image/jpeg" class="hidden" onchange="document.getElementById('album-art-name').innerText = this.files[0] ? this.files[0].name : 'No file chosen'">
          <label for="album-art" class="inline-block px-6 py-3 sm:py-4 bg-[#FFD700] dark:bg-[#50C878] text-black dark:text-white text-lg sm:text-xl font-bold uppercase cursor-pointer border-4 border-black dark:border-white shadow-[4px_4px_0_0_#FF1493] dark:shadow-[4px_4px_0_0_#00BFFF] hover:shadow-[6px_6px_0_0_#FF1493] dark:hover:shadow-[6px_6px_0_0_#00BFFF] hover:bg-[#FFC0CB] dark:hover:bg-[#4B0082] transition-all duration-200 select-none">
            Choose File
          </label>
          <span id="album-art-name" class="text-black dark:text-white text-lg sm:text-xl font-mono">No file chosen</span>
        </div>
      </div>

      <div class="mb-4 col-span-full">
        <label for="audio-file" class="block text-black dark:text-white text-lg sm:text-xl font-bold mb-2 uppercase tracking-wider select-none">
          Audio File\u00a0<span class="text-[#9D00FC] dark:text-[#0FFF00] text-sm italic">(MP3, WAV, max 50MB)</span>
        </label>
        <div class="flex flex-col sm:flex-row items-center gap-4">
          <input type="file" id="audio-file" name="audio-file" accept="audio/mpeg, audio/wav" class="hidden" onchange="document.getElementById('audio-file-name').innerText = this.files[0] ? this.files[0].name : 'No file chosen'">
          <label for="audio-file" class="inline-block px-6 py-3 sm:py-4 bg-[#00FFFF] dark:bg-[#FFD700] text-black dark:text-white text-lg sm:text-xl font-bold uppercase cursor-pointer border-4 border-black dark:border-white shadow-[4px_4px_0_0_#9D00FC] dark:shadow-[4px_4px_0_0_#0FFF00] hover:shadow-[6px_6px_0_0_#9D00FC] dark:hover:shadow-[6px_6px_0_0_#0FFF00] hover:bg-[#A3EAAA] dark:hover:bg-[#2F4F4F] transition-all duration-200 select-none">
            Upload Audio
          </label>
          <span id="audio-file-name" class="text-black dark:text-white text-lg sm:text-xl font-mono">No file chosen</span>
        </div>
      </div>

      <div class="mb-4 col-span-full flex flex-col sm:flex-row items-start sm:items-center gap-4">
        <input type="checkbox" id="explicit" name="explicit" class="hidden peer">
        <label for="explicit" class="relative flex items-center justify-center p-1 w-8 h-8 sm:w-10 sm:h-10 border-4 border-black dark:border-white bg-[#A3EAAA] dark:bg-[#2F4F4F] shadow-[4px_4px_0_0_#FF69B4] dark:shadow-[4px_4px_0_0_#00FFFF] cursor-pointer peer-checked:bg-[#FF1493] dark:peer-checked:bg-[#00BFFF] transition-all duration-200 overflow-hidden">
          <span class="absolute text-3xl sm:text-4xl text-black dark:text-white transform scale-0 peer-checked:scale-100 transition-transform duration-200 ease-out leading-none pointer-events-none -mt-1">\u2713</span>
        </label>
        <label for="explicit" class="text-black dark:text-white text-lg sm:text-xl font-bold uppercase cursor-pointer select-none">
          Contains Explicit Content
        </label>
      </div>

      <div class="mb-4 col-span-full flex flex-col sm:flex-row items-start sm:items-center gap-4">
        <input type="checkbox" id="terms" name="terms" class="hidden peer">
        <label for="terms" class="relative flex items-center justify-center p-1 w-8 h-8 sm:w-10 sm:h-10 border-4 border-black dark:border-white bg-[#FFD700] dark:bg-[#50C878] shadow-[4px_4px_0_0_#FF1493] dark:shadow-[4px_4px_0_0_#00BFFF] cursor-pointer peer-checked:bg-[#9D00FC] dark:peer-checked:bg-[#0FFF00] transition-all duration-200 overflow-hidden">
          <span class="absolute text-3xl sm:text-4xl text-black dark:text-white transform scale-0 peer-checked:scale-100 transition-transform duration-200 ease-out leading-none pointer-events-none -mt-1">\u2713</span>
        </label>
        <label for="terms" class="text-black dark:text-white text-lg sm:text-xl font-bold uppercase cursor-pointer select-none">
          I agree to the <a href="#" class="underline font-extrabold text-[#FF1493] dark:text-[#00BFFF] hover:text-[#9D00FC] dark:hover:text-[#0FFF00] transition-colors duration-200">Terms of Service</a>
        </label>
      </div>

      <div class="col-span-full mt-4 sm:mt-6">
        <button type="submit" class="w-full px-8 py-4 bg-[#FF69B4] dark:bg-[#00FFFF] text-black dark:text-white text-2xl sm:text-3xl font-extrabold uppercase border-4 border-black dark:border-white shadow-[8px_8px_0_0_#9D00FC] dark:shadow-[8px_8px_0_0_#FFD700] hover:shadow-[12px_12px_0_0_#9D00FC] dark:hover:shadow-[12px_12px_0_0_#FFD700] hover:bg-[#FF1493] dark:hover:bg-[#00BFFF] transition-all duration-200 cursor-pointer active:translate-x-1 active:translate-y-1 active:shadow-[4px_4px_0_0_black] dark:active:shadow-[4px_4px_0_0_white] select-none">
          SUBMIT MY SOUND
        </button>
      </div>
    </form>
  </div>
</div>

유기농/자연에서 영감을 받은 헬스케어 형태

자연스럽고 유려한 디자인, 기업용 파란색 색 구성표 및 다크 모드를 지원하는 단순하고 반응이 빠른 양식 구성 요소로 의료 및 의료 응용 분야에 적합합니다.

열다 미리 보기

                <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-4 sm:p-6 lg:p-8 dark:from-gray-900 dark:to-blue-950 flex items-center justify-center font-sans">
  <div class="max-w-xl w-full bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden md:flex flex-col relative before:absolute before:inset-x-0 before:-top-16 before:h-32 before:bg-gradient-to-br before:from-blue-100 before:to-indigo-200 before:rounded-t-full before:transform before:scale-x-150 before:dark:from-blue-900 before:dark:to-indigo-950 before:opacity-70 dark:text-gray-200">
    <div class="relative px-6 py-8 sm:px-10 sm:py-12 z-10">
      <h2 class="text-3xl font-extrabold text-blue-900 dark:text-blue-200 mb-2 text-center">
        Patient Registration
      </h2>
      <p class="text-blue-700 dark:text-blue-300 text-center mb-8">
        Please fill out the form below to register.
      </p>
      <form class="space-y-6">
        <div>
          <label for="full-name" class="block text-sm font-medium text-blue-800 dark:text-blue-300">
            Full Name
          </label>
          <div class="mt-1">
            <input type="text" id="full-name" name="full-name" placeholder="John Doe" class="appearance-none block w-full px-4 py-3 border border-blue-300 dark:border-blue-700 rounded-xl shadow-sm placeholder-blue-400 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-base transition duration-300 ease-in-out transform hover:scale-[1.01]">
          </div>
        </div>

        <div>
          <label for="email" class="block text-sm font-medium text-blue-800 dark:text-blue-300">
            Email Address
          </label>
          <div class="mt-1">
            <input type="email" id="email" name="email" placeholder="[email protected]" class="appearance-none block w-full px-4 py-3 border border-blue-300 dark:border-blue-700 rounded-xl shadow-sm placeholder-blue-400 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-base transition duration-300 ease-in-out transform hover:scale-[1.01]">
          </div>
        </div>

        <div>
          <label for="phone" class="block text-sm font-medium text-blue-800 dark:text-blue-300">
            Phone Number
          </label>
          <div class="mt-1">
            <input type="tel" id="phone" name="phone" placeholder="(123) 456-7890" class="appearance-none block w-full px-4 py-3 border border-blue-300 dark:border-blue-700 rounded-xl shadow-sm placeholder-blue-400 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-base transition duration-300 ease-in-out transform hover:scale-[1.01]">
          </div>
        </div>

        <div class="flex items-center">
          <input id="terms-privacy" name="terms-privacy" type="checkbox" class="h-5 w-5 text-blue-600 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-300 border-blue-300 dark:border-blue-700 rounded-md transition duration-300 ease-in-out transform hover:scale-110">
          <label for="terms-privacy" class="ml-3 block text-sm text-blue-800 dark:text-blue-300">
            I agree to the <a href="#" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 underline">Privacy Policy</a> and <a href="#" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 underline">Terms of Service</a>.
          </label>
        </div>

        <div>
          <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-xl shadow-sm text-lg font-semibold text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 dark:focus:ring-blue-600 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-[1.015]">
            Register Patient
          </button>
        </div>
      </form>
    </div>
  </div>
</div>