How to build a search input component with Tailwind CSS and Flowbite

#tailwindcss #opensource #tutorial #webdev

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

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: