Tailwind Form
Tailwind form component component with Alpine.js
![Tailwind Form Image 1](/_ipx/_/tailwind-form.png)
Details About Tailwind Form
Key points:
- Open Source
- JavaScript Plugin
- Copy & Paste
- Tailwind CSS v3.0+
- Responsive Design
Contents
Code Example
<div class="min-h-screen flex items-center justify-center bg-gray-100">
<div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-md">
<h2 class="text-2xl font-bold mb-6 text-gray-800">Contact Us</h2>
<form x-data="{ name: '', email: '', message: '' }" class="space-y-4">
<div>
<label for="name" class="block text-gray-600 font-medium">Name</label>
<input type="text" id="name" class="w-full mt-1 p-2 border border-gray-300 rounded focus:ring focus:ring-indigo-500" x-model="name" placeholder="Your Name" />
</div>
<div>
<label for="email" class="block text-gray-600 font-medium">Email</label>
<input type="email" id="email" class="w-full mt-1 p-2 border border-gray-300 rounded focus:ring focus:ring-indigo-500" x-model="email" placeholder="[email protected]" />
</div>
<div>
<label for="message" class="block text-gray-600 font-medium">Message</label>
<textarea id="message" class="w-full mt-1 p-2 border border-gray-300 rounded focus:ring focus:ring-indigo-500" x-model="message" placeholder="Your message..." rows="4"></textarea>
</div>
<div>
<button type="button" @click.prevent="submitForm" class="w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-500 focus:outline-none focus:ring focus:ring-indigo-500">
Send Message
</button>
</div>
</form>
</div>
</div>
<script>
function submitForm() {
const formData = {
name: this.name,
email: this.email,
message: this.message
};
console.log('Form Data:', formData);
// Add your form submission logic here
}
</script>
FAQ
How do I install Alpine.js into my project?
To install Alpine.js in your project, you can use a CDN by adding a script tag to your HTML file. Alternatively, you can install it via npm by running the appropriate command in your terminal and then importing it into your JavaScript file. Visit alpinejs.dev/essentials/installation for the official install gudie.