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

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

Typewriter effect
using javascript

Author:
Samuel Dawson

2 years ago

42.3k
Animated cards

Author:
Prajwal Hallale

3 years ago

29.1k
Search bar with select
search bar like google with select filter

Author:
s c

10 months ago

965
Responsive 3D Car Delivery Animation Tutorial
Responsive 3D Car Delivery Animation Tutorial

Author:
Bonimater

7 months ago

611
Loading Spinner Component - Animated Circle Loader
Loading spinner component featuring a smooth animated circle loader with dashed border animation. Perfect for website loading states, content loading indicators, and improving user experience during page transitions. Easy to implement and customize for any project.

Author:
Homayoun

3 months ago

626
Animated cards

Author:
Michael Andreuzza

1 year ago

6.9k
Login form with fully functionl and best
@sufyandevs #sufyandevs #sufyandev #shanwebdev

Author:
Sufyan jutt

2 months ago

211
Marquee animation with tailwind css

Author:
Anonymous

1 year ago

8.7k
Responsive search bar
with loading animation on submit button

Author:
Ron Hicks

3 years ago

11.9k
Bug Beach Day Heatwave
This playful animation brings sweltering summer insects to life with pure HTML and Tailwind CSS. Watch as: 🔥 Glowing Fireflies pulse with heat-radiant light, their wings shimmering in the desert sun 🐞 Overheated Ladybugs scuttle across cracked earth, their red shells reflecting the blazing heat ☀️ A Wobbling Sun dominates the sky, emitting pulsing heat waves across the animated landscape

Author:
Bonimater

7 months ago

972
Modern page
hero page by salvator

Author:
Baraka Salvator

8 months ago

1.2k
Glassmorphic Animated Searchabar
This is a sleek, animated search bar designed with Tailwind CSS using a glassmorphic aesthetic. It features a semi-transparent background with a blur effect to create a frosted-glass look. When focused, the search bar smoothly expands to enhance user interaction. It includes a built-in search icon and fully supports responsive design, making it ideal for modern, visually polished web interfaces.

Author:
Muhamad Rufaid kv

7 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components