Home
Sedat Kumcu
Animasyonlu Arama Textbox Widget

Animasyonlu Arama Textbox Widget

Forked from> @anonymous/animated-search-form

Üzerine gelince animasyonlu olarak açılan textbox.

This tailwind example is contributed by Sedat Kumcu, on 05-Nov-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are find,Transitions

Search Bar Animation

Author Sedat Kumcu

1.4k

Fork Fullscreen

searchInput.addEventListener('focus', () => {
      searchContainer.classList.add('w-96', 'bg-white');
      searchContainer.classList.remove('w-32');
      searchInput.placeholder = "Yazın ve Enter'a basın ↵";
      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-32');
      searchContainer.classList.remove('w-96', 'bg-white');
      searchInput.placeholder = "Arama..";
      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

Author:
Prajwal Hallale

2 years ago

12.2k
Search form

Author:
Laurits

2 years ago

11.4k
car delivary
it is used especially in e-commerce when you you are going to deliver

Author:
Bonimater

3 months ago

520
Animated Profile Card
Animated profile card with profile completion circle

Author:
Shivam Vishwakarma

8 months ago

1.2k
Search form section with a background SVG gradient

Author:
TailwindFlex

2 years ago

14.2k
Botton hover
On hover Changes text

Author:
davilaarroyo07

1 year ago

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

3 months ago

369
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.6k
Responsive 3D Car Delivery Animation Tutorial
Responsive 3D Car Delivery Animation Tutorial

Author:
Bonimater

3 months ago

404
Hover effect card with background image
Beautiful card with background image, hover effect and gradient

Author:
Walid Ahmad

1 year ago

3.3k
Large search bar with icon

Author:
Prajwal Hallale

3 years ago

10.3k
Full width search section with title

Author:
TailwindFlex

2 years ago

11.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components