<div class="bg-white p-4 rounded-lg max-w-[400px] border-2 border-gray-300">
  <label class="text-blue-400 text-lg font-semibold"> URL </label>
  <div class="relative mt-2 max-w-xs text-gray-500">
    <div
      class="absolute inset-y-0 left-3 my-auto h-6 flex items-center border-r pr-2 bg-white"
    >
      <select
        class="text-md outline-none rounded-lg h-full px-2 cursor-pointer font-semibold tracking-wide bg-transparent"
      >
        <option
          value="https://"
          label="https://"
          class="cursor-pointer bg-transparent text-gray-500 hover:text-white font-semibold tracking-wide"
        ></option>
        <option
          value="http://"
          label="http://"
          class="cursor-pointer bg-white text-gray-500 hover:text-white font-semibold"
        ></option>
      </select>
    </div>
    <input
      class="font-semibold tracking-wide w-full pl-[8rem] pr-3 py-2 appearance-none bg-transparent outline-none border focus:border-blue-400 focus:ring-1 focus:ring-inset focus:ring-blue-400 shadow-sm rounded-lg"
      placeholder="example.com"
      type="text"
    />
  </div>
</div>