> For the complete documentation index, see [llms.txt](https://j-hiz.gitbook.io/tailwindtemplates/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://j-hiz.gitbook.io/tailwindtemplates/search-boxes.md).

# Search boxes

## Search box

### Rounded border

![](/files/-LD2mikBMqd0SgTLnnIS)

```markup
 <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

![](/files/-LBrDJimQeSlp324mP3_)

```markup
<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

![](/files/-LBuKj4PFW8ThBYO-pYy)

```markup
 <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

![](/files/-LD2pgL32eNCDipap0Si)

```markup
<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>
```