Use our Tailwind CSS Search components that help users input their queries, refine results, and display relevant information easily.
Ensure the search bar is clearly visible by placing it in a common, expected location—typically at the top of the page—and making it large enough for users to easily notice. Additionally, use a magnifying glass icon to represent the search feature, as it is the most widely recognized symbol.
Check out our search examples below based on Tailwind CSS and HTML.
Use this example of a search input with the search button placed inside the input field. This compact design allows users to type their query and immediately click the search button within the same element, saving space.
This search input example includes a dropdown menu to filter search categories. Users can select from different categories, such as Dashboards, UI Kits, and Components, before entering their search query. This design helps refine searches and provides more accurate results.
<div class="w-full max-w-sm min-w-[200px]">
<div class="relative mt-2">
<div class="absolute top-1 left-1 flex items-center">
<button id="dropdownButton" class="rounded border border-transparent py-1 px-1.5 text-center flex items-center text-sm transition-all text-slate-600">
<span id="dropdownSpan" class="text-ellipsis overflow-hidden">Themes</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4 w-4 ml-1">
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
</svg>
</button>
<div class="h-6 border-l border-slate-200 ml-1"></div>
<div id="dropdownMenu" class="min-w-[150px] overflow-hidden absolute left-0 w-full mt-10 hidden w-full bg-white border border-slate-200 rounded-md shadow-lg z-10">
<ul id="dropdownOptions">
<li class="px-4 py-2 text-slate-600 hover:bg-slate-50 text-sm cursor-pointer" data-value="Themes">Themes</li>
<li class="px-4 py-2 text-slate-600 hover:bg-slate-50 text-sm cursor-pointer" data-value="Plugins">Plugins</li>
<li class="px-4 py-2 text-slate-600 hover:bg-slate-50 text-sm cursor-pointer" data-value="Snippets">Snippets</li>
</ul>
</div>
</div>
<input
type="text"
class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md px-28 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow"
placeholder="Widgets..." />
<button
class="absolute top-1 right-1 flex items-center rounded bg-slate-800 py-1 px-2.5 border border-transparent text-center text-sm text-white transition-all shadow-sm hover:shadow focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4 mr-1.5">
<path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd" />
</svg>
Search
</button>
</div>
</div>
<script>
document.getElementById('dropdownButton').addEventListener('click', function() {
var dropdownMenu = document.getElementById('dropdownMenu');
if (dropdownMenu.classList.contains('hidden')) {
dropdownMenu.classList.remove('hidden');
} else {
dropdownMenu.classList.add('hidden');
}
});
document.getElementById('dropdownOptions').addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
const dataValue = event.target.getAttribute('data-value');
document.getElementById('dropdownSpan').textContent = dataValue;
document.getElementById('dropdownMenu').classList.add('hidden');
}
});
document.addEventListener('click', function(event) {
var isClickInside = document.getElementById('dropdownButton').contains(event.target) || document.getElementById('dropdownMenu').contains(event.target);
var dropdownMenu = document.getElementById('dropdownMenu');
if (!isClickInside) {
dropdownMenu.classList.add('hidden');
}
});
</script>Use this example where the search button is positioned outside the input field. This design provides a clear separation between the input area and the search action, making it visually distinct and easy to use.
This example includes a dropdown menu to select different geographical areas before performing a search. Users can choose regions to narrow down their search results to a specific location, making the search process more relevant and targeted.
<div class="w-full max-w-sm min-w-[200px]">
<div class="relative mt-2">
<div class="absolute top-1 left-1 flex items-center">
<button id="dropdownButton" class="rounded border border-transparent py-1 px-1.5 text-center flex items-center text-sm transition-all text-slate-600">
<span id="dropdownSpan" class="text-ellipsis overflow-hidden">Europe</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4 w-4 ml-1">
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
</svg>
</button>
<div class="h-6 border-l border-slate-200 ml-1"></div>
<div id="dropdownMenu" class="min-w-[150px] overflow-hidden absolute left-0 w-full mt-10 hidden w-full bg-white border border-slate-200 rounded-md shadow-lg z-10">
<ul id="dropdownOptions">
<li class="px-4 py-2 text-slate-600 hover:bg-slate-50 text-sm cursor-pointer" data-value="Europe">Europe</li>
<li class="px-4 py-2 text-slate-600 hover:bg-slate-50 text-sm cursor-pointer" data-value="Australia">Australia</li>
<li class="px-4 py-2 text-slate-600 hover:bg-slate-5- text-sm cursor-pointer" data-value="Africa">Africa</li>
</ul>
</div>
</div>
<input
type="text"
class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md pr-12 pl-28 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow"
placeholder="Germany..." />
<button class="absolute right-1 top-1 rounded bg-slate-800 p-1.5 border border-transparent text-center text-sm text-white transition-all shadow-sm hover:shadow focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
<path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
</div>
<script>
document.getElementById('dropdownButton').addEventListener('click', function() {
var dropdownMenu = document.getElementById('dropdownMenu');
if (dropdownMenu.classList.contains('hidden')) {
dropdownMenu.classList.remove('hidden');
} else {
dropdownMenu.classList.add('hidden');
}
});
document.getElementById('dropdownOptions').addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
const dataValue = event.target.getAttribute('data-value');
document.getElementById('dropdownSpan').textContent = dataValue;
document.getElementById('dropdownMenu').classList.add('hidden');
}
});
document.addEventListener('click', function(event) {
var isClickInside = document.getElementById('dropdownButton').contains(event.target) || document.getElementById('dropdownMenu').contains(event.target);
var dropdownMenu = document.getElementById('dropdownMenu');
if (!isClickInside) {
dropdownMenu.classList.add('hidden');
}
});
</script>Use this example of a search input with voice search capability. The input field includes a microphone icon, allowing users to perform searches by voice. This feature improves accessibility and convenience, especially for users who prefer voice commands over typing.
<div class="w-full max-w-sm min-w-[200px]">
<div class="relative flex items-center">
<div class="absolute flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 top-2.5 ml-3 text-slate-600">
<path d="M8.25 4.5a3.75 3.75 0 1 1 7.5 0v8.25a3.75 3.75 0 1 1-7.5 0V4.5Z" />
<path d="M6 10.5a.75.75 0 0 1 .75.75v1.5a5.25 5.25 0 1 0 10.5 0v-1.5a.75.75 0 0 1 1.5 0v1.5a6.751 6.751 0 0 1-6 6.709v2.291h3a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1 0-1.5h3v-2.291a6.751 6.751 0 0 1-6-6.709v-1.5A.75.75 0 0 1 6 10.5Z" />
</svg>
<div class="h-6 border-l border-slate-200 ml-2.5"></div>
</div>
<input
class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md pr-3 pl-14 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow"
placeholder="UI Kits, Dashboards..."
/>
<button
class="rounded-md ml-2 bg-slate-800 p-2.5 border border-transparent text-center text-sm text-white transition-all shadow-sm hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
<path fill-rule="evenodd" d="M10.5 3.75a6.75 6.75 0 1 0 0 13.5 6.75 6.75 0 0 0 0-13.5ZM2.25 10.5a8.25 8.25 0 1 1 14.59 5.28l4.69 4.69a.75.75 0 1 1-1.06 1.06l-4.69-4.69A8.25 8.25 0 0 1 2.25 10.5Z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>