- No data uploaded
- Instant results
Tailwind CSS Login Modal for Vue 3
A production-ready minimal login modal: a centered sign-in dialog with email and password fields, “remember me”, a forgot-password link and a social sign-in button. 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
<script setup>
import { ref } from 'vue';
const open = ref(true);
</script>
<template>
<div>
<button type="button" 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" @click="open = true">Sign in</button>
<div v-show="open">
<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm" role="dialog" aria-modal="true" aria-labelledby="login-title">
<div class="relative w-full max-w-md p-8 bg-white border border-slate-200 shadow-sm rounded-xl">
<button type="button" class="absolute top-0 right-0 m-3 inline-flex items-center justify-center w-8 h-8 rounded-full text-slate-500 hover:bg-slate-900/5" aria-label="Close" @click="open = false">×</button>
<h2 id="login-title" class="text-2xl font-bold mb-1 text-slate-900">Welcome back</h2>
<p class="text-sm mb-6 text-slate-500">Sign in to continue to your dashboard.</p>
<form class="flex flex-col gap-4">
<div>
<label for="login-email" class="block mb-1.5 text-sm font-medium text-slate-700">Email</label>
<input id="login-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>
<div class="flex items-center justify-between">
<label for="login-password" class="block mb-1.5 text-sm font-medium text-slate-700">Password</label>
<a href="#" class="text-sm font-medium text-[#4f46e5] hover:underline">Forgot?</a>
</div>
<input id="login-password" type="password" autocomplete="current-password" placeholder="••••••••" 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>
<label class="flex items-center gap-2 text-sm text-slate-700">
<input type="checkbox" class="h-4 w-4 accent-[#4f46e5]"> Remember me for 30 days
</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">Sign in</button>
</form>
<div class="flex items-center gap-3 my-6">
<span class="flex-1 border-t border-slate-200"></span>
<span class="text-xs uppercase text-slate-500">or</span>
<span class="flex-1 border-t border-slate-200"></span>
</div>
<button type="button" class="inline-flex items-center justify-center px-4 py-2.5 text-sm font-semibold rounded-lg border transition-colors border-slate-300 text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-[#4f46e5] focus:ring-offset-2 focus:ring-offset-white w-full">Continue with Google</button>
<p class="mt-6 text-center text-sm text-slate-500">No account? <a href="#" class="font-medium text-[#4f46e5] hover:underline">Create one</a></p>
</div>
</div>
</div>
</div>
</template>
More Tailwind components for Vue 3
All components →- 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
- 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
- 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
- Contact Form A contact card with name, email, a topic selector, a message textarea and a submit button
- Footer A multi-column site footer with a brand description, three link groups, a newsletter sign-up field and a copyright row
- Pricing Table A three-tier pricing section with a monthly/yearly billing toggle, a highlighted “most popular” plan and feature checklists
- 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
- Feature Grid A marketing section with a centered heading and a responsive grid of six feature cards, each with an icon badge, title and description
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 login modal in Vue 3
<!-- App.vue -->
<script setup>
import LoginModal from './LoginModal.vue';
</script>
<template>
<LoginModal />
</template>Accessibility & customization
The dialog uses role="dialog", aria-modal="true" and aria-labelledby pointing at its title. Every field has a visible <label>, the close button has an aria-label, and inputs use the correct autocomplete tokens so password managers work.
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 | open |
| Dark mode | Yes — toggle in the editor |
| Style | Minimal |
Frequently asked questions
How do I install this Tailwind login modal 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 login modal?
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 login modal support dark mode?
Yes. Toggle “Dark mode” in the editor to generate a dark palette version of the same component.
Is the login modal accessible?
The dialog uses role="dialog", aria-modal="true" and aria-labelledby pointing at its title. Every field has a visible <label>, the close button has an aria-label, and inputs use the correct autocomplete tokens so password managers work.
Is this component free for commercial use?
Yes. The generated code is yours to use in personal and commercial projects without attribution.