Large Inputs


Simple on gray background

<div class="mb-3 pt-0">
  <input type="text" placeholder="Placeholder" class="px-3 py-4 placeholder-gray-400 text-gray-700 relative bg-white bg-white rounded text-base shadow outline-none focus:outline-none focus:shadow-outline 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-gray-400 absolute bg-transparent rounded text-lg items-center justify-center w-8 pl-3 py-3">
    <i class="fas fa-lock"></i>
  </span>
  <input type="text" placeholder="Placeholder" class="px-3 py-4 placeholder-gray-400 text-gray-700 relative bg-white bg-white rounded text-base shadow outline-none focus:outline-none focus:shadow-outline 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-3 py-4 placeholder-gray-400 text-gray-700 relative bg-white bg-white rounded text-base shadow outline-none focus:outline-none focus:shadow-outline w-full pr-10"/>
  <span class="z-10 h-full leading-snug font-normal absolute text-center text-gray-400 absolute bg-transparent rounded text-lg items-center justify-center w-8 right-0 pr-3 py-4">
    <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-3 py-4 placeholder-gray-400 text-gray-700 relative bg-white bg-white rounded text-base border border-gray-400 outline-none focus:outline-none focus:shadow-outline 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-normal font-normal absolute text-center text-gray-400 absolute bg-transparent rounded text-lg items-center justify-center w-8 pl-3 py-3">
    <i class="fas fa-lock"></i>
  </span>
  <input type="text" placeholder="Placeholder" class="px-3 py-4 placeholder-gray-400 text-gray-700 relative bg-white bg-white rounded text-base border border-gray-400 outline-none focus:outline-none focus:shadow-outline 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-3 py-4 placeholder-gray-400 text-gray-700 relative bg-white bg-white rounded text-base border border-gray-400 outline-none focus:outline-none focus:shadow-outline w-full pr-10"/>
  <span class="z-10 h-full leading-normal font-normal absolute text-center text-gray-400 absolute bg-transparent rounded text-lg items-center justify-center w-8 right-0 pr-3 py-4">
    <i class="fas fa-user"></i>
  </span>
</div>