Full width search section with title

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

Search Bar

Author TailwindFlex

Tailwind v3.4 12.8k 16

Fork Fullscreen

<div class="flex flex-col w-full items-center pt-4 gap-4 bg-gradient-to-b from-blue-600 via-blue-300 to-blue-100">
    <p class="text-4xl md:text-6xl font-extrabold text-white">Title</p>
    <form action="" class="max-w-[480px] w-full px-4">
        <div class="relative">
            <input type="text" name="q" class="w-full border h-12 shadow p-4 rounded-full" placeholder="search">
            <button type="submit">
                    <svg class="text-gray-400 h-5 w-5 absolute top-3.5 right-3 fill-current"
                        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
                        x="0px" y="0px" viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;"
                        xml:space="preserve">
                        <path
                            d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z" />
                    </svg>
                </button>
        </div>
    </form>
</div>

Related Examples

Search bar

Arya

3 years ago

32.9k
Responsive search bar

Samuel Dawson

3 years ago

19k
Responsive Search bar

Prajwal Hallale

3 years ago

12.4k
Search bar with filter options

Piet Vriend

3 years ago

26.3k
Search form

Laurits

3 years ago

12.3k
No distraction search field

_Amar_

3 years ago

12.5k
Large search bar with icon

Prajwal Hallale

4 years ago

10.5k
search button

Freja Jensen

3 years ago

13.2k
Responsive search bar
with loading animation on submit button

Ron Hicks

3 years ago

12.5k
Sticky Navbar
A modern, feature-rich, and fully responsive navigation bar built with Tailwind CSS. This premium navbar includes a top contact bar, multi-level mega menus, live search with suggestions, mobile drawer navigation, nested accordion menus, authentication buttons, sticky header, and smooth interactions. Perfect for SaaS, corporate, startup, agency, eCommerce, legal, education, and business websites.

JUGENDRA GANGWAR

2 months ago

157
Animated Search Input
Expand on focus with smooth animation

Anonymous

1 year ago

2.9k
Search box
Search bar with a button inside

Anonymous

2 years ago

4.3k