<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS Input Form Examples</title> <script src="https://cdn.tailwindcss.com"></script> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script> </head> <body class="bg-gray-50 min-h-screen py-12 px-4"> <div class="max-w-4xl mx-auto space-y-12"> <!-- Header --> <div class="text-center"> <h1 class="text-3xl font-bold text-gray-900 mb-2">Input Form Design Examples</h1> <p class="text-gray-600">Minimal and professional form components</p> </div> <!-- Basic Input Form --> <div class="bg-white rounded-lg shadow-sm p-8"> <h2 class="text-xl font-semibold text-gray-900 mb-6">Basic Input Form</h2> <form class="space-y-5"> <div> <label class="block text-sm font-medium text-gray-700 mb-2">Full Name</label> <input type="text" placeholder="Enter your name" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-2">Email Address</label> <input type="email" placeholder="you@example.com" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition"> </div> <button type="submit" class="w-full bg-blue-600 text-white py-2.5 rounded-lg hover:bg-blue-700 transition font-medium">Submit</button> </form> </div> <!-- Input with Icons --> <div class="bg-white rounded-lg shadow-sm p-8"> <h2 class="text-xl font-semibold text-gray-900 mb-6">Input with Icons</h2> <form class="space-y-5"> <div> <label class="block text-sm font-medium text-gray-700 mb-2">Email</label> <div class="relative"> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <ion-icon name="mail-outline" class="text-gray-400"></ion-icon> </div> <input type="email" placeholder="Enter email" class="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition"> </div> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-2">Phone</label> <div class="relative"> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <ion-icon name="call-outline" class="text-gray-400"></ion-icon> </div> <input type="tel" placeholder="+1 (555) 000-0000" class="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition"> </div> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-2">Location</label> <div class="relative"> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <ion-icon name="location-outline" class="text-gray-400"></ion-icon> </div> <input type="text" placeholder="City, Country" class="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition"> </div> </div> </form> </div> <!-- Password Input with Toggle --> <div class="bg-white rounded-lg shadow-sm p-8" x-data="{ showPassword: false }"> <h2 class="text-xl font-semibold text-gray-900 mb-6">Password Input with Toggle</h2> <form class="space-y-5"> <div> <label class="block text-sm font-medium text-gray-700 mb-2">Password</label> <div class="relative"> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <ion-icon name="lock-closed-outline" class="text-gray-400"></ion-icon> </div> <input :type="showPassword ? 'text' : 'password'" placeholder="Enter password" class="w-full pl-10 pr-12 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition"> <button type="button" @click="showPassword = !showPassword" class="absolute inset-y-0 right-0 pr-3 flex items-center"> <ion-icon :name="showPassword ? 'eye-off-outline' : 'eye-outline'" class="text-gray-400 hover:text-gray-600"></ion-icon> </button> </div> </div> </form> </div> <!-- Search Input --> <div class="bg-white rounded-lg shadow-sm p-8"> <h2 class="text-xl font-semibold text-gray-900 mb-6">Search Input</h2> <div class="relative"> <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"> <ion-icon name="search-outline" class="text-gray-400"></ion-icon> </div> <input type="search" placeholder="Search..." class="w-full pl-11 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition"> </div> </div> <!-- Contact Form --> <div class="bg-white rounded-lg shadow-sm p-8"> <h2 class="text-xl font-semibold text-gray-900 mb-6">Contact Form</h2> <form class="space-y-5"> <div class="grid grid-cols-1 md:grid-cols-2 gap-5"> <div> <label class="block text-sm font-medium text-gray-700 mb-2">First Name</label> <input type="text" placeholder="John" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-2">Last Name</label> <input type="text" placeholder="Doe" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition"> </div> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-2">Email</label> <input type="email" placeholder="john.doe@example.com" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-2">Message</label> <textarea rows="4" placeholder="Your message here..." class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition resize-none"></textarea> </div> <button type="submit" class="w-full bg-blue-600 text-white py-2.5 rounded-lg hover:bg-blue-700 transition font-medium flex items-center justify-center gap-2"> <span>Send Message</span> <ion-icon name="send-outline"></ion-icon> </button> </form> </div> <!-- Select and Checkbox --> <div class="bg-white rounded-lg shadow-sm p-8"> <h2 class="text-xl font-semibold text-gray-900 mb-6">Select & Checkbox</h2> <form class="space-y-5"> <div> <label class="block text-sm font-medium text-gray-700 mb-2">Country</label> <select class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition bg-white"> <option>Select a country</option> <option>United States</option> <option>United Kingdom</option> <option>Canada</option> <option>Australia</option> </select> </div> <div class="flex items-center gap-2"> <input type="checkbox" id="terms" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-2 focus:ring-blue-500"> <label for="terms" class="text-sm text-gray-700">I agree to the terms and conditions</label> </div> <button type="submit" class="bg-blue-600 text-white px-6 py-2.5 rounded-lg hover:bg-blue-700 transition font-medium">Continue</button> </form> </div> </div> </body> </html>
Login to leave a comment
No comments yet. Be the first!
No comments yet. Be the first!