Tailwind CSS Fieldset Components

                            <div class="p-6 space-y-4 bg-white rounded-lg">
  <!-- Styled Fieldset with Background and Border -->
  <fieldset class="w-full bg-gray-100 border border-gray-300 rounded-lg p-4">
    <legend class="px-2 text-lg font-medium text-gray-900">Page title</legend>
    <input 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="My awesome page" />
    <p class="mt-1 text-sm text-gray-500">You can edit page title later on from settings</p>
  </fieldset>
</div> 
                        

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

                            <div class="p-6 space-y-4 bg-white rounded-lg">
  <!-- Fieldset with Multiple Inputs -->
  <fieldset class="w-full bg-gray-100 border border-gray-300 rounded-lg p-4">
    <legend class="px-2 text-lg font-medium text-gray-900">Page details</legend>
    
    <div class="mb-3">
      <label for="title" class="block text-sm font-medium text-gray-700 mb-1">Title</label>
      <input id="title" 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="My awesome page" />
    </div>
    
    <div class="mb-3">
      <label for="slug" class="block text-sm font-medium text-gray-700 mb-1">Slug</label>
      <input id="slug" 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="my-awesome-page" />
    </div>
    
    <div class="mb-3">
      <label for="author" class="block text-sm font-medium text-gray-700 mb-1">Author</label>
      <input id="author" 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="Name" />
    </div>
  </fieldset>
</div> 
                        

                            <div class="p-6 space-y-4 bg-white rounded-lg">
  <!-- Fieldset with Joined Elements -->
  <fieldset class="w-full bg-gray-100 border border-gray-300 rounded-lg p-4">
    <legend class="px-2 text-lg font-medium text-gray-900">Settings</legend>
    
    <div class="flex w-full">
      <input type="text" class="flex-grow px-3 py-2 text-gray-700 bg-white border border-r-0 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Product name" />
      <button class="px-4 py-2 text-white bg-blue-600 border border-blue-600 rounded-r-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Save</button>
    </div>
  </fieldset>
</div>
                        

                            <div class="p-6 space-y-4 bg-white rounded-lg">
  <!-- Login Form with Fieldset -->
  <fieldset class="w-full bg-gray-100 border border-gray-300 rounded-lg p-4">
    <legend class="px-2 text-lg font-medium text-gray-900">Login</legend>
    
    <div class="mb-3">
      <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
      <input id="email" 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" />
    </div>
    
    <div class="mb-4">
      <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
      <input id="password" type="password" 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="Password" />
    </div>
    
    <button class="w-full px-4 py-2 text-white bg-gray-800 rounded-md hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">Login</button>
  </fieldset>
</div> 
                        

                            <div class="p-6 space-y-4 bg-white rounded-lg">
  <!-- Basic Fieldset -->
  <fieldset class="w-full">
    <legend class="text-lg font-medium text-gray-900 mb-2">Page title</legend>
    <input type="text" class="w-full px-3 py-2 text-gray-700 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="My awesome page" />
    <p class="mt-1 text-sm text-gray-500">You can edit page title later on from settings</p>
  </fieldset>
</div>