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

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 box
Search bar with a button inside

Author:
Anonymous

1 year ago

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

869
Call to action
slightly tilted call to action section

Author:
Simon Scheffer

2 years ago

11.1k
Responsive Search bar

Author:
Prajwal Hallale

3 years ago

12.3k
Search bar

Author:
Arya

2 years ago

32.1k
search button

Author:
Freja Jensen

2 years ago

12.7k
No distraction search field

Author:
_Amar_

2 years ago

12k
Animated Search bar
Animated Search bar using tailwind

Author:
Muhamad Rufaid kv

5 months ago

604
Simple search input field

Author:
Santos78

2 years ago

12.6k
Content Discovery Platform with Search & Filter
A modern, responsive web application built with Tailwind CSS that showcases content cards with search and filter functionality.

Author:
Sufyan jutt

2 weeks ago

63
Search form

Author:
Laurits

2 years ago

11.6k
Search bar with filter options

Author:
Piet Vriend

2 years ago

25.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components