tailwind布局简洁仪表盘后台ui代码-html代码-BFW代码库

代码语言：html

代码描述：tailwind布局简洁仪表盘后台ui代码

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

<html lang="en" class="h-full bg-gray-300 antialiased">

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

    <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>
        tailwind.config = { theme: { extend: { fontFamily: { sans: ['Inter', 'sans-serif'] }}}}
    </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>
        @keyframes slideInUp {
          0% { transform: translateY(30px); opacity: 0; filter: blur(8px); }
          100% { transform: translateY(0); opacity: 1; filter: blur(0px); }
        }
        @keyframes slideInLeft {
          0% { transform: translateX(-40px); opacity: 0; filter: blur(6px); }
          100% { transform: translateX(0); opacity: 1; filter: blur(0px); }
        }
        @keyframes slideInRight {
          0% { transform: translateX(40px); opacity: 0; filter: blur(6px); }
          100% { transform: translateX(0); opacity: 1; filter: blur(0px); }
        }
        @keyframes fadeInBlur {
          0% { opacity: 0; filter: blur(10px); transform: scale(0.95); }
          100% { opacity: 1; filter: blur(0px); transform: scale(1); }
        }
        @keyframes scaleIn {
          0% { transform: scale(0.9); opacity: 0; filter: blur(8px); }
          100% { transform: scale(1); opacity: 1; filter: blur(0px); }
        }
        .animate-slide-up-1 { animation: slideInUp 0.8s ease-out 0.1s both; }
        .animate-slide-up-2 { animation: slideInUp 0.8s ease-out 0.2s both; }
        .animate-slide-up-3 { animation: slideInUp 0.8s ease-out 0.3s both; }
        .animate-slide-up-4 { animation: slideInUp 0.8s ease-out 0.4s both; }
        .animate-slide-up-5 { animation: slideInUp 0.8s ease-out 0.5s both; }
        .animate-slide-up-6 { animation: slideInUp 0.8s ease-out 0.6s both; }
        .animate-slide-up-7 { animation: slideInUp 0.8s ease-out 0.7s both; }
        .animate-slide-up-8 { animation: slideInUp 0.8s ease-out 0.8s both; }
        .animate-slide-up-9 { animation: slideInUp 0.8s ease-out 0.9s both; }
        .animate-slide-up-10 { animation: slideInUp 0.8s ease-out 1.0s both; }
        .animate-slide-left-1 { animation: slideInLeft 0.8s ease-out 0.1s both; }
        .animate-slide-left-2 { animation: slideInLeft 0.8s ease-out 0.2s both; }
        .animate-slide-left-3 { animation: slideInLeft 0.8s ease-out 0.3s both; }
        .animate-slide-left-4 { animation: slideInLeft 0.8s ease-out 0.4s both; }
        .animate-slide-right-1 { animation: slideInRight 0.8s ease-out 0.1s both; }
        .animate-slide-right-2 { animation: slideInRight 0.8s ease-out 0.2s both; }
        .animate-slide-right-3 { animation: slideInRight 0.8s ease-out 0.3s both; }
        .animate-fade-blur-1 { animation: fadeInBlur 0.8s ease-out 0.1s both; }
        .animate-fade-blur-2 { animation: fadeInBlur 0.8s ease-out 0.2s both; }
        .animate-fade-blur-3 { animation: fadeInBlur 0.8s ease-out 0.3s both; }
        .animate-fade-blur-4 { animation: fadeInBlur 0.8s ease-out 0.4s both; }
        .animate-scale-1 { animation: scaleIn 0.8s ease-out 0.5s both; }
        .animate-scale-2 { animation: scaleIn 0.8s ease-out 0.6s both; }
        .animate-scale-3 { animation: scaleIn 0.8s ease-out 0.7s both; }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Serif:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@300;400;500;600;700&family=Inter&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', sans-serif; }
    </style>
</head>

<body class="h-full flex items-center justify-center p-4">
    <div class="w-full max-w-[1440px] bg-gray-100 rounded-[28px] shadow-xl overflow-hidden animate-fade-blur-1">
        <!-- Header (Mobile) -->
        <header class="md:hidden flex items-center justify-between p-4 animate-slide-left-1">
            <button id="mobileMenuBtn" class="text-gray-600">
      <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="menu" class="lucide lucide-menu w-6 h-6"><path d="M4 12h16"></path><path d="M4 18h16"></path><path d="M4 6h16"></path></svg>
    </button>
            <h1 class="font-semibold text-lg">Analytics Hub</h1>
            <button class="text-gray-600">
      <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="bell" class="lucide lucide-bell w-6 h-6"><path d="M10.268 21a2 2 0 0 0 3.464 0"></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg>
    </button>
        </header>

        <div class="flex">
            <!-- Sidebar -->
            <aside id="sidebar" class="hidden md:flex flex-col w-64 bg-white/80 backdrop-blur-md border-r border-gray-200 animate-slide-left-2">
                <div class="flex items-center justify-between p-4 animate-fade-blur-2">
                    <div class="flex items-center gap-3">
                        <img src="https://images.unsplash.com/photo-1500649297466-74794c70acfc?w=1080&amp;q=80" alt="" class="w-10 h-10 object-cover rounded-full">
                        <div>
                            <p class="font-medium text-sm">Alex Chen</p>
                            <p class="text-xs text-gray-500">Analyst</p>
                        </div>
                    </div>
                    <button class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 transition-colors">
          <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 text-gray-600"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
        </button>
                </div>

                <!-- Search -->
                <div class="px-4 animate-slide-left-3">
                    <label class="relative w-full block">
          <span class="absolute inset-y-0 left-3 flex items-center text-gray-400">
            <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="search" class="lucide lucide-search w-4 h-4"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg>
          </span>
          <input type="text" placeholder="Search projects" class="w-full bg-gray-100 rounded-lg py-2 pl-9 pr-2 text-sm focus:outline-none hover:bg-gray-50 focus:bg-white transition-colors">
        </label>
      .........完整代码请登录后点击上方下载按钮下载查看