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

1.1k

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

CTA Search Section
CTA search form

Author:
EliteAI Tools

1 year ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

847
Simple search input field

Author:
Santos78

3 years ago

12.8k
Search bar with filter options

Author:
Piet Vriend

3 years ago

25.6k
Search form

Author:
Laurits

3 years ago

11.7k
Call to action
slightly tilted call to action section

Author:
Simon Scheffer

3 years ago

11.3k
Arama Sonuçları Sayfası
Sayfa içerik türüne göre icon ile desteklenen arama formu ve arama sonuçları sayfası

Author:
Sedat Kumcu

1 year ago

2.1k
Search bar with icon

Author:
Steven Kuhn

3 years ago

15.3k
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.8k
Large search bar with icon

Author:
Prajwal Hallale

3 years ago

10.4k
Expanding Search Bar
Onclick search bar expands for input

Author:
Nomthandazo Mhlongo

1 year ago

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

8 months ago

891

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components