Label Sizes

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

    <!-- Small Label -->
    <div>
      <label for="sm-input" class="block text-sm font-medium text-gray-700 mb-1">
        Small Label
      </label>
      <input
        type="text"
        id="sm-input"
        placeholder="Small input field"
        class="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
      />
    </div>

    <!-- Medium Label (Default) -->
    <div>
      <label for="md-input" class="block text-base font-medium text-gray-700 mb-1">
        Medium Label (Default)
      </label>
      <input
        type="text"
        id="md-input"
        placeholder="Medium input field"
        class="w-full px-3 py-2 text-base border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
      />
    </div>

    <!-- Large Label -->
    <div>
      <label for="lg-input" class="block text-lg font-medium text-gray-700 mb-1">
        Large Label
      </label>
      <input
        type="text"
        id="lg-input"
        placeholder="Large input field"
        class="w-full px-4 py-2.5 text-lg border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
      />
    </div>

    <!-- Extra Large Label -->
    <div>
      <label for="xl-input" class="block text-xl font-medium text-gray-700 mb-2">
        Extra Large Label
      </label>
      <input
        type="text"
        id="xl-input"
        placeholder="Extra large input field"
        class="w-full px-4 py-3 text-xl border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
      />
    </div>
  </div>
</section>