Home
Cristian
Search bar with select

Search bar with select

search bar like google with select filter

This tailwind example is contributed by Cristian, on 09-May-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example is find

Search Bar

Author Cristian

Fork Fullscreen

<body class="flex justify-center items-center h-screen bg-gray-100 dark:bg-gray-800">
<div class="p-4 text-gray-600 dark:text-gray-300 outline-none focus:outline-none">
    <div class="relative flex">
        <select 
            class="bg-white dark:bg-gray-800 h-10 px-5 rounded-l-full text-sm focus:outline-none outline-none border-2 border-gray-500 dark:border-gray-600 border-r-1 cursor-pointer max-h-10 overflow-y-hidden">
            <option class="font-medium cursor-pointer" value="filter">filter</option>
        </select>
        <input 
            type="search" 
            name="search"
            placeholder="Search"
            class="bg-white dark:bg-gray-800 h-10 flex px-5 w-full rounded-r-full text-sm focus:outline-none border-2 border-l-0 border-gray-500 dark:border-gray-600"
            autocomplete="off" 
            spellcheck="false" 
            required 
            step="any" 
            autocapitalize="none" 
            autofocus />
        <button 
            type="submit" 
            class="absolute inset-y-0 right-0 mr-2 flex items-center px-2">
            <svg 
                class="h-4 w-4 fill-current dark:text-white" 
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink" 
                version="1.1" id="Capa_1" x="0px" y="0px"
                viewBox="0 0 56.966 56.966" 
                xml:space="preserve" 
                width="512px" 
                height="512px">
                    <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>
</div>
</body>

Related Examples

Acode master
Acode master(=>good work for Acode master)

Author:
Acode Master(Mfuranziza Dusabe Hamza)

3 weeks ago

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

Author:
Muhamad Rufaid kv

1 week ago

101
Animated Search Input
Expand on focus with smooth animation

Author:
Anonymous

8 months ago

1.7k
Search input

Author:
Leon Bachmann

2 years ago

10.2k
Full width search section with title

Author:
TailwindFlex

2 years ago

11.5k
Responsive search bar
with loading animation on submit button

Author:
Ron Hicks

2 years ago

10.9k
Search bar

Author:
Arya

2 years ago

31.2k
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:
Acode Master(Mfuranziza Dusabe Hamza)

3 weeks ago

177
Animated Search bar
Animated Search bar using tailwind

Author:
Muhamad Rufaid kv

1 week ago

21
Large search bar with icon

Author:
Prajwal Hallale

2 years ago

10.2k
Search form

Author:
Laurits

2 years ago

11.2k
Todo List with Dark theme
Todo List with Dark theme

Author:
Muzammil Riaz

2 weeks ago

25

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components