Form Components

Beautiful, responsive form components built with TailwindCSS. Perfect for login, signup, contact, newsletter, checkout, and more. Copy, paste, and customize for React, Vue, or HTML.

1) Login Form

Modern login form with email, password, and remember me.

Forgot? 
<form class="w-full max-w-sm space-y-4">
  <div>
    <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
    <input id="email" type="email" placeholder="you@example.com"
      class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-purple-500 focus:border-purple-500"/>
  </div>
  <div>
    <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
    <input id="password" type="password" placeholder="••••••••"
      class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-purple-500 focus:border-purple-500"/>
  </div>
  <div class="flex items-center justify-between">
    <label class="flex items-center gap-2 text-sm text-gray-600">
      <input type="checkbox" class="rounded border-gray-300"/> Remember me
    </label>
    <a href="#" class="text-sm text-purple-600 hover:underline">Forgot?</a>
  </div>
  <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg font-semibold">Login</button>
</form>
<template>
  <form class="w-full max-w-sm space-y-4">
    <div>
      <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
      <input id="email" v-model="email" type="email" placeholder="you@example.com"
        class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-purple-500 focus:border-purple-500"/>
    </div>
    <div>
      <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
      <input id="password" v-model="password" type="password" placeholder="••••••••"
        class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-purple-500 focus:border-purple-500"/>
    </div>
    <div class="flex items-center justify-between">
      <label class="flex items-center gap-2 text-sm text-gray-600">
        <input type="checkbox" v-model="remember" class="rounded border-gray-300"/> Remember me
      </label>
      <a href="#" class="text-sm text-purple-600 hover:underline">Forgot?</a>
    </div>
    <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg font-semibold">Login</button>
  </form>
</template>

<script setup>
import { ref } from 'vue'
const email = ref('')
const password = ref('')
const remember = ref(false)
</script>
import React, { useState } from 'react'
export default function LoginForm(){
  const [email,setEmail] = useState('')
  const [password,setPassword] = useState('')
  const [remember,setRemember] = useState(false)

  return (
    <form className="w-full max-w-sm space-y-4">
      <div>
        <label htmlFor="email" className="block text-sm font-medium text-gray-700">Email</label>
        <input id="email" value={email} onChange={e=>setEmail(e.target.value)} type="email" placeholder="you@example.com"
          className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-purple-500 focus:border-purple-500"/>
      </div>
      <div>
        <label htmlFor="password" className="block text-sm font-medium text-gray-700">Password</label>
        <input id="password" value={password} onChange={e=>setPassword(e.target.value)} type="password" placeholder="••••••••"
          className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-purple-500 focus:border-purple-500"/>
      </div>
      <div className="flex items-center justify-between">
        <label className="flex items-center gap-2 text-sm text-gray-600">
          <input type="checkbox" checked={remember} onChange={e=>setRemember(e.target.checked)} className="rounded border-gray-300"/> Remember me
        </label>
        <a href="#" className="text-sm text-purple-600 hover:underline">Forgot?</a>
      </div>
      <button className="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg font-semibold">Login</button>
    </form>
  )
}

2) Register Form

Form with full name, email, password and confirm password.

<form class="w-full max-w-sm space-y-4">
  <div>
    <label for="name" class="block text-sm font-medium text-gray-700">Full Name</label>
    <input id="name" type="text" placeholder="John Doe"
      class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-purple-500 focus:border-purple-500"/>
  </div>
  <div>
    <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
    <input id="email" type="email" placeholder="you@example.com"
      class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-purple-500 focus:border-purple-500"/>
  </div>
  <div>
    <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
    <input id="password" type="password" placeholder="••••••••"
      class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-purple-500 focus:border-purple-500"/>
  </div>
  <div>
    <label for="confirm" class="block text-sm font-medium text-gray-700">Confirm Password</label>
    <input id="confirm" type="password" placeholder="••••••••"
      class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-purple-500 focus:border-purple-500"/>
  </div>
  <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg font-semibold">Register</button>
</form>
<template>
  <form class="w-full max-w-sm space-y-4">
    <div>
      <label for="name" class="block text-sm font-medium text-gray-700">Full Name</label>
      <input id="name" v-model="name" type="text" placeholder="John Doe"
        class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-purple-500 focus:border-purple-500"/>
    </div>
    <div>
      <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
      <input id="email" v-model="email" type="email" placeholder="you@example.com"
        class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-purple-500 focus:border-purple-500"/>
    </div>
    <div>
      <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
      <input id="password" v-model="password" type="password" placeholder="••••••••"
        class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-purple-500 focus:border-purple-500"/>
    </div>
    <div>
      <label for="confirm" class="block text-sm font-medium text-gray-700">Confirm Password</label>
      <input id="confirm" v-model="confirm" type="password" placeholder="••••••••"
        class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-purple-500 focus:border-purple-500"/>
    </div>
    <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg font-semibold">Register</button>
  </form>
</template>

<script setup>
import { ref } from 'vue'
const name = ref('')
const email = ref('')
const password = ref('')
const confirm = ref('')
</script>
import React, { useState } from 'react'
export default function RegisterForm(){
  const [name,setName] = useState('')
  const [email,setEmail] = useState('')
  const [password,setPassword] = useState('')
  const [confirm,setConfirm] = useState('')

  return (
    <form className="w-full max-w-sm space-y-4">
      <div>
        <label htmlFor="name" className="block text-sm font-medium text-gray-700">Full Name</label>
        <input id="name" value={name} onChange={e=>setName(e.target.value)} type="text" placeholder="John Doe"
          className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-purple-500 focus:border-purple-500"/>
      </div>
      <div>
        <label htmlFor="email" className="block text-sm font-medium text-gray-700">Email</label>
        <input id="email" value={email} onChange={e=>setEmail(e.target.value)} type="email" placeholder="you@example.com"
          className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-purple-500 focus:border-purple-500"/>
      </div>
      <div>
        <label htmlFor="password" className="block text-sm font-medium text-gray-700">Password</label>
        <input id="password" value={password} onChange={e=>setPassword(e.target.value)} type="password" placeholder="••••••••"
          className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-purple-500 focus:border-purple-500"/>
      </div>
      <div>
        <label htmlFor="confirm" className="block text-sm font-medium text-gray-700">Confirm Password</label>
        <input id="confirm" value={confirm} onChange={e=>setConfirm(e.target.value)} type="password" placeholder="••••••••"
          className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-purple-500 focus:border-purple-500"/>
      </div>
      <button className="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg font-semibold">Register</button>
    </form>
  )
}

3) Contact Form

Form with name, email, subject, and message box.

<form class="w-full max-w-lg space-y-4">
  <div>
    <label for="cname" class="block text-sm font-medium text-gray-700">Full Name</label>
    <input id="cname" type="text" placeholder="Jane Doe"
      class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-purple-500 focus:border-purple-500"/>
  </div>
  <div>
    <label for="cemail" class="block text-sm font-medium text-gray-700">Email</label>
    <input id="cemail" type="email" placeholder="you@example.com"
      class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-purple-500 focus:border-purple-500"/>
  </div>
  <div>
    <label for="subject" class="block text-sm font-medium text-gray-700">Subject</label>
    <input id="subject" type="text" placeholder="How can we help?"
      class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-purple-500 focus:border-purple-500"/>
  </div>
  <div>
    <label for="message" class="block text-sm font-medium text-gray-700">Message</label>
    <textarea id="message" rows="4" placeholder="Your message..."
      class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-purple-500 focus:border-purple-500"></textarea>
  </div>
  <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg font-semibold">Send Message</button>
</form>
<template>
  <form class="w-full max-w-lg space-y-4">
    <div>
      <label for="cname" class="block text-sm font-medium text-gray-700">Full Name</label>
      <input id="cname" v-model="name" type="text" placeholder="Jane Doe"
        class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-purple-500 focus:border-purple-500"/>
    </div>
    <div>
      <label for="cemail" class="block text-sm font-medium text-gray-700">Email</label>
      <input id="cemail" v-model="email" type="email" placeholder="you@example.com"
        class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-purple-500 focus:border-purple-500"/>
    </div>
    <div>
      <label for="subject" class="block text-sm font-medium text-gray-700">Subject</label>
      <input id="subject" v-model="subject" type="text" placeholder="How can we help?"
        class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-purple-500 focus:border-purple-500"/>
    </div>
    <div>
      <label for="message" class="block text-sm font-medium text-gray-700">Message</label>
      <textarea id="message" v-model="message" rows="4" placeholder="Your message..."
        class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-purple-500 focus:border-purple-500"></textarea>
    </div>
    <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg font-semibold">Send Message</button>
  </form>
</template>

<script setup>
import { ref } from 'vue'
const name = ref('')
const email = ref('')
const subject = ref('')
const message = ref('')
</script>
import React, { useState } from 'react'
export default function ContactForm(){
  const [name,setName] = useState('')
  const [email,setEmail] = useState('')
  const [subject,setSubject] = useState('')
  const [message,setMessage] = useState('')

  return (
    <form className="w-full max-w-lg space-y-4">
      <div>
        <label htmlFor="cname" className="block text-sm font-medium text-gray-700">Full Name</label>
        <input id="cname" value={name} onChange={e=>setName(e.target.value)} type="text" placeholder="Jane Doe"
          className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-purple-500 focus:border-purple-500"/>
      </div>
      <div>
        <label htmlFor="cemail" className="block text-sm font-medium text-gray-700">Email</label>
        <input id="cemail" value={email} onChange={e=>setEmail(e.target.value)} type="email" placeholder="you@example.com"
          className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-purple-500 focus:border-purple-500"/>
      </div>
      <div>
        <label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</label>
        <input id="subject" value={subject} onChange={e=>setSubject(e.target.value)} type="text" placeholder="How can we help?"
          className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-purple-500 focus:border-purple-500"/>
      </div>
      <div>
        <label htmlFor="message" className="block text-sm font-medium text-gray-700">Message</label>
        <textarea id="message" value={message} onChange={e=>setMessage(e.target.value)} rows="4" placeholder="Your message..."
          className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-purple-500 focus:border-purple-500"></textarea>
      </div>
      <button className="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg font-semibold">Send Message</button>
    </form>
  )
}

We use cookies to improve your experience and analytics. You can accept all cookies or reject non-essential ones.

Learn More