Responsive search bar

with loading animation on submit button

This tailwind example is contributed by Ron Hicks, on 01-Dec-2022. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is find

Search Bar

Author Ron Hicks

Tailwind v3.4 12.5k 18

Fork Fullscreen

<label
    class="mx-auto mt-40 relative bg-white min-w-sm max-w-2xl flex flex-col md:flex-row items-center justify-center border py-2 px-2 rounded-2xl gap-2 shadow-2xl focus-within:border-gray-300"
    for="search-bar">
    <input id="search-bar" placeholder="your keyword here"
        class="px-6 py-2 w-full rounded-md flex-1 outline-none bg-white">
    <button
        class="w-full md:w-auto px-6 py-3 bg-black border-black text-white fill-white active:scale-95 duration-100 border will-change-transform overflow-hidden relative rounded-xl transition-all disabled:opacity-70">
        
        <div class="relative">

<div
                class="flex items-center justify-center h-3 w-3 absolute inset-1/2 -translate-x-1/2 -translate-y-1/2 transition-all">
                <svg class="opacity-0 animate-spin w-full h-full" xmlns="http://www.w3.org/2000/svg" fill="none"
                    viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                        stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor"
                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                    </path>
                </svg>
            </div>

<div class="flex items-center transition-all opacity-1 valid:"><span
                    class="text-sm font-semibold whitespace-nowrap truncate mx-auto">
                    Search
                </span>
            </div>

</div>
        
    </button>
</label>

Related Examples

Search bar

Arya

3 years ago

32.9k
Search bar with filter options

Piet Vriend

3 years ago

26.3k
Responsive search bar

Samuel Dawson

3 years ago

19k
Responsive Search bar

Prajwal Hallale

3 years ago

12.4k
Search form section with a background SVG gradient

TailwindFlex

3 years ago

15.2k
Simple search input field

Santos78

3 years ago

13.2k
Large search bar with icon

Prajwal Hallale

4 years ago

10.5k
Search form

Laurits

3 years ago

12.3k
Simple search bar

TailwindFlex

4 years ago

12.7k
Search bar with icon

Steven Kuhn

4 years ago

15.8k
search button

Freja Jensen

3 years ago

13.2k
Call to action
slightly tilted call to action section

Simon Scheffer

3 years ago

11.9k
No distraction search field

_Amar_

3 years ago

12.5k
Full width search section with title

TailwindFlex

3 years ago

12.8k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.