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

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:
Cristian

1 year ago

3.4k
Search form

Author:
Laurits

2 years ago

11.4k
CTA Search Section
CTA search form

Author:
EliteAI Tools

8 months ago

810
Responsive search bar
with loading animation on submit button

Author:
Ron Hicks

2 years ago

11.4k
Search bar with icon

Author:
Steven Kuhn

3 years ago

14.7k
Search form section with a background SVG gradient

Author:
TailwindFlex

2 years ago

14.2k
Todo List with Dark theme
Todo List with Dark theme

Author:
Muzammil Riaz

3 months ago

289
Acode master
Acode master(=>good work for Acode master)

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

314
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

603
Search input

Author:
Leon Bachmann

2 years ago

10.5k
Responsive search bar

Author:
Samuel Dawson

2 years ago

17.6k
Animasyonlu Arama Textbox Widget
Üzerine gelince animasyonlu olarak açılan textbox.

Author:
Sedat Kumcu

10 months ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components