tailwind实现简洁银行金融理财app ui设计代码-html代码-BFW代码库

tailwind实现简洁银行金融理财app ui设计代码

代码语言：html

代码描述：tailwind实现简洁银行金融理财app ui设计代码

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

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Finance Dashboard - Nexus</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;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>
        tailwind.config = { theme: { extend: { fontFamily: { sans: ['Inter', 'ui-sans-serif', 'system-ui'] } } } }
    </script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&amp;family=IBM+Plex+Serif:wght@300;400;500;600;700&amp;family=IBM+Plex+Mono:wght@300;400;500;600;700&amp;family=Inter&amp;display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', sans-serif; }
    </style>
</head>

<body class="antialiased flex items-center justify-center min-h-screen bg-gradient-to-br from-slate-100 via-gray-50 to-blue-50 pt-12 pb-12">
    <div class="flex flex-col lg:flex-row gap-12 opacity-0 animate-[fadeIn_1s_ease-out_0.3s_forwards]">
        <!-- Phone 1 -->
        <div class="relative w-[320px] h-[640px] bg-white rounded-[36px] shadow-2xl overflow-hidden flex flex-col border border-gray-100 transform translate-y-4 animate-[slideUp_0.8s_ease-out_0.5s_forwards]">
            <!-- Gradient Header -->
            <div class="relative bg-gradient-to-br from-emerald-500 via-teal-500 to-cyan-500 pt-10 px-6 pb-24">
                <div class="flex items-center justify-between">
 .........完整代码请登录后点击上方下载按钮下载查看