Search form section with a background SVG gradient

This tailwind example is contributed by TailwindFlex, on 11-Jan-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is find

Form Search Bar

Author TailwindFlex

Tailwind v3.4 15.2k 19

Fork Fullscreen

<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
    <div
        class="relative isolate overflow-hidden bg-white px-6 py-20 text-center sm:px-16 sm:shadow-sm">
        <p class="mx-auto max-w-2xl text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
            Didn't find component you were looking for?
        </p>

<form action="/search">
            <label
                class="mx-auto mt-8 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" name="q"
                    class="px-6 py-2 w-full rounded-md flex-1 outline-none bg-white" required="">
                <button type="submit"
                    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">
                    <div class="flex items-center transition-all opacity-1">
                        <span class="text-sm font-semibold whitespace-nowrap truncate mx-auto">
                            Search
                        </span>
                    </div>
                </button>
            </label>
        </form>

<svg viewBox="0 0 1024 1024"
            class="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-x-1/2 [mask-image:radial-gradient(closest-side,white,transparent)]"
            aria-hidden="true">
            <circle cx="512" cy="512" r="512" fill="url(#827591b1-ce8c-4110-b064-7cb85a0b1217)" fill-opacity="0.7">
            </circle>
            <defs>
                <radialGradient id="827591b1-ce8c-4110-b064-7cb85a0b1217">
                    <stop stop-color="#3b82f6"></stop>
                    <stop offset="1" stop-color="#1d4ed8"></stop>
                </radialGradient>
            </defs>
        </svg>
    </div>
</div>

Related Examples

Search bar

Arya

3 years ago

33k
Responsive search bar
with loading animation on submit button

Ron Hicks

3 years ago

12.6k
Search bar with filter options

Piet Vriend

3 years ago

26.3k
Responsive Search bar

Prajwal Hallale

3 years ago

12.4k
Responsive search bar

Samuel Dawson

3 years ago

19.1k
No distraction search field

_Amar_

3 years ago

12.5k
Large search bar with icon

Prajwal Hallale

4 years ago

10.5k
Simple search bar

TailwindFlex

4 years ago

12.7k
Simple search input field

Santos78

3 years ago

13.2k
Search form

Laurits

3 years ago

12.3k
search button

Freja Jensen

3 years ago

13.2k
Feedback form
Collect opinions about your company's service

Arya

4 years ago

14.7k

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.