In this section we will create simple react tailwind css search bar, react tailwind css search components, react tailwind search with svg icon examples with Tailwind CSS.
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>
);
}