Home
Anonymous
Animated Search Input

Animated Search Input

Expand on focus with smooth animation

This tailwind example is contributed by Anonymous, on 08-Oct-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is find

Search Bar

Author Anonymous

1.7k

Fork Fullscreen

searchInput.addEventListener('focus', () => {
      searchContainer.classList.add('w-64', 'bg-white');
      searchContainer.classList.remove('w-48');
      searchInput.classList.remove('border-gray-300');
      searchInput.classList.add('border-blue-500');
      searchIcon.classList.add('text-blue-500');
      searchIcon.classList.remove('text-gray-400');
    });

searchInput.addEventListener('blur', () => {
      searchContainer.classList.add('w-48');
      searchContainer.classList.remove('w-64', 'bg-white');
      searchInput.classList.add('border-gray-300');
      searchInput.classList.remove('border-blue-500');
      searchIcon.classList.add('text-gray-400');
      searchIcon.classList.remove('text-blue-500');
    });
  </script>

Related Examples

Search bar with select
search bar like google with select filter

Author:
s c

4 months ago

616
Animated Search bar
Animated Search bar using tailwind

Author:
Muhamad Rufaid kv

1 month ago

148
Expanding Search Bar
Onclick search bar expands for input

Author:
Nomthandazo Mhlongo

11 months ago

2.8k
Large search bar with icon

Author:
Prajwal Hallale

3 years ago

10.2k
search button

Author:
Freja Jensen

2 years ago

12.3k
Search form section with a background SVG gradient

Author:
TailwindFlex

2 years ago

13.9k
Search box
Search bar with a button inside

Author:
Anonymous

1 year ago

3.3k
Glassmorphic Animated Searchabar
This is a sleek, animated search bar designed with Tailwind CSS using a glassmorphic aesthetic. It features a semi-transparent background with a blur effect to create a frosted-glass look. When focused, the search bar smoothly expands to enhance user interaction. It includes a built-in search icon and fully supports responsive design, making it ideal for modern, visually polished web interfaces.

Author:
Muhamad Rufaid kv

1 month ago

274
Clone of Google’s Search Functionality
This Tailwind CSS example, contributed by Bishnu Thapa on April 4th, 2024, showcases a responsive component designed using version 3.4 of Tailwind CSS. It is responsive.

Author:
Bishnu Thapa

1 year ago

2.3k
Simple search bar

Author:
TailwindFlex

2 years ago

11.6k
Search bar with select
search bar like google with select filter

Author:
Cristian

1 year ago

3.3k
Hero Section
Home hero section search bar

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

6.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components