- No data uploaded
- Instant results
Tailwind CSS Signup Form for Vue 3
A production-ready minimal signup form: a registration card with name, email and password fields, a password hint, a terms-of-service checkbox and a primary call to action. Pick your brand color, toggle dark mode and corner radius — the live preview and the Vue 3 code update instantly in your browser.
Live component editor
Live preview
<template>
<div class="w-full max-w-md p-8 bg-white border border-slate-200 shadow-sm rounded-xl">
<span class="inline-flex items-center px-2.5 py-0.5 text-xs font-semibold rounded-full bg-[#4f46e5]/10 text-[#4f46e5]">Free 14-day trial</span>
<h2 class="mt-3 text-2xl font-bold text-slate-900">Create your account</h2>
<p class="mt-1 mb-6 text-sm text-slate-500">No credit card required.</p>
<form class="flex flex-col gap-4">
<div class="grid grid-cols-2 gap-3">
<div>
<label for="su-first" class="block mb-1.5 text-sm font-medium text-slate-700">First name</label>
<input id="su-first" type="text" autocomplete="given-name" class="block w-full px-3 py-2 text-sm rounded-lg border bg-white border-slate-300 text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-[#4f46e5] focus:border-[#4f46e5]" required>
</div>
<div>
<label for="su-last" class="block mb-1.5 text-sm font-medium text-slate-700">Last name</label>
<input id="su-last" type="text" autocomplete="family-name" class="block w-full px-3 py-2 text-sm rounded-lg border bg-white border-slate-300 text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-[#4f46e5] focus:border-[#4f46e5]" required>
</div>
</div>
<div>
<label for="su-email" class="block mb-1.5 text-sm font-medium text-slate-700">Work email</label>
<input id="su-email" type="email" autocomplete="email" placeholder="you@company.com" class="block w-full px-3 py-2 text-sm rounded-lg border bg-white border-slate-300 text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-[#4f46e5] focus:border-[#4f46e5]" required>
</div>
<div>
<label for="su-password" class="block mb-1.5 text-sm font-medium text-slate-700">Password</label>
<input id="su-password" type="password" autocomplete="new-password" aria-describedby="su-hint" class="block w-full px-3 py-2 text-sm rounded-lg border bg-white border-slate-300 text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-[#4f46e5] focus:border-[#4f46e5]" required>
<p id="su-hint" class="mt-1 text-xs text-slate-500">At least 12 characters, including a number.</p>
</div>
<label class="flex items-start gap-2 text-sm text-slate-700">
<input type="checkbox" class="h-4 w-4 accent-[#4f46e5] mt-1" required>
<span>I agree to the <a href="#" class="font-medium text-[#4f46e5] hover:underline">Terms</a> and <a href="#" class="font-medium text-[#4f46e5] hover:underline">Privacy Policy</a>.</span>
</label>
<button type="submit" class="inline-flex items-center justify-center px-4 py-2.5 text-sm font-semibold rounded-lg bg-[#4f46e5] hover:bg-[#433cc3] text-white shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-[#4f46e5] focus:ring-offset-2 focus:ring-offset-white w-full">Create account</button>
</form>
<p class="mt-6 text-center text-sm text-slate-500">Already registered? <a href="#" class="font-medium text-[#4f46e5] hover:underline">Sign in</a></p>
</div>
</template>
More Tailwind components for Vue 3
All components →- Login Modal A centered sign-in dialog with email and password fields, “remember me”, a forgot-password link and a social sign-in button
- Pricing Table A three-tier pricing section with a monthly/yearly billing toggle, a highlighted “most popular” plan and feature checklists
- Razorpay Checkout Form A two-column checkout with an order summary (subtotal, GST, total in INR), contact fields, a UPI / card / netbanking selector and a pay button that opens Razorpay Checkout
- FAQ Accordion A frequently-asked-questions section with four expandable items, each toggled by a button that exposes its state via aria-expanded
- Cookie Consent Banner A GDPR-style cookie banner with equally prominent “Accept all” and “Reject all”, granular analytics/marketing toggles (off by default), stored consent and Google Consent Mode v2 signals
- Navbar A responsive top navigation bar with a logo, primary links, a sign-in/CTA pair on desktop and a collapsible hamburger menu on mobile
- Hero Section A landing-page hero with an announcement badge, a large headline, supporting copy, primary and secondary calls to action and a row of social-proof stats
- Contact Form A contact card with name, email, a topic selector, a message textarea and a submit button
Install Tailwind CSS for Vue 3
Create a Vue 3 project with Vite, then add Tailwind CSS v3:
npm create vite@latest my-app -- --template vue
cd my-app
npm install
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -pSet content: ['./index.html', './src/**/*.{vue,js}'] in tailwind.config.js, and add to src/style.css:
@tailwind base;
@tailwind components;
@tailwind utilities;The brand color is applied with arbitrary values such as bg-[#4f46e5], so no theme configuration is needed.
Use the signup form in Vue 3
<!-- App.vue -->
<script setup>
import SignupForm from './SignupForm.vue';
</script>
<template>
<SignupForm />
</template>Accessibility & customization
Inputs are paired with <label for> and the password hint is linked via aria-describedby so screen readers announce the requirement. The terms checkbox is a real <input type="checkbox"> inside its label for a large click target.
Every color, radius and dark-mode choice is baked into plain utility classes, so the copied code has no runtime dependency on this site.
Compatibility
| Item | Details |
|---|---|
| CSS framework | Tailwind CSS v3.4+ |
| Library | Vue 3 (<script setup>) |
| Interactive state | None (static markup) |
| Dark mode | Yes — toggle in the editor |
| Style | Minimal |
Frequently asked questions
How do I install this Tailwind signup form in Vue 3?
Create a Vue 3 project, install Tailwind CSS as shown in the installation section, then paste the generated code.
Can I change the color of the signup form?
Yes. Use the brand color picker or type any hex code — the preview and code update instantly, and the color is written directly into the classes you copy.
Does the signup form support dark mode?
Yes. Toggle “Dark mode” in the editor to generate a dark palette version of the same component.
Is the signup form accessible?
Inputs are paired with <label for> and the password hint is linked via aria-describedby so screen readers announce the requirement. The terms checkbox is a real <input type="checkbox"> inside its label for a large click target.
Is this component free for commercial use?
Yes. The generated code is yours to use in personal and commercial projects without attribution.