Home
TailwindFlex
Full width search section with title

Full width search section with title

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

Search Bar

Author TailwindFlex

11.9k

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

Author:
Arya

2 years ago

32k
Responsive search bar

Author:
Samuel Dawson

2 years ago

17.7k
Responsive Search bar

Author:
Prajwal Hallale

2 years ago

12.2k
Search bar with filter options

Author:
Piet Vriend

2 years ago

24.9k
Search form

Author:
Laurits

2 years ago

11.5k
No distraction search field

Author:
_Amar_

2 years ago

11.9k
Large search bar with icon

Author:
Prajwal Hallale

3 years ago

10.3k
search button

Author:
Freja Jensen

2 years ago

12.6k
Responsive search bar
with loading animation on submit button

Author:
Ron Hicks

2 years ago

11.5k
CTA Search Section
CTA search form

Author:
EliteAI Tools

8 months ago

814
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

376

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components