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

Search Bar Animation

Author Sedat Kumcu

Tailwind v3.4 2.8k 6

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

3d car delivary
3d car delivary

Bonimater

1 year ago

1.7k
Animated Light/Dark Mode Toggle
👉🏻3D glow effects on knob & track 👉🏻Gradient transitions that look holographic 👉🏻Animated pulse when active 👉🏻Dark background gradient instead of a flat color 👉🏻Emoji swap (☀️ → 🌙)

UI-Templates

1 year ago

1.1k
car delivary
car delivary

bonheur dev

1 year ago

1.3k
change background color on scroll with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

3.7k
Loading dots
Black Loading dots

Никита (Whiso)

1 year ago

2.8k
Responsive Projects Section

ariaw

1 year ago

1.4k
background animation
background animation

Anonymous

3 years ago

53.2k
Card animate

Raul antonio de la cruz hernandez

1 year ago

1.6k
Elevated Buton
On hover merge shadow

Anonymous

2 years ago

3.2k
Animated Profile Card
Animated profile card with profile completion circle

Shivam Vishwakarma

1 year ago

2.3k
Pixel Blast
Pixel Blast

Raul antonio de la cruz hernandez

1 year ago

1.4k
Responsive Cards with Hover Text Reveal Animation - Built with Tailwind CSS
nhance your website with these sleek, responsive cards designed using Tailwind CSS! Featuring a stylish hover animation, the text smoothly reveals when you hover over the card, adding a dynamic touch to your user interface. Perfect for portfolios, team profiles, or project showcases, this design adapts seamlessly to all screen sizes.

Abdul Baset Bappy

1 year ago

2.3k