Input Suffix

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Input with Icon Suffix -->
    <div class="space-y-2">
      <label for="password-icon-input" class="block text-sm font-medium text-gray-700">Password</label>
      <div class="relative">
        <input type="password" id="password-icon-input" placeholder="Enter your password" 
          class="w-full pr-10 pl-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 class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
          <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
          </svg>
        </div>
      </div>
    </div>

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

    <!-- Input with Button Suffix -->
    <div class="space-y-2">
      <label for="verification-input" class="block text-sm font-medium text-gray-700">Verification Code</label>
      <div class="flex rounded-md shadow-sm">
        <input type="text" id="verification-input" placeholder="6-digit code" 
          class="flex-1 px-4 py-2 bg-white border border-r-0 border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
        <button type="button" class="inline-flex items-center px-4 py-2 border border-l-0 border-gray-300 rounded-r-md bg-blue-50 text-blue-600 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
          Send
        </button>
      </div>
      <p class="text-sm text-gray-500">Enter the code sent to your phone</p>
    </div>

    <!-- Input with Static Badge Suffix -->
    <div class="space-y-2">
      <label for="username-input" class="block text-sm font-medium text-gray-700">Username</label>
      <div class="flex rounded-md shadow-sm">
        <input type="text" id="username-input" placeholder="Enter username" 
          class="flex-1 px-4 py-2 bg-white border border-r-0 border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
        <span class="inline-flex items-center px-3 py-2 rounded-r-md border border-l-0 border-gray-300 bg-green-50 text-green-700 text-sm font-medium">
          Available
        </span>
      </div>
    </div>
  </div>
</section>