tailwind布局实现项目管理仪表盘后台ui设计代码-html代码-BFW代码库

代码语言：html
代码描述：tailwind布局实现项目管理仪表盘后台ui设计代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html lang="en" class="h-full scroll-smooth antialiased">

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

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
    <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 type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lucide.min.js"></script>
    <style>
        body{font-family:'Inter',sans-serif}
        .progress-ring{background:conic-gradient(from 0deg, #06b6d4 0% 70%, #1f2937 70% 100%)}
        .animate-fade-in{animation:fadeIn 0.6s ease-out forwards}
        .animate-slide-up{animation:slideUp 0.8s ease-out forwards}
        .animate-blur-in{animation:blurIn 0.7s ease-out forwards}
        @keyframes fadeIn{from{opacity:0}to{opacity:1}}
        @keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
        @keyframes blurIn{from{opacity:0;filter:blur(10px)}to{opacity:1;filter:blur(0)}}
        .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}
        .initial-hidden{opacity:0}
        .browser-frame{
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        border-radius: 12px;
        overflow: hidden;
        }
        .browser-content{
        height: calc(100vh - 120px);
        overflow: hidden;
        }
    </style>
    <link id="all-fonts-link-font-geist" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&amp;display=swap">
    <style id="all-fonts-style-font-geist">
        .font-geist { font-family: 'Geist', sans-serif !important; }
    </style>
    <link id="all-fonts-link-font-roboto" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&amp;display=swap">
    <style id="all-fonts-style-font-roboto">
        .font-roboto { font-family: 'Roboto', sans-serif !important; }
    </style>
    <link id="all-fonts-link-font-montserrat" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&amp;display=swap">
    <style id="all-fonts-style-font-montserrat">
        .font-montserrat { font-family: 'Montserrat', sans-serif !important; }
    </style>
    <link id="all-fonts-link-font-poppins" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap">
    <style id="all-fonts-style-font-poppins">
        .font-poppins { font-family: 'Poppins', sans-serif !important; }
    </style>
    <link id="all-fonts-link-font-playfair" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&amp;display=swap">
    <style id="all-fonts-style-font-playfair">
        .font-playfair { font-family: 'Playfair Display', serif !important; }
    </style>
    <link id="all-fonts-link-font-instrument-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&amp;display=swap">
    <style id="all-fonts-style-font-instrument-serif">
        .font-instrument-serif { font-family: 'Instrument Serif', serif !important; }
    </style>
    <link id="all-fonts-link-font-merriweather" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&amp;display=swap">
    <style id="all-fonts-style-font-merriweather">
        .font-merriweather { font-family: 'Merriweather', serif !important; }
    </style>
    <link id="all-fonts-link-font-bricolage" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&amp;display=swap">
    <style id="all-fonts-style-font-bricolage">
        .font-bricolage { font-family: 'Bricolage Grotesque', sans-serif !important; }
    </style>
    <link id="all-fonts-link-font-jakarta" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&amp;display=swap">
    <style id="all-fonts-style-font-jakarta">
        .font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif !important; }
    </style>
    <link id="all-fonts-link-font-manrope" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&amp;display=swap">
    <style id="all-fonts-style-font-manrope">
        .font-manrope { font-family: 'Manrope', sans-serif !important; }
    </style>
    <link id="all-fonts-link-font-space-grotesk" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;display=swap">
    <style id="all-fonts-style-font-space-grotesk">
        .font-space-grotesk { font-family: 'Space Grotesk', sans-serif !important; }
    </style>
    <link id="all-fonts-link-font-work-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&amp;display=swap">
    <style id="all-fonts-style-font-work-sans">
        .font-work-sans { font-family: 'Work Sans', sans-serif !important; }
    </style>
    <link id="all-fonts-link-font-pt-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&amp;display=swap">
    <style id="all-fonts-style-font-pt-serif">
        .font-pt-serif { font-family: 'PT Serif', serif !important; }
    </style>
    <link id="all-fonts-link-font-geist-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&amp;display=swap">
    <style id="all-fonts-style-font-geist-mono">
        .font-geist-mono { font-family: 'Geist Mono', monospace !important; }
    </style>
    <link id="all-fonts-link-font-space-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&amp;display=swap">
    <style id="all-fonts-style-font-space-mono">
        .font-space-mono { font-family: 'Space Mono', monospace !important; }
    </style>
    <link id="all-fonts-link-font-quicksand" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&amp;display=swap">
    <style id="all-fonts-style-font-quicksand">
        .font-quicksand { font-family: 'Quicksand', sans-serif !important; }
    </style>
    <link id="all-fonts-link-font-nunito" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&amp;display=swap">
    <style id="all-fonts-style-font-nunito">
        .font-nunito { font-family: 'Nunito', sans-serif !important; }
    </style>
</head>

<body class="min-h-screen bg-[url(https://images.unsplash.com/photo-1749765804331-dd830911ba1a?w=3840&amp;q=80)] bg-cover pt-8 pr-8 pb-8 pl-8 bg-gray-900">
    <!-- Browser Frame -->
    <div class="browser-frame max-w-7xl initial-hidden animate-fade-in mr-auto ml-auto bg-black">
        <!-- Browser Chrome -->
        <div class="flex gap-3 border-b pt-3 pr-4 pb-3 pl-4 items-center bg-stone-800 border-stone-700">
            <div class="flex items-center gap-2">
                <div class="w-3 h-3 rounded-full bg-orange-500"></div>
                <div class="w-3 h-3 rounded-full bg-red-500"></div>
                <div class="w-3 h-3 rounded-full bg-pink-500"></div>
            </div>
            <div class="flex-1 rounded-lg px-4 py-2 mx-4 text-sm border bg-black text-stone-400 border-stone-700">
                <div class="flex items-center gap-2">
                    <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="lock" class="lucide lucide-lock w-4 h-4 text-green-400"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
                    <span class="font-geist text-stone-200">projectflow.app/dashboard</span>
                </div>
            </div>
            <div class="flex items-center gap-2">
                <button class="p-1 rounded transition-colors hover:bg-stone-700">
          <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="refresh-cw" class="lucide lucide-refresh-cw w-4 h-4 text-gray-400"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path><path d="M8 16H3v5"></path></svg>
        </button>
                <button class="p-1 rounded transition-colors hover:bg-stone-700">
          <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=&.........完整代码请登录后点击上方下载按钮下载查看