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

10.5k

7

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

1 year ago

22.1k
Responsive search bar

Author:
Samuel Dawson

1 year ago

12.5k
Search bar with filter options

Author:
Piet Vriend

1 year ago

19.4k
Responsive Search bar

Author:
Prajwal Hallale

1 year ago

9.9k
search button

Author:
Freja Jensen

1 year ago

9.7k
Large search bar with icon

Author:
Prajwal Hallale

1 year ago

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

Author:
Samuel Dawson

1 year ago

11.8k
Onhover Dropdown
Open dropdown on hover

Author:
Akshay

1 year ago

11.5k
Responsive search bar
with loading animation on submit button

Author:
Ron Hicks

1 year ago

7.8k
Simple search input field

Author:
Santos78

1 year ago

9.8k
Search form

Author:
Laurits

1 year ago

8.2k
Search input

Author:
Leon Bachmann

1 year ago

8.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 1200+ componenent

TailwindFlex.com

Tailwindflex.com is a free tailwind examples library. It's a one-stop destination for ready-made tailwind examples.

Contact

Email: admin@tailwindflex.com

Links

FAQs Tailwind Playground

© 2024 TailwindFlex. All Rights Reserved.

v1.4