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

Responsive Search bar

Prajwal Hallale

4 years ago

12.4k
Responsive search bar
with loading animation on submit button

Ron Hicks

3 years ago

12.7k
Animated Search bar
Animated Search bar using tailwind

Muhamad Rufaid kv

1 year ago

1.5k
Sticky Navbar
A modern, feature-rich, and fully responsive navigation bar built with Tailwind CSS. This premium navbar includes a top contact bar, multi-level mega menus, live search with suggestions, mobile drawer navigation, nested accordion menus, authentication buttons, sticky header, and smooth interactions. Perfect for SaaS, corporate, startup, agency, eCommerce, legal, education, and business websites.

JUGENDRA GANGWAR

4 months ago

300
Search bar with select
search bar like google with select filter

Cristian

2 years ago

4.4k
Animasyonlu Arama Textbox Widget
Üzerine gelince animasyonlu olarak açılan textbox.

Sedat Kumcu

2 years ago

2.8k
CTA Search Section
CTA search form

EliteAI Tools

1 year ago

1.7k
Responsive search bar

Samuel Dawson

3 years ago

19.1k
Search bar with filter options

Piet Vriend

3 years ago

26.5k
Command Palette with Search & Keyboard Navigation

JUGENDRA GANGWAR

2 months ago

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

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

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

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.3k