Tailwind Form

Free

Tailwind form component component with Alpine.js

Tailwind Form Image 1
Details About Tailwind Form
Key points:
  • Responsive Design
  • Tailwind CSS v3.0+
  • Copy & Paste
  • JavaScript Plugin
  • Open Source

 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.

Featured Tailwind Components

Discover the most popular Tailwind CSS ui components and elements. Browse top-notch Tailwind components to enhance your development process.

Preline UI HOT

Open-source set of prebuilt UI components based on the utility-first Tailwind CSS.