<!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>
</head>
<style type="text/tailwindcss">
.content {
@apply max-w-96 relative w-full;
}
.relative {
@apply relative;
}
.login-content {
@apply max-w-96 w-[95%] bg-white shadow-md py-10 rounded-md space-y-7 mx-auto;
}
.login-title {
@apply text-3xl text-red-600 font-black border-l-4 border-red-600 pl-10 py-0.5;
}
.form-login {
@apply px-10 space-y-10;
}
.login-input {
@apply outline-none w-full border-b border-black py-1 focus:border-red-600 transition-all duration-300;
}
.login-form-title {
@apply text-2xl absolute top-1/2 -translate-y-1/2 left-0 text-black/50 peer-focus:text-sm peer-focus:top-0 peer-focus:-translate-y-3 transition-all duration-300 peer-valid:-translate-y-3 pointer-events-none peer-valid:text-sm peer-valid:top-0;
}
.flex-center {
@apply flex justify-center;
}
.login-btn {
@apply px-20 py-3 border border-black/30 text-2xl font-bold transition-all duration-300 text-black/30 cursor-pointer;
}
.login-btn:hover {
@apply border-red-500 text-red-500;
}
.forgot-title {
@apply text-xl text-black/30 transition-all duration-300;
}
.forgot-title:hover {
@apply text-red-600;
}
.register-content {
@apply w-20 h-20 absolute top-5 right-0 translate-x-8 overflow-hidden rounded-md;
}
.register-btn {
@apply relative w-full h-full bg-red-400 flex justify-center items-center rounded-full cursor-pointer;
}
.edit-icon {
@apply fill-white w-10;
}
.register-form {
@apply py-10 absolute top-0 left-0 h-full w-full z-10 space-y-10 opacity-0 pointer-events-none;
}
.close-btn {
@apply absolute top-10 right-5 cursor-pointer;
}
.close-btn-icon {
@apply fill-white w-10 h-10;
}
.spy-ten {
@apply space-y-10;
}
.register-title {
@apply text-3xl text-white font-black border-l-4 border-white pl-10 py-0.5 translate-x-20;
}
.register-space {
@apply px-10 space-y-10;
}
.register-input {
@apply relative translate-x-20 opacity-0;
}
.register-input-input {
@apply outline-none w-full border-b border-white py-1 focus:border-white transition-all duration-300 text-white;
}
.register-form-title {
@apply text-2xl absolute top-1/2 -translate-y-1/2 left-0 text-white peer-focus:text-sm peer-focus:top-0 peer-focus:-translate-y-3 transition-all duration-300 peer-valid:-translate-y-3 pointer-events-none peer-valid:text-sm peer-valid:top-0;
}
.register-form-btn {
@apply px-20 py-3 text-2xl font-bold cursor-pointer w-full bg-white text-red-500 translate-x-full;
}
.register-form-btn:hover {
@apply bg-white/80;
}
</style>
<body class="min-h-svh flex items-center justify-center w-full">
<div class="relative">
<div class="login-content">
<p class="login-title">LOGIN</p>
<div class="form-login">
<div class="relative">
<input type="text" class="peer login-input" required="">
<p class=" login-form-title">Username</p>
</div>
<div class="relative">
<input type="text" class="peer login-input" required="">
<p class="login-form-title">Password</p>
</div>
<div class="flex-center">
<button type="button"class="login-btn">LOGIN</button>
</div>
<div class="flex-center">
<a href="" class="forgot-title">Forgot your password?</a>
</div>
</div>
</div>
<div class="register-content">
<div class="register-btn">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="edit-icon">
<path
d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z" />
</svg>
</div>
<div class="register-form">
<div class="close-btn">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="close-btn-icon">
<path
d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
</svg>
</div>
<div class="spy-ten">
<p class="register-title">Register</p>
<div class="register-space">
<div class="register-input register-gsap">
<input type="text" class="register-input-input peer" required="">
<p class="register-form-title">Username</p>
</div>
<div class="register-input register-gsap">
<input type="text" class="register-input-input peer" required="">
<p class="register-form-title">Password</p>
</div>
<div class="register-input register-gsap">
<input type="text" class="register-input-input peer" required="">
<p class="register-form-title">Repeat Password</p>
</div>
<button type="button" class="register-gsap register-form-btn">NEXT</button>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
let registerBtn = document.querySelector('.register-btn');
let closeBtn = document.querySelector('.close-btn');
registerBtn.addEventListener('click', function () {
let tl = gsap.timeline();
tl.to('.register-content', { duration: 0.3, width: '100%', height: '100%', top: "10px", x: 0 })
.to('.register-btn', { duration: 0.3, scale: 2, cursor: 'auto', pointerEvents: 'none' }, '<')
.to('.edit-icon', { opacity: 0, pointerEvents: 'none', duration: 0 }, '<')
.to('.register-form', { opacity: 1, pointerEvents: 'auto', duration: 0 }, '< 0.3')
.to('.register-title', { x: 0, pointerEvents: 'none', duration: 0.3, opacity: 1 }, '<')
.to('.register-gsap', { x: 0, stagger: 0.1, opacity: 1, ease: 'linear' }, '<');
});
closeBtn.addEventListener('click', function () {
let tl = gsap.timeline();
tl.to('.register-gsap', { x: 80, opacity: 0, duration: 0 })
.to('.register-title', { x: 80, pointerEvents: 'none', duration: 0, opacity: 0 }, '<')
.to('.register-form', { opacity: 0, pointerEvents: 'none', duration: 0 }, '<')
.to('.register-btn', { duration: 0.3, scale: 1, cursor: 'pointer', pointerEvents: 'auto' })
.to('.register-content', { duration: 0.3, width: '80px', height: '80px', top: "20px", x: 32 }, '<')
.to('.edit-icon', { opacity: 1, pointerEvents: 'auto', duration: 0.3 }, '<')
});
});
</script>
</body>
</html>