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

384

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