tailwindcss布局简洁大气清爽登录注册页表单代码-html代码-BFW代码库

tailwindcss布局简洁大气清爽登录注册页表单代码

代码语言：html

代码描述：tailwindcss布局简洁大气清爽登录注册页表单代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap" rel="stylesheet">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lucide.min.js"></script>
    <style>
        .font-geist { font-family: 'Geist', sans-serif !important; }
        .font-space-grotesk { font-family: 'Space Grotesk', sans-serif !important; }
        .animate-fade-up {
        animation: fadeUp 0.6s ease-out forwards;
        opacity: 0;
        transform: translateY(20px);
        }
        .animate-slide-right {
        animation: slideRight 0.8s ease-out forwards;
        opacity: 0;
        transform: translateX(-30px);
        }
        .animate-blur-in {
        animation: blurIn 1s ease-out forwards;
        filter: blur(10px);
        opacity: 0;
        }
        .animate-scale-up {
        animation: scaleUp 0.5s ease-out forwards;
        opacity: 0;
        transform: scale(0.95);
        }
        @keyframes fadeUp {
        to {
        opacity: 1;
        transform: translateY(0);
        }
        }
        @keyframes slideRight {
        to {
        opacity: 1;
        transform: translateX(0);
        }
        }
        @keyframes blurIn {
        to {
        filter: blur(0px);
        opacity: 1;
        }
        }
        @keyframes scaleUp {
        to {
        opacity: 1;
        transform: scale(1);
        }
        }
        .delay-100 { animation-delay: 0.1s; }
        .delay-200 { animation-delay: 0.2s; }
        .delay-300 { animation-delay: 0.3s; }
        .delay-400 { animation-delay: 0.4s; }
        .delay-500 { animation-delay: 0.5s; }
        .delay-600 { animation-delay: 0.6s; }
        .delay-700 { animation-delay: 0.7s; }
        .delay-800 { animation-delay: 0.8s; }
        .delay-900 { animation-delay: 0.9s; }
        .delay-1000 { animation-delay: 1s; }
        .delay-1100 { animation-delay: 1.1s; }
        .delay-1200 { animation-delay: 1.2s; }
        .glass-card {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        }
    </style>
   
</head>

<body class="min-h-screen flex items-center justify-center bg-gradient-to-br from-violet-50 via-purple-50 to-indigo-100 p-4" style="font-family: Inter, sans-serif;">
    <div class="spline-container fixed top-0 w-full h-screen -z-10 hue-rotate-90"><iframe src="https://my.spline.design/twistcopy-CPActtgUfoQoOToZfH4Pt18Q" frameborder="0" width="100%" height="100%"></iframe></div>

    <div class="w-full max-w-6xl overflow-hidden flex flex-col lg:flex-row animate-blur-in bg-white/80 border-white/20 border rounded-3xl shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),_0px_6px_6px_-3px_rgba(0,0,0,0.06),0px_12px_12px_-6px_rgba(0,0,0,0.06),0px_24px_24px_-12px_rgba(0,0,0,0.06)] backdrop-blur-xl">
        <!-- Left / Form --.........完整代码请登录后点击上方下载按钮下载查看