Input Prefix

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Input with Icon Prefix -->
    <div class="space-y-2">
      <label for="email-icon-input" class="block text-sm font-medium text-gray-700">Email Address</label>
      <div class="relative">
        <div class="absolute inset-y-0 left-0 pl-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 d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
            <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
          </svg>
        </div>
        <input type="email" id="email-icon-input" placeholder="[email protected]" 
          class="w-full pl-10 pr-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>
    </div>

    <!-- Input with Text Prefix -->
    <div class="space-y-2">
      <label for="url-prefix-input" class="block text-sm font-medium text-gray-700">Website URL</label>
      <div class="flex rounded-md shadow-sm">
        <span class="inline-flex items-center px-3 py-2 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">
          https://
        </span>
        <input type="text" id="url-prefix-input" placeholder="example.com" 
          class="flex-1 px-4 py-2 bg-white border border-gray-300 rounded-r-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
      </div>
    </div>

    <!-- Input with Currency Prefix -->
    <div class="space-y-2">
      <label for="price-prefix-input" class="block text-sm font-medium text-gray-700">Price</label>
      <div class="flex rounded-md shadow-sm">
        <span class="inline-flex items-center px-3 py-2 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">
          $
        </span>
        <input type="number" step="0.01" min="0" id="price-prefix-input" placeholder="0.00" 
          class="flex-1 px-4 py-2 bg-white border border-gray-300 rounded-r-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
      </div>
    </div>

    <!-- Input with Button Prefix -->
    <div class="space-y-2">
      <label for="search-prefix-input" class="block text-sm font-medium text-gray-700">Search</label>
      <div class="flex rounded-md shadow-sm">
        <button type="button" class="inline-flex items-center px-3 py-2 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 hover:bg-gray-100">
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
          </svg>
        </button>
        <input type="text" id="search-prefix-input" placeholder="Search..." 
          class="flex-1 px-4 py-2 bg-white border border-gray-300 rounded-r-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
      </div>
    </div>
  </div>
</section>