Home
Steven Kuhn
Search bar with icon

Search bar with icon

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

Input Search Bar

Author Steven Kuhn

14.2k

12

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

Author:
Arya

2 years ago

30.6k
Responsive search bar

Author:
Samuel Dawson

2 years ago

16.7k
Search bar with filter options

Author:
Piet Vriend

2 years ago

24.2k
Responsive Search bar

Author:
Prajwal Hallale

2 years ago

12k
search button

Author:
Freja Jensen

2 years ago

11.9k
Large search bar with icon

Author:
Prajwal Hallale

2 years ago

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

Author:
Samuel Dawson

2 years ago

16.2k
Onhover Dropdown
Open dropdown on hover

Author:
Akshay

2 years ago

16.6k
Responsive search bar
with loading animation on submit button

Author:
Ron Hicks

2 years ago

10.7k
Simple search input field

Author:
Santos78

2 years ago

12.2k
Search form

Author:
Laurits

2 years ago

10.8k
Search input

Author:
Leon Bachmann

2 years ago

10.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1