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

2.2k

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

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

5 months ago

768
Search input

Author:
Leon Bachmann

2 years ago

10.7k
Animated Search bar
Animated Search bar using tailwind

Author:
Muhamad Rufaid kv

5 months ago

592
Large search bar with icon

Author:
Prajwal Hallale

3 years ago

10.3k
Call to action
slightly tilted call to action section

Author:
Simon Scheffer

2 years ago

11.1k
Responsive search bar
with loading animation on submit button

Author:
Ron Hicks

2 years ago

11.6k
Search form section with a background SVG gradient

Author:
TailwindFlex

2 years ago

14.4k
Search box
Search bar with a button inside

Author:
Anonymous

1 year ago

3.5k
No distraction search field

Author:
_Amar_

2 years ago

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

Author:
Cristian

1 year ago

3.6k
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)

5 months ago

683
Search bar

Author:
Arya

2 years ago

32.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components