Floating Label Sign In

1'use client';
2import React, { useState } from 'react';
3import { Mail, Lock, Eye, EyeOff, ArrowRight } from 'lucide-react';
4
5export default function FloatingLabelSignIn() {
6  const [email, setEmail] = useState('');
7  const [password, setPassword] = useState('');
8  const [showPass, setShowPass] = useState(false);
9  const [focusEmail, setFocusEmail] = useState(false);
10  const [focusPass, setFocusPass] = useState(false);
11
12  return (
13    <div className="w-full max-w-sm rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-8 shadow-lg">
14      <div className="mb-7">
15        <h2 className="text-2xl font-extrabold text-zinc-900 dark:text-zinc-100">Sign in</h2>
16        <p className="mt-1 text-sm text-zinc-500">Floating label inputs</p>
17      </div>
18      <form onSubmit={(e) => e.preventDefault()} className="space-y-5">
19        {/* Floating label email */}
20        <div className="relative">
21          <input
22            id="fl-email"
23            type="email"
24            value={email}
25            onChange={(e) => setEmail(e.target.value)}
26            onFocus={() => setFocusEmail(true)}
27            onBlur={() => setFocusEmail(false)}
28            placeholder=" "
29            className="peer w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-transparent pt-5 pb-2 px-4 text-sm text-zinc-900 dark:text-zinc-100 outline-none focus:border-blue-500 transition"
30          />
31          <label htmlFor="fl-email" className={`pointer-events-none absolute left-4 top-3.5 text-xs font-semibold transition-all duration-150 ${focusEmail || email ? 'top-1.5 text-[10px] text-blue-500' : 'text-zinc-400'}`}>
32            Email address
33          </label>
34          <Mail className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400" />
35        </div>
36
37        {/* Floating label password */}
38        <div className="relative">
39          <input
40            id="fl-pass"
41            type={showPass ? 'text' : 'password'}
42            value={password}
43            onChange={(e) => setPassword(e.target.value)}
44            onFocus={() => setFocusPass(true)}
45            onBlur={() => setFocusPass(false)}
46            placeholder=" "
47            className="peer w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-transparent pt-5 pb-2 px-4 pr-10 text-sm text-zinc-900 dark:text-zinc-100 outline-none focus:border-blue-500 transition"
48          />
49          <label htmlFor="fl-pass" className={`pointer-events-none absolute left-4 transition-all duration-150 text-xs font-semibold ${focusPass || password ? 'top-1.5 text-[10px] text-blue-500' : 'top-3.5 text-zinc-400'}`}>
50            Password
51          </label>
52          <button type="button" onClick={() => setShowPass(!showPass)} className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200">
53            {showPass ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
54          </button>
55        </div>
56
57        <div className="flex items-center justify-end">
58          <a href="#" className="text-xs text-blue-600 dark:text-blue-400 hover:underline">Forgot password?</a>
59        </div>
60
61        <button type="submit" className="flex w-full items-center justify-center gap-2 rounded-lg bg-zinc-900 dark:bg-zinc-100 hover:bg-zinc-800 dark:hover:bg-zinc-200 py-2.5 text-sm font-semibold text-white dark:text-zinc-900 transition">
62          Sign In <ArrowRight className="h-4 w-4" />
63        </button>
64      </form>
65      <p className="mt-5 text-center text-xs text-zinc-500">No account? <a href="#" className="text-blue-600 dark:text-blue-400 font-semibold hover:underline">Register</a></p>
66    </div>
67  );
68}