In this section, we’ll create a simple search bar in React using Tailwind CSS. We’ll explore different examples of search components in React, all styled with Tailwind CSS and incorporating SVG icons for enhanced visual appeal.
Install & Setup Vite + React + Typescript + Tailwind CSS 3
Tool Use
Tailwind CSS 3.x
Heroicons Icons
React JS
Example 1
React tailwind simple search input.
import React from "react";
export default function SearchComponent() {
return (
<div className="flex items-center">
<div className="flex border border-purple-200 rounded">
<input
type="text"
className="block w-full px-4 py-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
placeholder="Search..."
/>
<button className="px-4 text-white bg-purple-600 border-l rounded ">
Search
</button>
</div>
</div>
);
}
Example 2
React tailwind search input with icon.
import React from "react";
export default function SearchComponent() {
return (
<div className="flex items-center">
<div className="flex space-x-1">
<input
type="text"
className="block w-full px-4 py-2 text-purple-700 bg-white border rounded-full focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
placeholder="Search..."
/>
<button className="px-4 text-white bg-purple-600 rounded-full ">
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-5 h-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</button>
</div>
</div>
);
}
Example 3
React tailwind inside search bar with search icon.
import React from "react";
export default function SearchComponent() {
return (
<form className="max-w-sm px-4">
<div className="relative">
<svg
xmlns="http://www.w3.org/2000/svg"
className="absolute top-0 bottom-0 w-6 h-6 my-auto text-gray-400 left-3"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
<input
type="text"
placeholder="Search"
className="w-full py-3 pl-12 pr-4 text-gray-500 border rounded-md outline-none bg-gray-50 focus:bg-white focus:border-indigo-600"
/>
</div>
</form>
);
}