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

33k
Responsive search bar

Samuel Dawson

3 years ago

19.1k
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.6k
ULTIMATE SNAKE
(click to https://quantum-snake.netlify.app/ )ULTIMATE SNAKE is a modern reimagining of the classic Snake game, blending retro gameplay with enhanced visuals, power-ups, and a dynamic difficulty system. Designed for both casual players and high-score chasers, this game brings nostalgia and excitement in every move.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.3k
Glassmorphic Animated Searchabar
This is a sleek, animated search bar designed with Tailwind CSS using a glassmorphic aesthetic. It features a semi-transparent background with a blur effect to create a frosted-glass look. When focused, the search bar smoothly expands to enhance user interaction. It includes a built-in search icon and fully supports responsive design, making it ideal for modern, visually polished web interfaces.

Muhamad Rufaid kv

1 year ago

1.9k
Animated Search bar
Animated Search bar using tailwind

Muhamad Rufaid kv

1 year ago

1.5k