Progress Indicators 구성 요소

<div class="p-4 sm:p-8 md:p-12 bg-gradient-to-br from-gray-50 to-gray-200 dark:from-gray-900 dark:to-gray-800 min-h-screen font-sans text-gray-800 dark:text-gray-200 flex items-center justify-center">
  <div class="w-full max-w-5xl bg-white dark:bg-gray-850 shadow-xl rounded-xl p-6 sm:p-8 md:p-10 border border-gray-200 dark:border-gray-700 overflow-hidden">

    <h2 class="text-2xl sm:text-3xl md:text-4xl font-extrabold text-center mb-6 sm:mb-8 md:mb-10 text-gray-900 dark:text-gray-100 leading-tight">
      Application Progress Tracker
    </h2>

    <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6 mb-8 sm:mb-10 md:mb-12">
      <!-- Step Navigation -->
      <div class="flex flex-col sm:flex-row lg:flex-col items-center lg:items-start w-full lg:w-auto mb-6 lg:mb-0">
        <div class="flex flex-wrap justify-center sm:justify-start lg:block space-x-2 sm:space-x-4 lg:space-x-0 lg:space-y-4 mb-4 lg:mb-0">
          <a href="#" class="flex items-center text-sm sm:text-base font-medium rounded-full px-4 py-2 transition-all duration-300 
            bg-blue-600/10 text-blue-700 dark:bg-blue-400/20 dark:text-blue-300 shadow-sm hover:underline">
            <svg class="w-4 h-4 mr-2 hidden sm:block" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            <span class="block">Step 1: Personal Details</span>
          </a>
          <a href="#" class="flex items-center text-sm sm:text-base font-medium rounded-full px-4 py-2 transition-all duration-300 
            bg-blue-500/5 text-blue-600 dark:bg-gray-700/50 dark:text-gray-400 hover:text-blue-700 dark:hover:text-blue-300 hover:bg-blue-600/10 dark:hover:bg-blue-400/20 shadow-sm">
            <svg class="w-4 h-4 mr-2 hidden sm:block" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span class="block">Step 2: Address Information</span>
          </a>
          <a href="#" class="flex items-center text-sm sm:text-base font-medium rounded-full px-4 py-2 transition-all duration-300 
            bg-gray-100 dark:bg-gray-750 text-gray-500 dark:text-gray-400 cursor-not-allowed">
            <svg class="w-4 h-4 mr-2 hidden sm:block" 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="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span class="block">Step 3: Document Upload</span>
          </a>
          <a href="#" class="flex items-center text-sm sm:text-base font-medium rounded-full px-4 py-2 transition-all duration-300 
            bg-gray-100 dark:bg-gray-750 text-gray-500 dark:text-gray-400 cursor-not-allowed">
            <svg class="w-4 h-4 mr-2 hidden sm:block" 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="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span class="block">Step 4: Review and Submit</span>
          </a>
        </div>
      </div>

      <!-- Overall Progress Bar -->
      <div class="flex-1 w-full lg:w-auto lg:max-w-md">
        <h3 class="text-lg font-semibold mb-2 text-gray-800 dark:text-gray-200 text-center lg:text-left">Overall Progress: 50% Complete</h3>
        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden relative">
          <div class="h-full bg-gradient-to-r from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800 rounded-full transition-all duration-500 ease-out"
               style="width: 50%;">
            <span class="sr-only">50% Complete</span>
          </div>
          <span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-white dark:text-gray-200">50%</span>
        </div>
      </div>
    </div>

    <!-- Current Step Details -->
    <div class="border-t border-gray-200 dark:border-gray-700 pt-6 sm:pt-8">
      <h3 class="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Current Step: Personal Details</h3>
      <p class="text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
        Please provide your basic personal information. All fields are required to proceed to the next step. Your data is securely handled and protected in accordance with government regulations.
      </p>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 md:gap-8 mb-8">
        <div>
          <label for="firstName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">First Name</label>
          <input type="text" id="firstName" name="firstName" placeholder="e.g., John" class="appearance-none block w-full px-4 py-2 sm:py-2.5 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200">
        </div>
        <div>
          <label for="lastName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Last Name</label>
          <input type="text" id="lastName" name="lastName" placeholder="e.g., Doe" class="appearance-none block w-full px-4 py-2 sm:py-2.5 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200">
        </div>
        <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" placeholder="e.g., [email protected]" class="appearance-none block w-full px-4 py-2 sm:py-2.5 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200">
        </div>
        <div>
          <label for="dob" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Date of Birth</label>
          <input type="date" id="dob" name="dob" class="appearance-none block w-full px-4 py-2 sm:py-2.5 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200">
        </div>
      </div>

      <div class="flex justify-end gap-3">
        <button type="button" class="px-6 py-2 sm:py-2.5 rounded-md text-base font-medium 
          bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300 
          hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-300 
          focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-gray-850">
          Save Draft
        </button>
        <button type="button" class="px-6 py-2 sm:py-2.5 rounded-md text-base font-medium 
          bg-gradient-to-r from-blue-500 to-blue-700 text-white dark:from-blue-700 dark:to-blue-900 
          shadow-blue-500/30 hover:from-blue-600 hover:to-blue-800 dark:hover:from-blue-800 dark:hover:to-blue-950 transition-all duration-300 
          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850">
          Next Step
        </button>
      </div>
    </div>
  </div>
</div>