Home
Ron Hicks
Responsive search bar

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 CSS v3. It is responsive. similar terms for this example is find

Search Bar

Author Ron Hicks

9.7k

12

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

Author:
Arya

1 year ago

28.3k
Search bar with filter options

Author:
Piet Vriend

1 year ago

22.5k
Responsive search bar

Author:
Samuel Dawson

1 year ago

15.1k
Responsive Search bar

Author:
Prajwal Hallale

2 years ago

11.4k
Search form section with a background SVG gradient

Author:
TailwindFlex

1 year ago

12.7k
Simple search input field

Author:
Santos78

1 year ago

11.1k
Large search bar with icon

Author:
Prajwal Hallale

2 years ago

9.8k
Search form

Author:
Laurits

1 year ago

10.2k
Simple search bar

Author:
TailwindFlex

2 years ago

10.2k
Search bar with icon

Author:
Steven Kuhn

2 years ago

12.9k
search button

Author:
Freja Jensen

1 year ago

11k
Call to action
slightly tilted call to action section

Author:
Simon Scheffer

1 year ago

9.8k
No distraction search field

Author:
_Amar_

1 year ago

9.9k
Full width search section with title

Author:
TailwindFlex

2 years ago

10.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components

© 2024 TailwindFlex. All Rights Reserved.

v1.8