# Search boxes

## Search box

### Rounded border

![](https://3677920472-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBql1s3wlqs4NUfqqiL%2F-LD2mbKhj-A2wNL39AKl%2F-LD2mikBMqd0SgTLnnIS%2Fborder%20.PNG?alt=media\&token=312ab7f5-2d32-4319-9dff-302dc5142a35)

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

![](https://3677920472-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBql1s3wlqs4NUfqqiL%2F-LBrDCgZhb7M1ZK9PAAt%2F-LBrDJimQeSlp324mP3_%2FGoogle%20searchbox.PNG?alt=media\&token=2c492e31-563f-4394-9fe9-3a603844721f)

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

![](https://3677920472-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBql1s3wlqs4NUfqqiL%2F-LBuKdf7KYQlCLWD5eKN%2F-LBuKj4PFW8ThBYO-pYy%2FAirbnb.PNG?alt=media\&token=4a892fc3-d86f-4ff6-b640-d086adaf1b9a)

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

![](https://3677920472-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBql1s3wlqs4NUfqqiL%2F-LD2pYUhkAuza4EGw4Vh%2F-LD2pgL32eNCDipap0Si%2Fsearch%20youtube.PNG?alt=media\&token=b7a60552-1eef-4e08-b270-ba0fb8a50133)

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