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

2.6k

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

Profile Form
Profile form for taking user inputs

Author:
TailwindFlex

3 years ago

14.6k
Default phone input

Author:
Md. Tofayel islam

1 year ago

2.7k
Incentives
tailwind css Incentives

Author:
Anonymous

1 year ago

4.9k
Custom Date Picker with TailwindCSS and Vanilla JavaScript
A lightweight, responsive date picker built with TailwindCSS for styling and vanilla JavaScript for interactivity. It includes an input field with a calendar dropdown, month navigation, and a “Today” shortcut button. The component is designed to be mobile-friendly, easy to customize, and can be integrated into any project without dependencies like React or external UI libraries.

Author:
SHARIFUL ISLAM

3 weeks ago

54
beautiful tailwind contact form
beautiful tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

5.5k
Input Formulario
Input used in the form Link form: https://tailwindflex.com/@ameth1208/login

Author:
Ameth Galarcio

1 year ago

2.1k
Textarea input
Fancy Textarea

Author:
Piet Vriend

2 years ago

10.6k
Material 3 Checkboxes [Light]
Checkboxes that conform to Google's Material 3 design guidelines

Author:
Nick Girga

3 months ago

175
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

5 months ago

525
Elegant OTP Input Fields with TailwindCSS
A clean and responsive OTP input field component built with TailwindCSS. This design features six single-character input fields with smooth transitions, light gray borders, and backgrounds. On focus, the borders turn blue, creating a visually appealing and user-friendly experience. Perfect for authentication and verification forms.

Author:
SHARIFUL ISLAM

7 months ago

1.1k
File upload input section with file preview

Author:
Noob

3 years ago

11.8k
Range slider
Range slider with upper limit and lower limit.

Author:
Alok

2 years ago

11.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components