Fieldset Responsive

                    <div class="p-6 space-y-4 bg-white rounded-lg">
  <!-- Responsive Fieldset -->
  <fieldset class="w-full bg-gray-100 border border-gray-300 rounded-lg p-4">
    <legend class="px-2 text-base sm:text-lg font-medium text-gray-900">Contact Information</legend>
    
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-3">
      <div>
        <label for="first-name" class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
        <input id="first-name" type="text" class="w-full px-3 py-2 text-gray-700 bg-white border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="First name" />
      </div>
      
      <div>
        <label for="last-name" class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
        <input id="last-name" type="text" class="w-full px-3 py-2 text-gray-700 bg-white border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Last name" />
      </div>
    </div>
    
    <div class="mb-3">
      <label for="email-address" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
      <input id="email-address" type="email" class="w-full px-3 py-2 text-gray-700 bg-white border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Email address" />
    </div>
    
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
      <div>
        <label for="city" class="block text-sm font-medium text-gray-700 mb-1">City</label>
        <input id="city" type="text" class="w-full px-3 py-2 text-gray-700 bg-white border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="City" />
      </div>
      
      <div>
        <label for="state" class="block text-sm font-medium text-gray-700 mb-1">State</label>
        <input id="state" type="text" class="w-full px-3 py-2 text-gray-700 bg-white border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="State" />
      </div>
      
      <div class="sm:col-span-2 lg:col-span-1">
        <label for="zip" class="block text-sm font-medium text-gray-700 mb-1">ZIP Code</label>
        <input id="zip" type="text" class="w-full px-3 py-2 text-gray-700 bg-white border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="ZIP code" />
      </div>
    </div>
  </fieldset>
</div>