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-2 left-0 flex items-center pl-3">
<button id="dropdownButton" class="h-full w-18 text-sm flex items-center bg-transparent text-slate-700 focus:outline-none">
<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-3"></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-800 hover:bg-slate-100 text-sm cursor-pointer" data-value="Themes">Themes</li>
<li class="px-4 py-2 text-slate-800 hover:bg-slate-100 text-sm cursor-pointer" data-value="Plugins">Plugins</li>
<li class="px-4 py-2 text-slate-800 hover:bg-slate-100 text-sm cursor-pointer" data-value="Snippets">Snippets</li>
</ul>
</div>
</div>
<input
type="text"
class="w-full h-10 pl-28 pr-28 bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-400 shadow-sm focus:shadow-md"
placeholder="Widgets..." />
<button
class="absolute py-1.5 text-white text-sm right-1 top-1 my-auto px-3 flex items-center bg-slate-800 rounded hover:bg-slate-700"
type="button"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 mr-2">
<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>
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-2 left-0 flex items-center pl-3">
<button id="dropdownButton" class="h-full w-18 text-sm flex items-center bg-transparent text-slate-700 focus:outline-none">
<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-4"></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-800 hover:bg-slate-100 text-sm cursor-pointer" data-value="Europe">Europe</li>
<li class="px-4 py-2 text-slate-800 hover:bg-slate-100 text-sm cursor-pointer" data-value="Australia">Australia</li>
<li class="px-4 py-2 text-slate-800 hover:bg-slate-100 text-sm cursor-pointer" data-value="Africa">Africa</li>
</ul>
</div>
</div>
<input
type="text"
class="w-full h-10 pl-28 pr-13 bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-400 shadow-sm focus:shadow-md"
placeholder="Germany..." />
<button
class="absolute py-2 text-white text-sm right-1 top-1 my-auto px-3 flex items-center bg-slate-800 rounded hover:bg-slate-700"
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>
<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">
<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 pl-14 h-10 pr-3 py-2 bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-400 shadow-sm focus:shadow-md"
placeholder="UI Kits, Dashboards..."
/>
<button
class="h-10 ml-1 text-white text-sm my-auto px-3 flex items-center bg-slate-800 rounded hover:bg-slate-700"
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>