Input Sizes

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Extra Small Input -->
    <div class="space-y-2">
      <label for="xs-input" class="block text-xs font-medium text-gray-700">Extra Small</label>
      <input type="text" id="xs-input" placeholder="XS input" 
        class="w-full px-2 py-1 text-xs bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
    </div>

    <!-- Small Input -->
    <div class="space-y-2">
      <label for="sm-input" class="block text-sm font-medium text-gray-700">Small</label>
      <input type="text" id="sm-input" placeholder="Small input" 
        class="w-full px-2 py-1.5 text-sm bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
    </div>

    <!-- Medium Input (Default) -->
    <div class="space-y-2">
      <label for="md-input" class="block text-sm font-medium text-gray-700">Medium (Default)</label>
      <input type="text" id="md-input" placeholder="Medium input" 
        class="w-full px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
    </div>

    <!-- Large Input -->
    <div class="space-y-2">
      <label for="lg-input" class="block text-base font-medium text-gray-700">Large</label>
      <input type="text" id="lg-input" placeholder="Large input" 
        class="w-full px-4 py-3 text-lg bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
    </div>

    <!-- Extra Large Input -->
    <div class="space-y-2">
      <label for="xl-input" class="block text-lg font-medium text-gray-700">Extra Large</label>
      <input type="text" id="xl-input" placeholder="Extra large input" 
        class="w-full px-5 py-4 text-xl bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
    </div>

    <!-- Responsive Input -->
    <div class="space-y-2">
      <label for="responsive-input" class="block text-sm sm:text-base font-medium text-gray-700">Responsive</label>
      <input type="text" id="responsive-input" placeholder="Responsive input" 
        class="w-full px-2 py-1 text-xs sm:px-3 sm:py-2 sm:text-sm md:px-4 md:py-2 md:text-base lg:px-4 lg:py-3 lg:text-lg bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
      <p class="text-xs sm:text-sm text-gray-500">This input adapts its size to the screen width</p>
    </div>
  </div>
</section>