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

997

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

Portfolio Hero Section 2
visually stunning and captivating hero section component for your portfolio website.

Author:
Samuel Abera

10 months ago

3.9k
Plug and Play Animated Button for Hero Statements / Landing Pages
REMOVE the bg-black from the outside <button/> div, if you are already using a black background. Besides this, the button is plug and play! Know errors: You may need to remove animate-spin for your usecase, depending on framework rendering. For SvelteKit, animate-spin is NOT needed. But the [animation:spin_4s]... is always necessary for a smooth effect. Check out my profile to join my community online or add me on LinkedIn.

Author:
Coastal UI

5 months ago

1.1k
Simple search bar

Author:
TailwindFlex

2 years ago

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

Author:
Abdul Baset Bappy

3 weeks ago

177
ForK blocks animations
ForK blocks animations

Author:
Yor Rodriguez

2 months ago

614
Search bar

Author:
Arya

2 years ago

30.5k
Ripple Button
Ripple Button is an interactive button component with a ripple animation that responds to user clicks

Author:
sachin senal

2 months ago

405
Animated Search Input
Expand on focus with smooth animation

Author:
Anonymous

6 months ago

1.4k
Hover effect card with background image
Beautiful card with background image, hover effect and gradient

Author:
Walid Ahmad

8 months ago

2.3k
Ripple Animation

Author:
Samuel Abera

2 weeks ago

279
Animated Coming Soon 4

Author:
Samuel Abera

3 months ago

769
Search input

Author:
Leon Bachmann

2 years ago

10.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components