Centered Card Sign-in
A centred login card with email, a toggleable password field and a submit button.
3 फ्रेमवर्कशुरुआती
A bare email/password form with no card chrome, for when it already sits inside a container.
<!--
No card, no border, no shadow - just the form on the page background. Useful
when the sign-in already sits inside a framed container. Labels are still real
<label> elements; minimal is a visual choice, not a semantic discount.
-->
<form class="mx-auto w-full max-w-xs space-y-4" action="#" method="post">
<div>
<label for="min-email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
<input id="min-email" name="email" type="email" autocomplete="email" required placeholder="you@company.com" class="mt-1.5 w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 text-sm text-gray-900 placeholder:text-gray-500 focus-visible:border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-400 dark:focus-visible:ring-blue-400" />
</div>
<div>
<label for="min-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
<input id="min-password" name="password" type="password" autocomplete="current-password" required placeholder="••••••••" class="mt-1.5 w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 text-sm text-gray-900 placeholder:text-gray-500 focus-visible:border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-400 dark:focus-visible:ring-blue-400" />
</div>
<button type="submit" class="w-full rounded-lg bg-gray-900 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-white dark:focus-visible:ring-gray-100 dark:focus-visible:ring-offset-gray-950">Continue</button>
</form>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
submitLabel | string | 'Continue' | Submit label |
onSubmit | (data: { email: string; password: string }) => void | - | सबमिट होने पर फ़ॉर्म के मानों के साथ कॉल होता है। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
No card, border or shadow - just the form on the page background. Minimal is a visual choice, not a semantic discount: both fields keep real `<label>` elements and the right autocomplete tokens.