Magic Link Authentication

This tailwind example is contributed by JUGENDRA GANGWAR, on 29-Sep-2026. Component is made with Tailwind v3.4. It is responsive.

Form

Author JUGENDRA GANGWAR

Tailwind v3.4 5

Fork Fullscreen

<div class="min-h-screen bg-gradient-to-br from-slate-100 via-white to-sky-100 flex items-center justify-center p-6">
  <div class="w-full max-w-md">
    <div class="rounded-[28px] border border-white/70 bg-white/80 p-8 shadow-2xl backdrop-blur-xl">
      <div class="mt-6 text-center">
        <h1 class="text-3xl text-slate-900">Sign in with Magic Link</h1>
        <p class="mt-3 text-sm leading-6 text-slate-500">
          Enter your email and we'll send you a secure link to sign in instantly — no password required.
        </p>
      </div>
      <form class="mt-8 space-y-5">
        <div>
          <label class="mb-2 block text-sm font-medium text-slate-700">
            Email Address
          </label>
          <div class="relative">
            <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                <rect x="3" y="5" width="18" height="14" rx="2"/>
                <path stroke-linecap="round" stroke-linejoin="round" d="M3 7l9 6 9-6"/>
              </svg>
            </span>
            <input
              type="email"
              placeholder="john@example.com"
              class="w-full rounded-xl border border-slate-200 bg-white py-3 pl-11 pr-4 text-sm outline-none transition focus:border-sky-500 focus:ring-4 focus:ring-sky-100"
            >
          </div>
        </div>
        <button class="w-full rounded-xl bg-slate-900 py-3.5 text-sm font-semibold text-white shadow-lg shadow-slate-900/20 transition hover:bg-slate-800">
          Send Magic Link
        </button>
      </form>
      <div class="my-7 flex items-center">
        <div class="h-px flex-1 bg-slate-200"></div>
        <span class="px-3 text-xs uppercase tracking-wider text-slate-400">Secure Access</span>
        <div class="h-px flex-1 bg-slate-200"></div>
      </div>
      <div class="space-y-4">
        <div class="flex items-start gap-3">
          <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-50">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
              <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
            </svg>
          </div>
          <div>
            <p class="text-sm font-semibold text-slate-800">Passwordless Login</p>
            <p class="text-xs text-slate-500">A unique encrypted link is generated for every sign in.</p>
          </div>
        </div>
        <div class="flex items-start gap-3">
          <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-violet-50">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
              <circle cx="12" cy="12" r="9"/>
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 7v5l3 2"/>
            </svg>
          </div>
          <div>
            <p class="text-sm font-semibold text-slate-800">Expires in 10 Minutes</p>
            <p class="text-xs text-slate-500">The magic link automatically becomes invalid after expiry.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Sign in form

Simon Scheffer

3 years ago

17k
Sign In form

Amit Pachange

3 years ago

12.7k
Input output form

Prajwal Hallale

3 years ago

7.8k
Modern responsive Newsletter form
Responsive newsletter subscriber form

Emdadul Islam

2 years ago

3.5k
form
form

aditya_sharma

3 weeks ago

32
Feedback form with fabform.io
Collect opinions about your company's service

Ho O

1 year ago

1.4k
LOGIN TEMPLATE
it is a login template

Sergio Gonzalez

1 year ago

1k
Login Form

Amit Pachange

4 years ago

13.7k
Multi-Step Form Wizard
Working Multi-Step Form more complex forms. made with tailwind CSS v3 and javascript

Quentin Rivers

1 year ago

7.7k
Login
Login form, responsive, no dark-mode for white backgrounds, elegant for any platform

Ameth Galarcio

2 years ago

5.3k
Verify otp form

Jakub Novak

3 years ago

18.8k
Animated Iogin form
This section showcases a series of interactive image cards that reveal descriptive text on hover. Built using Tailwind CSS and Astro.js, each card features a smooth animation, background blur, and opacity transition, enhancing the user experience while presenting visually engaging content.

nicoleshal07

1 year ago

1k