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

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

ForK blocks animations
ForK blocks animations

Author:
Yor Rodriguez

4 months ago

1k
E-Commerce Delivery Truck Animation
This responsive CSS animation showcases a delivery bus transporting a package to its destination, created entirely with Tailwind CSS and pure HTML. The animation features

Author:
Bonimater

1 week ago

10
3D Animated Image Gallery
3D Animated Image Gallery

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

1 year ago

7.2k
Animated cards

Author:
Prajwal Hallale

2 years ago

26.5k
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Acode Master(Mfuranziza Dusabe Hamza)

1 week ago

68
Animated button
on hover underline will go from left to right

Author:
Anonymous

1 year ago

3.9k
Large search bar with icon

Author:
Prajwal Hallale

2 years ago

10.2k
Smooth Slide-in Animation for Text in Tailwind CSS
Learn how to create a smooth slide-in animation for text using Tailwind CSS. This guide covers defining custom animations in tailwind.config.js and applying them to elements for a modern and engaging UI effect. 🚀

Author:
Vikas Kushwah

2 months ago

486
Loading dots
Black Loading dots

Author:
Anonymous

1 year ago

35.4k
Responsive search bar
with loading animation on submit button

Author:
Ron Hicks

2 years ago

10.9k
Call to action
slightly tilted call to action section

Author:
Simon Scheffer

2 years ago

10.5k
background animation
background animation

Author:
Jayendra Madara

10 months ago

2.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components