Search bar with icon

This tailwind example is contributed by Steven Kuhn, on 24-Aug-2022. Component is made with Tailwind v3.4. similar terms for this example is find

Input Search Bar

Author Steven Kuhn

Tailwind v3.4 15.8k 17

Fork Fullscreen

<div class="relative">
  <input
    class="appearance-none border-2 pl-10 border-gray-300 hover:border-gray-400 transition-colors rounded-md w-full py-2 px-3 text-gray-800 leading-tight focus:outline-none focus:ring-purple-600 focus:border-purple-600 focus:shadow-outline"
    id="username"
    type="text"
    placeholder="Search..."
  />
  <div class="absolute right-0 inset-y-0 flex items-center">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="-ml-1 mr-3 h-5 w-5 text-gray-400 hover:text-gray-500"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M6 18L18 6M6 6l12 12"
      />
    </svg>
  </div>

<div class="absolute left-0 inset-y-0 flex items-center">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-6 w-6 ml-3 text-gray-400 hover:text-gray-500"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
      />
    </svg>
  </div>
</div>

Related Examples

Search bar

Arya

3 years ago

33k
Responsive search bar

Samuel Dawson

3 years ago

19.1k
Search bar with filter options

Piet Vriend

3 years ago

26.3k
Responsive Search bar

Prajwal Hallale

3 years ago

12.4k
search button

Freja Jensen

3 years ago

13.2k
Large search bar with icon

Prajwal Hallale

4 years ago

10.5k
Google like input field
with Floating Label. The input placeholder floats towards the upside as the input field is in focus.

Samuel Dawson

3 years ago

18.7k
Onhover Dropdown
Open dropdown on hover

Akshay

4 years ago

19.2k
Responsive search bar
with loading animation on submit button

Ron Hicks

3 years ago

12.6k
Simple search input field

Santos78

3 years ago

13.2k
Search form

Laurits

3 years ago

12.3k
Search input

Leon Bachmann

3 years ago

11.5k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.