Home
Michael Andreuzza
Search input with Tailwind CSS and Alpinejs

Search input with Tailwind CSS and Alpinejs

How to create a search input with Tailwind CSS and Alpinejs

This tailwind example is contributed by Michael Andreuzza, on 09-May-2024. Component is made with Tailwind CSS v3. It is responsive.

Input

Author Michael Andreuzza

3.2k

Fork Fullscreen

<section class="bg-white relative overflow-hidden" x-data="{ isOpen: false }">
 <div class="w-full mx-auto 2xl:max-w-7xl flex flex-col justify-center py-24 relative p-8">
  <div class="prose text-gray-500 prose-sm prose-headings:font-normal prose-headings:text-xl mx-auto max-w-sm w-full">
   <div>
    <h1>Simple search</h1>
    <p class="text-balance">Search for the words you are looking for.</p>
   </div>
  </div>
  <div class="mt-6 border-t pt-12 max-w-sm mx-auto w-full">
   
   <div x-data="{
        searchQuery: '',
        items: [
            'Milano', 'Alicante', 'Switzerland', 'Bilbao', 'Åland Islands', 'Stockholm', 'Torrevieja', 'Minneapolis'
        ].map(item => ({ name: item }))
    }">
     <input type="text" x-model="searchQuery" placeholder="Search..." class="w-full border-gray-300 rounded-md placeholder-gray-400 text-sm focus:border-orange-500 focus:ring-orange-500"> 
    <ul class="mt-12 text-sm space-y-2 text-gray-500 list-disc list-inside"> <template x-for="item in items" :key="item.name">
      <li x-show="item.name.toLowerCase().includes(searchQuery.toLowerCase())" x-text="item.name"></li>
     </template>
     <li x-show="item.name.toLowerCase().includes(searchQuery.toLowerCase())" x-text="item.name">Milano</li>
     <li x-show="item.name.toLowerCase().includes(searchQuery.toLowerCase())" x-text="item.name">Alicante</li>
     <li x-show="item.name.toLowerCase().includes(searchQuery.toLowerCase())" x-text="item.name">Switzerland</li>
     <li x-show="item.name.toLowerCase().includes(searchQuery.toLowerCase())" x-text="item.name">Bilbao</li>
     <li x-show="item.name.toLowerCase().includes(searchQuery.toLowerCase())" x-text="item.name">Åland Islands</li>
     <li x-show="item.name.toLowerCase().includes(searchQuery.toLowerCase())" x-text="item.name">Stockholm</li>
     <li x-show="item.name.toLowerCase().includes(searchQuery.toLowerCase())" x-text="item.name">Torrevieja</li>
     <li x-show="item.name.toLowerCase().includes(searchQuery.toLowerCase())" x-text="item.name">Minneapolis</li>
    </ul>
   </div> 
   
   <div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center p-2">
    <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-xl border">
     <div class="flex w-0 flex-1 items-center p-4">
      <div class="w-full">
       <p class="text-sm font-medium text-neutral-900">Tutorial</p>
       <p class="mt-1 text-sm text-neutral-500">
        How to create a search input with Tailwind CSS and Alpinejs
       </p>
       <p class="mt-2 text-xs text-orange-500 underline"> <a href="https://lexingtonthemes.com">
         by © Lexington Themes</a> </p>
      </div>
     </div>
     <div class="flex">
      <div class="flex flex-col divide-y divide-neutral-200">
       <div class="flex h-0 flex-1"> <a href="https://lexingtonthemes.com/tutorials/how-to-create-a-search-input-with-tailwind-css-and-alpinejs/" type="button" class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-500 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-500">Tutorial</a> </div>
       <div class="flex h-0 flex-1"> <a href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/search/index.astro" class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-500">Get the code</a> </div>
      </div>
     </div>
    </div>
   </div> 
  </div>
 </div>
</section>

Related Examples

Responsive Footer Section
This modern and responsive footer adapts seamlessly to all screen sizes, ensuring a clean and organized layout. It includes essential navigation links, contact details, and a subscription form, all structured for easy access. Using display: contents;, the design remains flexible and visually balanced, enhancing the user experience across devices.

Author:
ABDO-SY

11 months ago

683
Multi Range Slider
Adjust the sliders to set your preferred price range. The left slider sets the minimum price, and the right slider sets the maximum price. The selected range is displayed below the sliders in real-time, allowing you to easily filter products within your budget.

Author:
SHARIFUL ISLAM

1 year ago

1.9k
Date picker
Date picker example using flatpickr library

Author:
Lîmåã M

2 years ago

17.2k
File upload with icon

Author:
Fagundo67

3 years ago

18k
Email input

Author:
Sophia Baker

3 years ago

11.3k
Incentives
tailwind css Incentives

Author:
Anonymous

2 years ago

5.3k
Large File upload input

Author:
Akshay

3 years ago

14.7k
Premium Gaming UI Card, Form & Animated Button (Tailwind CSS)
A modern, senior-level gaming UI built with Tailwind CSS focusing on spacing, typography, and calm visual hierarchy rather than noisy effects. This component set includes: A premium gaming card with clear content structure and outcome-focused copy A clean player signup form with accessible focus states and minimal visual noise A custom animated button using a restrained light-sweep effect for premium interaction feedback Designed to resemble real production gaming platforms rather than demo or template UI. Fully responsive, copy-paste ready, and easy to extend for real-world projects.

Author:
Ayyamperumal S

2 months ago

215
Radio Buttons
Users can click anywhere on the input field to select the radio option

Author:
Prajwal Hallale

3 years ago

17k
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

Author:
SHARIFUL ISLAM

1 year ago

1.5k
File Upload

Author:
Rajesh Maheshwari

1 year ago

1k
Simple OTP box Form
A Simple OTP form with full responsiveness && dark mode supported

Author:
Shariar Hasan

2 years ago

3.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components