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

No distraction search field

Author:
_Amar_

2 years ago

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

4 months ago

381
search button

Author:
Freja Jensen

2 years ago

12.6k
Search bar with filter options

Author:
Piet Vriend

2 years ago

25k
Search bar with icon

Author:
Steven Kuhn

3 years ago

14.7k
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
Animated Search bar
Animated Search bar using tailwind

Author:
Muhamad Rufaid kv

4 months ago

458
Search input

Author:
Leon Bachmann

2 years ago

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

Author:
s c

6 months ago

855
Todo List with Dark theme
Todo List with Dark theme

Author:
Muzammil Riaz

4 months ago

383
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

4 months ago

748

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components