Home
SANJAY SINGH GARIYA
Multi-Select Dropdown Filter with search

Multi-Select Dropdown Filter with search

Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

This tailwind example is contributed by SANJAY SINGH GARIYA, on 11-Jun-2025. Component is made with Tailwind CSS v3. It is responsive.

Form Select Dropdown Tag Cloud

Author SANJAY SINGH GARIYA

1.1k

Fork Fullscreen

<div class=" mx-auto">
                        
                        <div class="text-center mb-4 animate-fade-in">
                            
                            <h1 class="text-3xl font-bold bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent mb-2">
                                Customer Registration
                            </h1>
                            <p class="text-gray-600">Please provide your details to complete the registration</p>
                        </div>
                
                        
                        <div class="glass-effect rounded-2xl shadow-2xl border border-white/20 p-8 animate-slide-up">
                            <form id="customerForm" class="space-y-6">
                                
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div class="group">
                                        <label for="lsinumber" class="text-start block text-base font-semibold text-gray-700 mb-2 group-hover:text-blue-600 transition-colors">
                                            LSI Number <span class="text-red-500">*</span>
                                        </label>
                                        <div class="relative">
                                            <input 
                                                type="text" 
                                                id="lsinumber" 
                                                name="lsi" 
                                                required
                                                class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:ring-0 transition-all duration-300 bg-white/50 hover:bg-white/80 placeholder-gray-400"
                                                placeholder="Enter LSI number"
                                            >
                                            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                                <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
                                                </svg>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="group">
                                        <label for="customerName" class="text-start block text-base font-semibold text-gray-700 mb-2 group-hover:text-blue-600 transition-colors">
                                            Customer Name <span class="text-red-500">*</span>
                                        </label>
                                        <div class="relative">
                                            <input 
                                                type="text" 
                                                id="customerName" 
                                                name="customername" 
                                                required
                                                class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:ring-0 transition-all duration-300 bg-white/50 hover:bg-white/80 placeholder-gray-400"
                                                placeholder="Enter full name"
                                            >
                                            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                                <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                                </svg>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                
                                
                                <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-6 border border-blue-100">
                                    <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
                                        <svg class="w-5 h-5 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                        </svg>
                                        Location Details
                                    </h3>
                                    
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                        <div class="group">
                                            <label for="latitude" class="text-start block text-base font-semibold text-gray-700 mb-2 group-hover:text-blue-600 transition-colors">
                                                Latitude <span class="text-red-500">*</span>
                                            </label>
                                            <input 
                                                type="number" 
                                                id="latitude" 
                                                name="latitude" 
                                                step="any"
                                                required
                                                class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:ring-0 transition-all duration-300 bg-white/50 hover:bg-white/80 placeholder-gray-400"
                                                placeholder="e.g. 28.6139"
                                            >
                                        </div>
                                        
                                        <div class="group">
                                            <label for="longitude" class="text-start block text-base font-semibold text-gray-700 mb-2 group-hover:text-blue-600 transition-colors">
                                                Longitude <span class="text-red-500">*</span>
                                            </label>
                                            <input 
                                                type="number" 
                                                id="longitude" 
                                                name="longitude" 
                                                step="any"
                                                required
                                                class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:ring-0 transition-all duration-300 bg-white/50 hover:bg-white/80 placeholder-gray-400"
                                                placeholder="e.g. 77.2090"
                                            >
                                        </div>
                                    </div>
                                </div>
                
                                
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div class="group">
                                        <label for="city" class="text-start block text-base font-semibold text-gray-700 mb-2 group-hover:text-blue-600 transition-colors">
                                            City <span class="text-red-500">*</span>
                                        </label>
                                        <div class="relative">
                                            <input 
                                                type="text" 
                                                id="city" 
                                                name="city" 
                                                required
                                                class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:ring-0 transition-all duration-300 bg-white/50 hover:bg-white/80 placeholder-gray-400"
                                                placeholder="Enter city name"
                                            >
                                            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                                <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                                                </svg>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="group">
                                        <label for="mobileNo" class="text-start block text-base font-semibold text-gray-700 mb-2 group-hover:text-blue-600 transition-colors">
                                            Mobile Number <span class="text-red-500">*</span>
                                        </label>
                                        <div class="relative">
                                            <input 
                                                type="tel" 
                                                id="mobileNo" 
                                                name="mobileNo" 
                                                required
                                                pattern="[0-9]{10}"
                                                maxlength="10"
                                                class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:ring-0 transition-all duration-300 bg-white/50 hover:bg-white/80 placeholder-gray-400"
                                                placeholder="Enter 10-digit number"
                                            >
                                            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                                <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <p class="text-xs text-gray-500 mt-2 flex items-center">
                                            <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
                                            </svg>
                                            Please enter a valid 10-digit mobile number
                                        </p>
                                    </div>
                                </div>
                
                                
                                <div class="pt-6">
                                    <button 
                                        type="submit"
                                        class="w-full bg-gradient-to-r from-blue-600 to-indigo-600 text-white py-4 px-6 rounded-xl font-semibold text-xl shadow-lg hover:from-blue-700 hover:to-indigo-700 focus:outline-none focus:ring-4 focus:ring-blue-300 transform hover:scale-[1.02] transition-all duration-300 active:scale-[0.98]"
                                    >
                                        <span class="flex items-center justify-center">
                                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                            </svg>
                                            Submit Customer Details
                                        </span>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>

Related Examples

Dropdown select on hover
this example does not uses javascript

Author:
Alok

2 years ago

30.5k
Drop Down
This component is a Select Input Or Dropdown UI & Dark mode Supported Component

Author:
Shariar Hasan

1 year ago

6.3k
Dropdown select on hover
this example does not uses javascript

Author:
Thomas Taylor

1 year ago

2.6k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
Maxim

1 year ago

5.2k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
Anonymous

11 months ago

1.9k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
Anonymous

11 months ago

1.3k
User List
List of users

Author:
Marcos Vinicios Nussemeyer

9 months ago

1.4k
RegistrationForm

Author:
Ramesh Kumar Sah

4 months ago

293
Profile Form
Enhanced User Profile Form with Stunning Profile and Cover Image Fields

Author:
Steve NGOYA

8 months ago

1.1k
Animated modal with Tailwind Css and alpinejs

Author:
Michael Andreuzza

1 year ago

3.6k
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

9 months ago

1.1k
Responsive Bank Card Information Form with TailwindCSS
A sleek and modern bank card information form built with raw HTML and styled using TailwindCSS. This responsive form includes fields for cardholder name, card number, expiry date, and CVV, designed for clean aesthetics and ease of use.

Author:
SHARIFUL ISLAM

1 year ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components