lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
145 lines (133 loc) • 9.07 kB
JSX
import { useState } from 'react';
const GlassmorphismLoginForm = () => {
const [passwordVisible, setPasswordVisible] = useState(false);
const togglePasswordVisibility = () => {
setPasswordVisible(!passwordVisible);
};
const checkInput = (input) => {
const label = input.previousElementSibling;
if (input.value !== '') {
label.classList.add('-top-0', '-translate-y-8', 'transition-all', 'duration-300');
} else {
label.classList.remove('-top-0', '-translate-y-8', 'transition-all', 'duration-300');
}
};
return (
<div
className="font-primarylw w-screen max-h-screen bg-black"
>
<section className="flex justify-center items-center min-h-screen px-4 ">
<div
className="absolute inset-0 grid overflow-hidden"
style={{ filter: "blur(12vw)" }}
>
{/* First Shape */}
<div
className="absolute inset-0 max-h-screen"
style={{
clipPath:
"polygon(50.9% 37.2%, 43.5% 34.7%, 33.6% 26.1%, 39.2% 10.8%, 26.2% 0.0%, 4.8% 6.4%, 0.0% 30.4%, 20.7% 37.2%, 33.4% 26.3%, 43.2% 34.9%, 45.0% 35.6%, 43.6% 46.4%, 37.8% 59.5%, 21.8% 63.2%, 11.7% 76.1%, 22.9% 91.3%, 47.4% 91.3%, 54.0% 79.0%, 38.0% 59.6%, 43.9% 46.4%, 45.2% 35.5%, 50.9% 37.6%, 56.1% 36.8%, 59.8% 47.6%, 70.3% 61.9%, 87.7% 56.0%, 96.4% 37.4%, 88.6% 15.1%, 63.7% 16.7%, 55.2% 33.6%, 55.9% 36.6%, 50.9% 37.2%)",
background: "linear-gradient(hotpink, red, orange, yellow, hotpink)",
animation: "GradientAnimatedBgTurn 8000ms linear infinite",
opacity: 0.66,
}}
></div>
{/* Second Shape */}
<div
className="absolute inset-0 max-h-screen"
style={{
clipPath:
"polygon(50.9% 37.2%, 43.5% 34.7%, 33.6% 26.1%, 39.2% 10.8%, 26.2% 0.0%, 4.8% 6.4%, 0.0% 30.4%, 20.7% 37.2%, 33.4% 26.3%, 43.2% 34.9%, 45.0% 35.6%, 43.6% 46.4%, 37.8% 59.5%, 21.8% 63.2%, 11.7% 76.1%, 22.9% 91.3%, 47.4% 91.3%, 54.0% 79.0%, 38.0% 59.6%, 43.9% 46.4%, 45.2% 35.5%, 50.9% 37.6%, 56.1% 36.8%, 59.8% 47.6%, 70.3% 61.9%, 87.7% 56.0%, 96.4% 37.4%, 88.6% 15.1%, 63.7% 16.7%, 55.2% 33.6%, 55.9% 36.6%, 50.9% 37.2%)",
background: "linear-gradient(cyan, blue, green, purple, cyan)",
animation: "GradientAnimatedBgTurn 6000ms linear infinite",
transform: "rotate(180deg)",
}}
></div>
</div>
<div className="login-box relative w-full sm:w-[400px] bg-transparent border-2 border-white/50 rounded-2xl flex flex-col justify-center items-center backdrop-blur-[15px] backdrop-filter p-6">
<form action="" className="w-full">
<h2 className="text-2xl lg:text-3xl text-white text-center mb-6">Login Here</h2>
{/* Email input */}
<div className="input-box relative w-full mb-7 border-b-2 border-white">
<span className="icon absolute right-2 text-white text-xl leading-[57px]">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="size-5 md:size-6 mt-4"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"
/>
</svg>
</span>
<label className="icon absolute left-2 text-white text-lg leading-[57px]">Email</label>
<input
type="email"
id="email"
required
className="w-full h-12 bg-transparent border-none outline-none text-white text-lg pl-2 pr-10 peer focus:outline-none focus:ring-0 focus:border-none"
onInput={(e) => checkInput(e.target)}
/>
</div>
{/* Password input with eye toggle */}
<div className="input-box relative w-full mb-7 border-b-2 border-white">
<span
id="eye-icon"
className="absolute right-2 top-1/2 transform -translate-y-1/2 text-white text-xl cursor-pointer"
onClick={togglePasswordVisibility}
>
{passwordVisible ? (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" className="size-5 md:size-6 mt-4" id="eye-icon-visible">
<path stroke-linecap="round" stroke-linejoin="round"
d="M13.5 10.5V6.75a4.5 4.5 0 1 1 9 0v3.75M3.75 21.75h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H3.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
</svg>
) : (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" className="size-5 md:size-6 mt-4" id="lock-icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
</svg>
)}
</span>
<label className="icon absolute left-2 text-white text-lg leading-[57px]">Password</label>
<input
type={passwordVisible ? 'text' : 'password'}
id="password"
required
className="w-full h-12 bg-transparent border-none outline-none text-white text-lg pl-2 pr-10 peer focus:outline-none focus:ring-0 focus:border-none"
onInput={(e) => checkInput(e.target)}
/>
</div>
{/* Remember me and Forgot password */}
<div className="remember-forgot flex justify-between text-white text-xs my-3">
<label className="flex items-center">
<input type="checkbox" className="mr-2" /> Remember me
</label>
<a href="javascript:void(0)" className="hover:underline">Forgot Password?</a>
</div>
{/* Login Button */}
<button
type="submit"
className="w-full h-10 lg:h-12 mt-4 bg-white text-black font-semibold text-lg rounded-full cursor-pointer hover:bg-gray-200"
>
Login
</button>
{/* Register Link */}
<div className="register-link text-white text-xs text-center mt-6">
<p>
Don't have an account? <a href="javascript:void(0)" className="font-bold hover:underline">Register</a>
</p>
</div>
</form>
</div>
</section>
</div>
);
};
export default GlassmorphismLoginForm;