Home
s c
Search bar with select

Search bar with select

search bar like google with select filter

This tailwind example is contributed by s c, on 11-Mar-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example is find

Search Bar

Author s c

734

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">
   
        <input 
            type="search" 
            name="search"
            placeholder="Search"
            class="bg-[#191E2E] dark:bg-gray-800 border-r-0 relative left-10 h-10 flex px-5 w-full rounded-full text-sm focus:outline-none border-2  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">
           
        </button>
              <select 
            class="bg-[#191E2E] dark:bg-gray-800 h-10 px-5 xs:invisible relative left-5  rounded-r-full text-white text-sm focus:outline-none outline-none border-2 border-gray-500 border-l-0 dark:border-gray-600 border-r-1 cursor-pointer max-h-10 overflow-y-hidden">
            <option class="font-medium cursor-pointer" value="filter">All</option>
        </select>
             <button 
            class="bg-[#435088] text-white dark:bg-gray-800 h-10 w-40 px-6 rounded-r-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">
       Copilot
        </button>
        
    </div>
    
</div>
</body>

Related Examples

Todo List with Dark theme
Todo List with Dark theme

Author:
Muzammil Riaz

3 months ago

288
Clone of Google’s Search Functionality
This Tailwind CSS example, contributed by Bishnu Thapa on April 4th, 2024, showcases a responsive component designed using version 3.4 of Tailwind CSS. It is responsive.

Author:
Bishnu Thapa

1 year ago

2.6k
Search form

Author:
Laurits

2 years ago

11.4k
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)

3 months ago

369
Simple search bar

Author:
TailwindFlex

3 years ago

11.8k
Responsive search bar

Author:
Samuel Dawson

2 years ago

17.6k
Call to action
slightly tilted call to action section

Author:
Simon Scheffer

2 years ago

11.1k
Search input

Author:
Leon Bachmann

2 years ago

10.5k
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

3 months ago

600
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)

3 months ago

602
CTA Search Section
CTA search form

Author:
EliteAI Tools

8 months ago

810
Animasyonlu Arama Textbox Widget
Üzerine gelince animasyonlu olarak açılan textbox.

Author:
Sedat Kumcu

10 months ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components