Search boxes

Search box

Rounded border

 <div class="flex rounded-full border-grey-light border">
	<button>
	  <span class="w-auto flex justify-end items-center text-grey p-2">
		  <i class="material-icons text-3xl">search</i>
	  </span>
	</button>
	<input class="w-full rounded mr-4" type="text" placeholder="Search...">
</div>

Websites

Google

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

AirBnB

 <div class="shadow p-4 flex">
        <span class="w-auto flex justify-end items-center text-grey 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-light hover:bg-red-lighter rounded text-white p-2 pl-4 pr-4">
                <p class="font-semibold text-xl">Search</p>
        </button>
    </div>

YouTube

<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-xl">search</i>
	  </span>
	</button>
</div>