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>
     .........完整代码请登录后点击上方下载按钮下载查看