How to build a search input component with Tailwind CSS and Flowbite
Tags: tailwindcss, opensource, tutorial, webdev
Published: 2022-05-03 11:38:34

I've been using Tailwind CSS and Flowbite for quite a while when developing websites, mostly because of how fast and efficiently I can build pages using the utility classes and the pre-built components from Flowbite such as navbars, modals, buttons, and more.

[Flowbite](https://flowbite.com) is one of the most popular component libraries built on top of the Tailwind CSS utility classes including navbars, modals, search bars, and more.

[Tailwind CSS](https://tailwindcss.com) is one of the fastest growing CSS frameworks that is based on a utility-first methodology of classes.

Today I want to show you how you can create a search input component using the utility classes from Tailwind CSS and components from Flowbite.

[![Tailwind CSS Search Input - Flowbite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bja3qp7bqf33x3lb8rdp.png)](https://flowbite.com/docs/forms/search-input/)

Let's get started!

## Tailwind CSS Search Input - Flowbite

The first thing we need to do is set up the HTML markup for the component which will include a `form`, `label`, `input`, and a submit button.

Here's an example:

```
<form>   
    <label for="default-search">Search</label>
        <input type="search" id="default-search" placeholder="Search Mockups, Logos..." required>
        <button type="submit">Search</button>
</form>
```

Doesn't look too good as we haven't applied any styles just yet, but we'll start adding some Tailwind CSS classes and make it better right away.

Let's start by styling the `label` and `input` element:

```
<form>   
    <label class="mb-2 text-sm font-medium text-gray-900 sr-only" for="default-search">Search</label>
        <input class="block p-4 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" type="search" id="default-search" placeholder="Search Mockups, Logos..." required>
        <button type="submit">Search</button>
</form>
```

We're getting there, but it's still not enough. Let's also style the `button` element:

```
<form>   
    <label class="mb-2 text-sm font-medium text-gray-900 sr-only" for="default-search">Search</label>
        <input class="block p-4 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" type="search" id="default-search" placeholder="Search Mockups, Logos..." required>
        <button class="text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2" type="submit">Search</button>
</form>
```

Let's add an extra `div` wrapper and an SVG icon with a loop to show that it's a search bar:

```
<form>   
    <label class="mb-2 text-sm font-medium text-gray-900 sr-only" for="default-search">Search</label>
    <div class="relative">
        <input class="block p-4 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" type="search" id="default-search" placeholder="Search Mockups, Logos..." required>
        <button class="text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2" type="submit">Search</button>
</div>
</form>
```

Finally, let's also add the dark mode classes:

```
<form>   
    <label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-gray-300">Search</label>
    <div class="relative">
        <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
            <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
        </div>
        <input type="search" id="default-search" class="block p-4 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search Mockups, Logos..." required>
        <button type="submit" class="text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Search</button>
    </div>
</form>
```

The end result should look something like this:

[![Tailwind CSS Search Input Dark Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mb945g3qprnbfjq3pq0z.png)](https://flowbite.com/docs/forms/search-input/)

You can check out more [Tailwind CSS Search Input](https://flowbite.com/docs/forms/search-input/) examples from the official Flowbite documentation.

Here are a few examples:

[![Tailwind CSS Search Input Dropdown - Flowbite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bk91nu4pmdf0x2u04s8u.png)](https://flowbite.com/docs/forms/search-input/#search-with-dropdown)

[![Tailwind CSS Simple Search Input - Flowbite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/653ox123l30y1z5uvz5a.png)](https://flowbite.com/docs/forms/search-input/#simple-search-input)

[![Tailwind CSS Category Search - Flowbite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j1z8am68njtw8z0g3idj.png)](https://flowbite.com/docs/forms/search-input/#location-search)

[![Tailwind CSS Voice Recognition](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ufk82p3ygq3uz1nwsgx0.png)](https://flowbite.com/docs/forms/search-input/#voice-search)

- [Tailwind CSS Search Input - Flowbite](https://flowbite.com/docs/forms/search-input/)
- [Flowbite - Tailwind CSS component library](https://flowbite.com/docs/getting-started/introduction/)