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

Leon Bachmann

3 years ago

11.5k
Search bar with select
search bar like google with select filter

Cristian

2 years ago

4.3k
Productivity Dashboard UI
A modern developer productivity dashboard built using HTML, Tailwind CSS, JavaScript, and Chart.js. Features a premium SaaS-style UI with analytics cards, interactive charts, kanban sprint board, developer management table, live search functionality, responsive layouts, activity feeds, and modern frontend components. Designed for frontend developers to showcase dashboard architecture, UI/UX skills, responsive design systems, and interactive web application interfaces. Includes glassmorphism styling, developer workflow management, team collaboration sections, and portfolio-ready dashboard components optimized for modern admin experiences.

Ayyamperumal S

4 months ago

476