input groups #01

<div class="flex justify-center w-full max-w-sm px-12 py-48 mx-auto">
  <div class="w-full">
    <div class="w-full">
      <div class="flex justify-between items-baseline mb-1">
        <label for="Domain" class="font-medium text-base-500 text-sm"
          >Domain (Prefix)</label
        >
      </div>
      <div class="relative z-0 focus-within:z-10">
        <span
          class="absolute inset-y-0 left-0 flex items-center pl-3 select-none text-base-400"
          >https://</span
        ><input
          placeholder="yourdomain.com"
          id="Domain"
          name="Domain"
          type="text"
          class="w-full block transition duration-300 ease-in-out leading-tight align-middle focus:z-10 pl-20 h-10 px-4 py-2 text-sm rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md bg-white border border-transparent text-base-500 ring-1 ring-base-200 placeholder-base-400 focus:border-blue-500 focus:ring-accent-100 focus:ring-2 focus:outline-none shadow-sm"
        />
      </div>
    </div>
  </div>
</div>