<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
rel="stylesheet"
/>
</head>
<style type="text/tailwindcss">
.card-content {
@apply max-w-screen-xl w-full mx-auto bg-white overflow-hidden rounded-xl relative h-[546px];
}
.bg-content {
@apply absolute w-1/2 top-0 left-0 h-full z-10 overflow-hidden;
background-image: url("https://images.unsplash.com/photo-1687197180710-b2b9484a3c5f?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
background-size: 1280px;
}
.bg-text-content {
@apply text-white text-center absolute top-0 left-0 w-full h-full py-20 px-5 space-y-5 z-10;
}
.login-content {
@apply w-full space-y-5;
}
.login-title {
@apply text-2xl font-bold;
}
.login-button {
@apply rounded-full border border-white cursor-pointer w-1/2 relative overflow-hidden;
}
.sign-word {
@apply w-full px-10 py-2;
}
.register-word {
@apply absolute top-0 left-full px-10 py-2 w-full opacity-0 scale-0 blur-3xl;
}
.register {
@apply text-white text-center absolute top-0 left-0 w-full h-full py-20 px-5 space-y-5;
}
.register-title {
@apply text-2xl font-bold;
}
.form {
@apply w-1/2 flex justify-center items-center py-20 px-5;
}
.login-form {
@apply w-full;
}
.login-form-content {
@apply max-w-[80%] w-full space-y-10 mx-auto;
}
.sign-title {
@apply text-blue-500 text-4xl font-bold text-center;
}
.form-input-content {
@apply space-y-5;
}
.form-title {
@apply text-sm text-zinc-500;
}
.form-input {
@apply w-full px-5 py-2 rounded-md bg-blue-50;
}
.button-content {
@apply flex justify-center;
}
.sign-in-button {
@apply bg-blue-500 text-white px-20 py-5 rounded-full mx-auto transition-all duration-300 border border-transparent cursor-pointer font-semibold;
}
.sign-in-button:hover {
@apply bg-white text-blue-500 border-blue-500;
}
.register-form {
@apply w-full;
}
.register-content {
@apply max-w-[80%] w-full space-y-10 mx-auto;
}
.register-form-title {
@apply text-blue-500 text-4xl font-bold text-center;
}
.register-form-content {
@apply space-y-5;
}
</style>
<body class="min-h-svh flex items-center justify-center">
<div class="card-content">
<div class="bg-content">
<div class="bg-text-content">
<div class="login login-content">
<p class="login-title">Welcome Back!</p>
<p>Welcome back, please log in to continue.</p>
</div>
<button type="button" class="login-button">
<p class="sign-word">Sign In</p>
<p class="register-word">Register</p>
</button>
</div>
<div class="register">
<p class="register-title">Hello, Friend!</p>
<p>Create your account and start exploring more features.</p>
</div>
</div>
<div class="form">
<div class="login-form">
<div class="login-form-content">
<p class="sign-title">Sign in</p>
<div class="form-input-content">
<div>
<p class="form-title">Email</p>
<input type="text" class="form-input" placeholder="Email" />
</div>
<div>
<p class="form-title">Password</p>
<input type="text" class="form-input" placeholder="Password" />
</div>
<div class="button-content">
<button class="sign-in-button">SIGN UP</button>
</div>
</div>
</div>
</div>
<div class="register-form">
<div class="register-content">
<p class="register-form-title">Register</p>
<div class="register-form-content">
<div>
<p class="form-title">Name</p>
<input type="text" class="form-input" placeholder="Name" />
</div>
<div>
<p class="form-title">Email</p>
<input type="text" class="form-input" placeholder="Email" />
</div>
<div>
<p class="form-title">Password</p>
<input type="text" class="form-input" placeholder="Password" />
</div>
<div class="flex justify-center">
<button class="sign-in-button">SIGN UP</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="module">
let loginButton = document.querySelector(".login-button");
let status = false;
let tl = gsap.timeline();
let formTl = gsap.timeline();
gsap.set(".register", { xPercent: 100 });
gsap.set(".bg-content", { width: "50%" });
gsap.set(".form", { xPercent: 100 });
gsap.set(".login-form", { display: "block" });
gsap.set(".register-form", { display: "none" });
tl.to(".bg-content", {
xPercent: 100,
duration: 1,
})
.to(
".sign-word",
{
xPercent: -100,
opacity: 0,
filter: "blur(50px)",
scale: 0,
duration: 0.5,
},
0
)
.to(
".bg-content",
{
backgroundPosition: "50% 0%",
duration: 1,
},
0
)
.to(
".register",
{
xPercent: 0,
duration: 1,
},
0
)
.to(
".login",
{
xPercent: -100,
duration: 1,
},
0
)
.to(
".register-word",
{
duration: 0.3,
filter: "blur(0px)",
},
"end-=0.6"
)
.to(
".register-word",
{
left: 0,
duration: 0.3,
opacity: 1,
scale: 1,
},
"end-=0.5"
);
tl.pause();
formTl
.to(".form", { xPercent: 0, duration: 1 }, 0)
.set(".login-form", { display: "none" }, 0.4)
.set(".register-form", { display: "block" }, 0.4);
formTl.pause();
loginButton.addEventListener("click", function () {
if (status == false) {
tl.play();
formTl.play();
status = true;
return;
}
if (status == true) {
tl.reverse();
formTl.reverse();
status = false;
return;
}
});
</script>
</body>
</html>