Small Inputs

Simple on gray background

<div class="mb-3 pt-0">
  <input type="text" placeholder="Placeholder" class="px-2 py-1 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-sm border-0 shadow outline-none focus:outline-none focus:ring w-full"/>
</div>

With left icon on gray background

<div class="relative flex w-full flex-wrap items-stretch mb-3">
  <span class="z-10 h-full leading-snug font-normal absolute text-center text-blueGray-300 absolute bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3">
    <i class="fas fa-lock"></i>
  </span>
  <input type="text" placeholder="Placeholder" class="px-2 py-1 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-sm border-0 shadow outline-none focus:outline-none focus:ring w-full pl-10"/>
</div>

With right icon on gray background

<div class="relative flex w-full flex-wrap items-stretch mb-3">
  <input type="text" placeholder="Placeholder" class="px-2 py-1 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-sm border-0 shadow outline-none focus:outline-none focus:ring w-full pr-10"/>
  <span class="z-10 h-full leading-snug font-normal absolute text-center text-blueGray-300 absolute bg-transparent rounded text-base items-center justify-center w-8 right-0 pr-2 py-1">
    <i class="fas fa-user"></i>
  </span>
</div>

Simple on white background

<div class="mb-3 pt-0">
  <input type="text" placeholder="Placeholder" class="px-2 py-1 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-sm border border-blueGray-300 outline-none focus:outline-none focus:ring w-full"/>
</div>

With left icon on white background

<div class="relative flex w-full flex-wrap items-stretch mb-3">
  <span class="z-10 h-full leading-snug font-normal absolute text-center text-blueGray-300 absolute bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3">
    <i class="fas fa-lock"></i>
  </span>
  <input type="text" placeholder="Placeholder" class="px-2 py-1 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-sm border border-blueGray-300 outline-none focus:outline-none focus:ring w-full pl-10"/>
</div>

With right icon on white background

<div class="relative flex w-full flex-wrap items-stretch mb-3">
  <input type="text" placeholder="Placeholder" class="px-2 py-1 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-sm border border-blueGray-300 outline-none focus:outline-none focus:ring w-full pr-10"/>
  <span class="z-10 h-full leading-snug font-normal absolute text-center text-blueGray-300 absolute bg-transparent rounded text-base items-center justify-center w-8 right-0 pr-2 py-1">
    <i class="fas fa-user"></i>
  </span>
</div>