Home
TailwindFlex
Search form section with a background SVG gradient

Search form section with a background SVG gradient

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

Form Search Bar

Author TailwindFlex

14.7k

15

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

Author:
Arya

3 years ago

32.4k
Responsive search bar
with loading animation on submit button

Author:
Ron Hicks

3 years ago

11.9k
Search bar with filter options

Author:
Piet Vriend

3 years ago

25.5k
Responsive Search bar

Author:
Prajwal Hallale

3 years ago

12.3k
Responsive search bar

Author:
Samuel Dawson

3 years ago

18.2k
No distraction search field

Author:
_Amar_

2 years ago

12.1k
Large search bar with icon

Author:
Prajwal Hallale

3 years ago

10.4k
Simple search bar

Author:
TailwindFlex

3 years ago

12k
Simple search input field

Author:
Santos78

3 years ago

12.8k
Search form

Author:
Laurits

3 years ago

11.7k
search button

Author:
Freja Jensen

2 years ago

12.8k
Login form

Author:
Gopi Yadav

3 years ago

11.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

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 Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12