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>

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

Related Examples

Search bar

Arya

3 years ago

33k
Responsive search bar
with loading animation on submit button

Ron Hicks

3 years ago

12.7k
Search bar with filter options

Piet Vriend

3 years ago

26.5k
Responsive Search bar

Prajwal Hallale

4 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.4k
search button

Freja Jensen

3 years ago

13.2k
Modern Dark Footer with Overlapping Gradient CTA
A comprehensive, dark-themed website footer component built with HTML and Tailwind CSS. It features a visually distinct overlapping section with a colorful gradient background containing a prominent call-to-action (CTA) block. The main footer area utilizes a multi-column grid layout for organized navigation links, a newsletter signup form, and social media icons. A final bottom bar includes legal links and copyright information. The design is responsive and adapts its layout for different screen sizes.

Hamza Atig

1 year ago

1.3k