lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
160 lines (138 loc) • 9.47 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All Input Fields</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightwind@3.0.0/src/lightswind.css">
</head>
<body class="font-sans bg-gray-50 dark:bg-black py-12">
<div class="w-full bg-white dark:bg-black">
<div class="max-w-4xl mx-auto p-8 form-container">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Full Name Input -->
<div>
<label for="full-name" class="text-gray-800 dark:text-gray-200 text-lg font-semibold mb-2">Full
Name</label>
<input type="text" id="full-name" placeholder="John Doe"
class="w-full px-5 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-2 focus:ring-primarylw focus:outline-none transition duration-300 ease-in-out transform hover:scale-105 focus:scale-105">
</div>
<!-- Email Input -->
<div>
<label for="email-input" class="text-gray-800 dark:text-gray-200 text-lg font-semibold mb-2">Email
Address</label>
<input type="email" id="email-input" placeholder="you@example.com"
class="w-full px-5 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-2 focus:ring-primarylw focus:outline-none transition duration-300 ease-in-out transform hover:scale-105 focus:scale-105">
</div>
<!-- Password Input with Visibility Toggle -->
<div>
<label for="password-input"
class="text-gray-800 dark:text-gray-200 text-lg font-semibold mb-2">Password</label>
<div class="relative">
<input type="password" id="password-input"
class="w-full px-5 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-2 focus:ring-primarylw focus:outline-none transition duration-300 ease-in-out transform hover:scale-105 focus:scale-105">
<button class="absolute right-3 top-3 text-gray-600 dark:text-gray-400 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</button>
</div>
</div>
<!-- Date of Birth Input -->
<div>
<label for="dob-input" class="text-gray-800 dark:text-gray-200 text-lg font-semibold mb-2">Date of
Birth</label>
<input type="date" id="dob-input"
class="w-full px-5 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-2 focus:ring-primarylw focus:outline-none transition duration-300 ease-in-out transform hover:scale-105 focus:scale-105">
</div>
<!-- Phone Number Input -->
<div>
<label for="phone-input" class="text-gray-800 dark:text-gray-200 text-lg font-semibold mb-2">Phone
Number</label>
<input type="tel" id="phone-input" placeholder="+1 (555) 555-5555"
class="w-full px-5 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-2 focus:ring-primarylw focus:outline-none transition duration-300 ease-in-out transform hover:scale-105 focus:scale-105">
</div>
<!-- Select Country Input -->
<div>
<label for="country-select"
class="text-gray-800 dark:text-gray-200 text-lg font-semibold mb-2">Select Country</label>
<select id="country-select"
class="w-full px-5 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-2 focus:ring-primarylw focus:outline-none transition duration-300 ease-in-out transform hover:scale-105 focus:scale-105">
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="uk">United Kingdom</option>
<option value="au">Australia</option>
</select>
</div>
<!-- Range Input -->
<div>
<label for="range-input"
class="text-gray-800 dark:text-gray-200 text-lg font-semibold mb-2">Range</label>
<input type="range" id="range-input" min="1" max="100" step="1"
class="w-full px-5 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-2 focus:ring-primarylw focus:outline-none transition duration-300 ease-in-out transform hover:scale-105 focus:scale-105">
</div>
<!-- Switch Input -->
<div>
<label for="switch-toggle"
class="text-gray-800 dark:text-gray-200 text-lg font-semibold mb-2">Enable
Notifications</label>
<input type="checkbox" id="switch-toggle" class="hidden" />
<label for="switch-toggle" class="flex items-center cursor-pointer">
<div class="relative">
<div class="block bg-gray-400 dark:bg-gray-600 w-14 h-8 rounded-full"></div>
<div
class="dot absolute left-1 top-1 bg-white dark:bg-gray-800 w-6 h-6 rounded-full transition-all duration-300 ease-in-out">
</div>
</div>
</label>
</div>
<!-- File Upload Input -->
<div>
<label for="file-upload" class="text-gray-800 dark:text-gray-200 text-lg font-semibold mb-2">Upload
File</label>
<div class="relative">
<input type="file" id="file-upload"
class="w-full px-5 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-2 focus:ring-primarylw focus:outline-none transition duration-300 ease-in-out transform hover:scale-105 focus:scale-105">
<button class="absolute right-3 top-3 text-gray-600 dark:text-gray-400 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</button>
</div>
</div>
<!-- Textarea Input -->
<div>
<label for="message-input"
class="text-gray-800 dark:text-gray-200 text-lg font-semibold mb-2">Message</label>
<textarea id="message-input" rows="4" placeholder="Type your message here"
class="w-full px-5 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-2 focus:ring-primarylw focus:outline-none transition duration-300 ease-in-out transform hover:scale-105 focus:scale-105"></textarea>
</div>
<!-- Color Picker Input -->
<div>
<label for="color-picker" class="text-gray-800 dark:text-gray-200 text-lg font-semibold mb-2">Color
Picker</label>
<input type="color" id="color-picker"
class="w-16 h-16 border-2 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 cursor-pointer rounded-lg transition-all focus:outline-none focus:ring-2 focus:ring-primarylw">
<p id="color-code" class="mt-2 text-gray-800 dark:text-gray-200 text-lg font-semibold">#000000</p>
</div>
</div>
<div class="mt-10 flex justify-center">
<button type="submit"
class="px-6 py-3 bg-primarylw text-white rounded-lg focus:outline-none hover:bg-primarylw-2 transition duration-300 ease-in-out transform hover:scale-105"
disabled>Submit</button>
</div>
</div>
</div>
<script>
// Color Picker Logic
const colorPicker = document.getElementById('color-picker');
const colorCode = document.getElementById('color-code');
colorPicker.addEventListener('input', function () {
colorCode.textContent = colorPicker.value;
});
</script>
</body>
</html>