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

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

CTA Search Section
CTA search form

Author:
EliteAI Tools

1 year ago

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

9 months ago

915
No distraction search field

Author:
_Amar_

2 years ago

12.2k
Search input

Author:
Leon Bachmann

3 years ago

11k
Hero Section
Home hero section search bar

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

7.8k
Expanding Search Bar
Onclick search bar expands for input

Author:
Nomthandazo Mhlongo

1 year ago

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

Author:
Bishnu Thapa

1 year ago

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

9 months ago

1.3k
Responsive search bar

Author:
Samuel Dawson

3 years ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

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

Author:
Sedat Kumcu

1 year ago

2.1k
Search form section with a background SVG gradient

Author:
TailwindFlex

3 years ago

14.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components