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

2.1k

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

PortfoClean & Colorful Hero Section for Developer Portfolios (Tailwind CSS + Dark Mode)

Author:
SAI BENDE

7 months ago

1k
Dynamic Service Showcase with Interactive Flip Cards
This component presents a visually engaging service section featuring interactive flip cards. Each service card displays an image on the front and reveals details on the back when hovered over. The layout is responsive, ensuring seamless adaptability across various screen sizes. The hover effect adds a modern and engaging touch, enhancing user interaction.

Author:
Vikas Kushwah

11 months ago

1.6k
Search bar with filter options

Author:
Piet Vriend

3 years ago

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

Author:
Michael Andreuzza

1 year ago

3.4k
Animated Search bar
Animated Search bar using tailwind

Author:
Muhamad Rufaid kv

9 months ago

1k
Typewriter animation effect
Build using only Tailwind CSS; no JavaScript is required. This is a continuous typing effect. If you want to stop it after the text is typed for the first time, then you can remove 'infinite' from [typing: 'typing 2s steps(20) infinite alternate, blink .7s infinite'] from the config file.

Author:
Samuel Dawson

2 years ago

21.3k
Ripple Animation

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

11 months ago

2.1k
Loading dots
Black Loading dots

Author:
Anonymous

2 years ago

39.5k
Expandable Card
An expandable card using tailwind + alpine to show additional information when it is open

Author:
farid

5 months ago

496
background animation
background animation

Author:
Jayendra Madara

1 year ago

3.2k
3D product Card
The product card has been fully recoded using a light (black-and-white) color theme. Let me know if you want to add more interactivity, change the layout, or adapt it for mobile or dark mode.

Author:
Nicole Shalom

9 months ago

1.2k
background animation
background animation

Author:
Anonymous

2 years ago

50.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components