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 v3.4. It is responsive. similar terms for this example is find

Search Bar

Author Anonymous

Tailwind v3.4 3k 7

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

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

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.6k
Call to action
slightly tilted call to action section

Simon Scheffer

3 years ago

11.9k
search button

Freja Jensen

3 years ago

13.2k
Expanding Search Bar
Onclick search bar expands for input

Nomthandazo Mhlongo

2 years ago

4.7k
Search form

Laurits

3 years ago

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

Cristian

2 years ago

4.3k
Responsive Search bar

Prajwal Hallale

3 years ago

12.4k
Arama Sonuçları Sayfası
Sayfa içerik türüne göre icon ile desteklenen arama formu ve arama sonuçları sayfası

Sedat Kumcu

1 year ago

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

Muhamad Rufaid kv

1 year ago

1.9k
Search bar

Arya

3 years ago

32.9k
Command Palette with Search & Keyboard Navigation

JUGENDRA GANGWAR

1 month ago

70
Clone of Google’s Search Functionality
This Tailwind CSS example, contributed by Bishnu Thapa on April 4th, 2024, showcases a responsive component designed using version 3.4 of Tailwind CSS. It is responsive.

Bishnu Thapa

2 years ago

3.7k