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

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

Search box
Search bar with a button inside

Author:
Anonymous

1 year ago

3.7k
Modern page
hero page by salvator

Author:
Baraka Salvator

7 months ago

1k
Responsive search bar

Author:
Samuel Dawson

2 years ago

18.2k
Plasma
plasma

Author:
Raul antonio de la cruz hernandez

2 months ago

486
Midnight Lava Lamp
Inspired by Steam's old "Big Picture" ambiance. Based on anonymous/background-animation-2

Author:
Nick Girga

7 months ago

1k
Animated cards

Author:
Michael Andreuzza

1 year ago

6.8k
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

6 months ago

944
Animated Info Card
Animated info card

Author:
Shivam Vishwakarma

11 months ago

1.3k
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

510
Typewriter effect
using javascript

Author:
Samuel Dawson

2 years ago

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

Author:
Anonymous

2 years ago

13.1k
Animated Coming Soon Page 3

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

1 year ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components