Search

<div class="p-8">
  <div class="bg-white flex items-center rounded-full shadow-xl">
    <input class="rounded-l-full w-full py-4 px-6 text-gray-700 leading-tight focus:outline-none" id="search" type="text" placeholder="Search">
    
    <div class="p-4">
      <button class="bg-blue-500 text-white rounded-full p-2 hover:bg-blue-400 focus:outline-none w-12 h-12 flex items-center justify-center">
        icon
      </button>
      </div>
    </div>
  </div>
</div>

<div class="flex border-grey-light border">
  <input class="w-full rounded ml-1" type="text" placeholder="Search...">
  <button class="bg-grey-lightest border-grey border-l shadow hover:bg-grey-lightest">
    <span class="w-auto flex justify-end items-center text-grey p-2 hover:text-grey-darkest">
      <i class="material-icons text-xs">search</i>
    </span>
  </button>
</div>

<div class="bg-white shadow p-4 flex">
        <span class="w-auto flex justify-end items-center text-gray-500 p-2">
            <i class="material-icons text-3xl">search</i>
        </span>
        <input class="w-full rounded p-2" type="text" placeholder="Try 'Los Angeles'">
        <button class="bg-red-400 hover:bg-red-300 rounded text-white p-2 pl-4 pr-4">
                <p class="font-semibold text-xs">Search</p>
        </button>
    </div>

<div class="shadow flex">
    <input class="w-full rounded p-2" type="text" placeholder="Search...">
    <button class="bg-white w-auto flex justify-end items-center text-blue-500 p-2 hover:text-blue-400">
        <i class="material-icons">search</i>
    </button>
</div>