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

3

Fork Fullscreen

<div class="relative w-32 transition-all">
    <input
      type="text"
      placeholder="Arama.."
      id="searchInput"
      class="w-full py-2 pl-10 pr-4 text-gray-700 bg-white border rounded-full outline-none transition-all border-gray-300"
    />
    <div class="absolute inset-y-0 left-0 flex items-center pl-3">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-400 transition-all" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
      </svg>
    </div>
  </div>

<script>
    const searchInput = document.getElementById('searchInput');
    const searchContainer = searchInput.parentElement;
    const searchIcon = searchContainer.querySelector('svg');

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 button

Author:
Freja Jensen

1 year ago

10.9k
Arama Sonuçları Sayfası
Sayfa içerik türüne göre icon ile desteklenen arama formu ve arama sonuçları sayfası

Author:
Sedat Kumcu

1 day ago

5
Search bar with select
search bar like google with select filter

Author:
Cristian

5 months ago

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

Author:
Michael Andreuzza

6 months ago

1.4k
Search form

Author:
Laurits

1 year ago

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

Author:
Anonymous

1 year ago

9.5k
Marquee animation with tailwind css

Author:
Anonymous

3 months ago

1.7k
Search input

Author:
Leon Bachmann

1 year ago

9.4k
Animated cards

Author:
Prajwal Hallale

2 years ago

21.4k
Responsive search bar
with loading animation on submit button

Author:
Ron Hicks

1 year ago

9.5k
Button with Bouncing Animation

Author:
Prashant

2 years ago

11.4k
Botton hover
On hover Changes text

Author:
davilaarroyo07

8 months ago

3.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components

© 2024 TailwindFlex. All Rights Reserved.

v1.8