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.6k

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

Simple search bar

Author:
TailwindFlex

2 years ago

11.3k
ULTIMATE SNAKE
(click to https://quantum-snake.netlify.app/ )ULTIMATE SNAKE is a modern reimagining of the classic Snake game, blending retro gameplay with enhanced visuals, power-ups, and a dynamic difficulty system. Designed for both casual players and high-score chasers, this game brings nostalgia and excitement in every move.

Author:
Acode Master(Mfuranziza Dusabe Hamza)

5 days ago

37
Search box
Search bar with a button inside

Author:
Anonymous

1 year ago

3k
Search form section with a background SVG gradient

Author:
TailwindFlex

2 years ago

13.8k
Large search bar with icon

Author:
Prajwal Hallale

2 years ago

10.2k
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:
Acode Master(Mfuranziza Dusabe Hamza)

1 week ago

67
CTA Search Section
CTA search form

Author:
EliteAI Tools

4 months ago

569
Responsive search bar
with loading animation on submit button

Author:
Ron Hicks

2 years ago

10.9k
search button

Author:
Freja Jensen

2 years ago

12.1k
Search form

Author:
Laurits

2 years ago

11.2k
Hero Section
Home hero section search bar

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

1 year ago

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

Author:
s c

2 months ago

409

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components