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">
                    <button class="text-xs font-medium text-emerald-700 bg-white/95 hover:bg-white hover:shadow-sm text-center rounded-full px-4 py-1.5 backdrop-blur transition-all duration-200">
                    Earn $25
                </button>
                    <span class="text-2xl font-medium text-white tracking-tight">nexus</span>
                </div>

                <!-- Quick actions -->
                <div class="mt-8">
                    <p class="text-white/80 text-sm mb-3 font-medium">Quick access</p>
                    <div class="flex flex-wrap gap-3">
                        <button class="flex items-center text-white/90 text-sm font-medium bg-white/15 hover:bg-white/25 rounded-full px-4 py-2 transition-all duration-200 backdrop-blur-sm">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus w-4 h-4 mr-2&.........完整代码请登录后点击上方下载按钮下载查看