Tailwind CSS Label Components

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-5">
    <!-- Domain with .com suffix -->
    <div>
      <label for="domain" class="block text-sm font-medium text-gray-700 mb-1">
        Domain Name
      </label>
      <div class="flex rounded-md shadow-sm">
        <input
          type="text"
          id="domain"
          placeholder="example"
          class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-l-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        />
        <span class="inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">
          .com
        </span>
      </div>
    </div>

    <!-- Weight with kg suffix -->
    <div>
      <label for="weight" class="block text-sm font-medium text-gray-700 mb-1">
        Weight
      </label>
      <div class="flex rounded-md shadow-sm">
        <input
          type="number"
          id="weight"
          placeholder="0"
          class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-l-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        />
        <span class="inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">
          kg
        </span>
      </div>
    </div>

    <!-- Username with @twitter suffix -->
    <div>
      <label for="twitter" class="block text-sm font-medium text-gray-700 mb-1">
        Twitter Username
      </label>
      <div class="flex rounded-md shadow-sm">
        <input
          type="text"
          id="twitter"
          placeholder="username"
          class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-l-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        />
        <span class="inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">
          @twitter.com
        </span>
      </div>
      <p class="mt-1 text-xs text-gray-500">
        Enter your username without the @ symbol
      </p>
    </div>
  </div>
</section> 
                        

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-5">
    <!-- URL with https:// prefix -->
    <div>
      <label for="website" class="block text-sm font-medium text-gray-700 mb-1">
        Website
      </label>
      <div class="flex rounded-md shadow-sm">
        <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">
          https://
        </span>
        <input
          type="text"
          id="website"
          placeholder="example.com"
          class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        />
      </div>
    </div>

    <!-- Email input with @ prefix -->
    <div>
      <label for="email-input" class="block text-sm font-medium text-gray-700 mb-1">
        Email Address
      </label>
      <div class="flex rounded-md shadow-sm">
        <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">
          @
        </span>
        <input
          type="text"
          id="email-input"
          placeholder="username"
          class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        />
      </div>
    </div>

    <!-- Price with $ prefix -->
    <div>
      <label for="price-input" class="block text-sm font-medium text-gray-700 mb-1">
        Price
      </label>
      <div class="flex rounded-md shadow-sm">
        <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">
          $
        </span>
        <input
          type="number"
          id="price-input"
          placeholder="0.00"
          class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        />
      </div>
      <p class="mt-1 text-xs text-gray-500">
        Enter the amount in USD
      </p>
    </div>
  </div>
</section> 
                        

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-5">
    <!-- Email Label with Icon -->
    <div>
      <label for="email-icon" class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
        </svg>
        Email Address
      </label>
      <div class="relative">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
          </svg>
        </div>
        <input
          type="email"
          id="email-icon"
          placeholder="[email protected]"
          class="pl-10 block w-full px-3 py-2 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>

    <!-- Password Label with Icon -->
    <div>
      <label for="password-icon" class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
        </svg>
        Password
      </label>
      <div class="relative">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
          </svg>
        </div>
        <input
          type="password"
          id="password-icon"
          placeholder="********"
          class="pl-10 block w-full px-3 py-2 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>

    <!-- Search Label with Icon -->
    <div>
      <label for="search-icon" class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
        Search
      </label>
      <div class="relative">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
        </div>
        <input
          type="text"
          id="search-icon"
          placeholder="Search..."
          class="pl-10 block w-full px-3 py-2 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>

    <!-- Location Label with Icon and Right Icon -->
    <div>
      <label for="location-icon" class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
        </svg>
        Location
      </label>
      <div class="relative">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
          </svg>
        </div>
        <input
          type="text"
          id="location-icon"
          placeholder="Enter your location"
          class="pl-10 pr-10 block w-full px-3 py-2 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 class="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 hover:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
          </svg>
        </div>
      </div>
      <p class="mt-1 text-xs text-gray-500">Click the map icon to use current location</p>
    </div>
  </div>
</section> 
                        

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

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-5">
    <!-- Basic Select with Label -->
    <div>
      <label for="select-country" class="block text-sm font-medium text-gray-700 mb-1">
        Country
      </label>
      <select
        id="select-country"
        class="block w-full px-3 py-2 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"
      >
        <option value="" selected disabled>Select a country</option>
        <option value="us">United States</option>
        <option value="ca">Canada</option>
        <option value="uk">United Kingdom</option>
        <option value="au">Australia</option>
        <option value="jp">Japan</option>
      </select>
    </div>

    <!-- Select with Prefix Label -->
    <div>
      <label for="select-currency" class="block text-sm font-medium text-gray-700 mb-1">
        Currency
      </label>
      <div class="flex rounded-md shadow-sm">
        <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">
          Currency
        </span>
        <select
          id="select-currency"
          class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        >
          <option value="usd">USD ($)</option>
          <option value="eur">EUR (€)</option>
          <option value="gbp">GBP (£)</option>
          <option value="jpy">JPY (¥)</option>
          <option value="cad">CAD ($)</option>
        </select>
      </div>
    </div>

    <!-- Select with Icon Label -->
    <div>
      <label for="select-category" class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
        </svg>
        Category
      </label>
      <div class="relative">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
          </svg>
        </div>
        <select
          id="select-category"
          class="pl-10 block w-full px-3 py-2 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"
        >
          <option value="" selected disabled>Select a category</option>
          <option value="clothing">Clothing</option>
          <option value="electronics">Electronics</option>
          <option value="home">Home & Garden</option>
          <option value="books">Books</option>
          <option value="toys">Toys & Games</option>
        </select>
      </div>
    </div>

    <!-- Select with Helper Text -->
    <div>
      <label for="select-shipping" class="block text-sm font-medium text-gray-700 mb-1">
        Shipping Method
      </label>
      <select
        id="select-shipping"
        class="block w-full px-3 py-2 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"
      >
        <option value="standard">Standard Shipping (3-5 days)</option>
        <option value="express">Express Shipping (1-2 days)</option>
        <option value="overnight">Overnight Shipping (Next day)</option>
        <option value="pickup">Local Pickup (Free)</option>
      </select>
      <p class="mt-1 text-xs text-gray-500">
        Shipping costs will be calculated at checkout
      </p>
    </div>
  </div>
</section> 
                        

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-5">
    <!-- Floating Label for Email -->
    <div class="relative">
      <input
        type="email"
        id="floating-email"
        placeholder=" "
        class="block w-full px-3 py-2.5 pt-4 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 peer"
      />
      <label
        for="floating-email"
        class="absolute text-sm text-gray-500 duration-300 transform -translate-y-3 scale-75 top-3 z-10 origin-[0] left-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-3 peer-focus:text-blue-600"
      >
        Email Address
      </label>
    </div>

    <!-- Floating Label for Username -->
    <div class="relative">
      <input
        type="text"
        id="floating-username"
        placeholder=" "
        class="block w-full px-3 py-2.5 pt-4 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 peer"
      />
      <label
        for="floating-username"
        class="absolute text-sm text-gray-500 duration-300 transform -translate-y-3 scale-75 top-3 z-10 origin-[0] left-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-3 peer-focus:text-blue-600"
      >
        Username
      </label>
    </div>

    <!-- Floating Label for Password -->
    <div class="relative">
      <input
        type="password"
        id="floating-password"
        placeholder=" "
        class="block w-full px-3 py-2.5 pt-4 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 peer"
      />
      <label
        for="floating-password"
        class="absolute text-sm text-gray-500 duration-300 transform -translate-y-3 scale-75 top-3 z-10 origin-[0] left-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-3 peer-focus:text-blue-600"
      >
        Password
      </label>
      <p class="mt-1 text-xs text-gray-500">
        Password must be at least 8 characters long
      </p>
    </div>
  </div>
</section> 
                        

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-lg mx-auto space-y-6">
    <!-- Extra Small Floating Label -->
    <div class="relative">
      <input
        type="text"
        id="floating-xs"
        placeholder=" "
        class="block w-full px-2.5 py-1 pt-3 text-xs border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 peer"
      />
      <label
        for="floating-xs"
        class="absolute text-xs text-gray-500 duration-300 transform -translate-y-2 scale-75 top-1.5 z-10 origin-[0] left-2.5 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-2 peer-focus:text-blue-600"
      >
        Extra Small
      </label>
    </div>

    <!-- Small Floating Label -->
    <div class="relative">
      <input
        type="text"
        id="floating-sm"
        placeholder=" "
        class="block w-full px-3 py-1.5 pt-4 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 peer"
      />
      <label
        for="floating-sm"
        class="absolute text-sm text-gray-500 duration-300 transform -translate-y-2.5 scale-75 top-2 z-10 origin-[0] left-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-2.5 peer-focus:text-blue-600"
      >
        Small
      </label>
    </div>

    <!-- Medium Floating Label (Default) -->
    <div class="relative">
      <input
        type="text"
        id="floating-md"
        placeholder=" "
        class="block w-full px-3 py-2 pt-4.5 text-base border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 peer"
      />
      <label
        for="floating-md"
        class="absolute text-base text-gray-500 duration-300 transform -translate-y-3 scale-75 top-2.5 z-10 origin-[0] left-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-3 peer-focus:text-blue-600"
      >
        Medium (Default)
      </label>
    </div>

    <!-- Large Floating Label -->
    <div class="relative">
      <input
        type="text"
        id="floating-lg"
        placeholder=" "
        class="block w-full px-4 py-2.5 pt-5 text-lg border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 peer"
      />
      <label
        for="floating-lg"
        class="absolute text-lg text-gray-500 duration-300 transform -translate-y-3.5 scale-75 top-3 z-10 origin-[0] left-4 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-3.5 peer-focus:text-blue-600"
      >
        Large
      </label>
    </div>

    <!-- Extra Large Floating Label -->
    <div class="relative">
      <input
        type="text"
        id="floating-xl"
        placeholder=" "
        class="block w-full px-4 py-3 pt-6 text-xl border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 peer"
      />
      <label
        for="floating-xl"
        class="absolute text-xl text-gray-500 duration-300 transform -translate-y-4 scale-75 top-3.5 z-10 origin-[0] left-4 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 peer-focus:text-blue-600"
      >
        Extra Large
      </label>
    </div>
  </div>
</section> 
                        

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

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

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

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

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

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

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-4">
    <div class="space-y-2">
      <label for="username" class="block text-sm font-medium text-gray-700">
        Username
      </label>
      <input
        type="text"
        id="username"
        placeholder="Enter your username"
        class="w-full px-3 py-2 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 class="space-y-2">
      <label for="email" class="block text-sm font-medium text-gray-700">
        Email Address
      </label>
      <input
        type="email"
        id="email"
        placeholder="Enter your email"
        class="w-full px-3 py-2 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 class="space-y-2">
      <label for="password" class="block text-sm font-medium text-gray-700">
        Password
      </label>
      <input
        type="password"
        id="password"
        placeholder="Enter your password"
        class="w-full px-3 py-2 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"
      />
      <p class="mt-1 text-xs text-gray-500">
        Password must be at least 8 characters long
      </p>
    </div>
  </div>
</section>