Tailwind CSS Search Examples
Tags: css, tailwindcss, webdev, tutorial
Published: 2021-08-05 06:48:44

In this tutorial we will create search input form, search input  with right side icon, search input  with left side icon, search input with focus states and single boder, Simple search input with button,  examples with Tailwind CSS

#Tool Use

######Tailwind CSS 2.x
######Heroicons Icons

👉 [View Demo](https://larainfo.com/blogs/tailwind-css-search-examples)

Setup Project

Using CDN

```html
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
```
or 

[The Easiest way to install Tailwind CSS with Tailwind CLI](https://larainfo.com/blogs/the-easiest-way-to-install-tailwind-css-with-tailwind-cli)

[How to Install Tailwind CSS with NPM](https://larainfo.com/blogs/how-to-install-tailwind-css-with-npm)

####Example 1
Simple Search Input with Button

```html
<div class="flex items-center justify-center ">
    <div class="flex border-2 border-gray-200 rounded">
        <input type="text" class="px-4 py-2 w-80" placeholder="Search...">
        <button class="px-4 text-white bg-gray-600 border-l ">
            Search
        </button>
    </div>
</div>
```
![tailwindcss](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j7t0ibh1g6v8u2ajh6ok.png)

####Example 2
Search Input with right side SVG Icon
```html
<div class="flex items-center justify-center">
    <div class="flex border-2 rounded">
        <input type="text" class="px-4 py-2 w-80" placeholder="Search...">
        <button class="flex items-center justify-center px-4 border-l">
            <svg class="w-6 h-6 text-gray-600" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24">
                <path
                    d="M16.32 14.9l5.39 5.4a1 1 0 0 1-1.42 1.4l-5.38-5.38a8 8 0 1 1 1.41-1.41zM10 16a6 6 0 1 0 0-12 6 6 0 0 0 0 12z" />
            </svg>
        </button>
    </div>
</div>
```
![tailwindcss](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3vsc8rfa6bm6zi99b2em.png)


####Example 3
Search Input with left side SVG Icon
```html
<div class="container flex mx-auto">
    <div class="flex border-2 rounded">
        <button class="flex items-center justify-center px-4 border-r">
            <svg class="w-6 h-6 text-gray-600" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24">
                <path
                    d="M16.32 14.9l5.39 5.4a1 1 0 0 1-1.42 1.4l-5.38-5.38a8 8 0 1 1 1.41-1.41zM10 16a6 6 0 1 0 0-12 6 6 0 0 0 0 12z">
                </path>
            </svg>
        </button>
        <input type="text" class="px-4 py-2 w-80" placeholder="Search...">
    </div>
</div>
```
![tailwindcss](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a3bbarkdeg8mptatc0u3.png)

####Example 4
Search Input focus states with single border
```html
<div>
    <input type="text" name="name" placeholder="Search..."
        class="w-1/3 py-2 border-b-2 border-gray-600 outline-none focus:border-green-400">
</div>
<div>
    <input type="text" name="name" placeholder="Search..."
        class="w-1/3 py-2 border-b-2 border-green-600 outline-none focus:border-blue-400">
</div>
<div>
    <input type="text" name="name" placeholder="Search..."
        class="w-1/3 py-2 border-b-2 border-blue-600 outline-none focus:border-yellow-400">
</div>
```
![tailwindcss](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dkspe34rpcktkau32ysm.png)

####Example 5
Search Input with single border, focus states and SVG Icon

```html
<div class="flex items-center">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-2 text-gray-600" fill="none" viewBox="0 0 24 24"
        stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
    </svg>
    <input type="text" name="name" placeholder="name"
        class="w-1/3 py-2 border-b-2 border-gray-400 outline-none focus:border-green-400">
</div>
<div class="flex items-center">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-2 text-blue-600" fill="none" viewBox="0 0 24 24"
        stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
    </svg>
    <input type="text" name="name" placeholder="name"
        class="w-1/3 py-2 border-b-2 border-blue-400 outline-none focus:border-green-400">
</div>
<div class="flex items-center">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-2 text-yellow-600" fill="none" viewBox="0 0 24 24"
        stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
    </svg>
    <input type="text" name="name" placeholder="name"
        class="w-1/3 py-2 border-b-2 border-yellow-400 outline-none focus:border-green-400">
</div>
```
![tailwindcss](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/77qokslgq486u9xkbrlt.png)

###See Also 👇
[Tailwind CSS Simple Table Example](https://larainfo.com/blogs/tailwind-css-simple-table-example)
[Tailwind CSS Simple Button Examples](https://larainfo.com/blogs/tailwind-css-simple-button-examples)
[Tailwind CSS Simple Responsive Image Gallery with Grid](https://larainfo.com/blogs/tailwind-css-simple-responsive-image-gallery-with-grid)
[Tailwind CSS Simple Alert Components Examples](https://larainfo.com/blogs/tailwind-css-simple-alert-components-examples)
[Tailwind CSS Simple Card Examples](https://larainfo.com/blogs/tailwind-css-simple-card-examples)
[Tailwind CSS Badge Examples](https://larainfo.com/blogs/tailwind-css-badge-examples)
[Tailwind CSS Simple Modals Examples](https://larainfo.com/blogs/tailwind-css-simple-modals-examples)
[Tailwind CSS Simple Avatar Examples](https://larainfo.com/blogs/tailwind-css-simple-avatar-examples)