tailwind布局实现黑色暗色后台仪表盘ui代码-html代码-BFW代码库

tailwind布局实现黑色暗色后台仪表盘ui代码

代码语言：html

代码描述：tailwind布局实现黑色暗色后台仪表盘ui代码

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

<!DOCTYPE html>
<html lang="en" class="dark">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Aura Dashboard - Dark Mode</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
  <script>
    tailwind.config = {
      darkMode: 'class'
    }
  </script>
</head>
<body class="bg-neutral-950 text-neutral-100 min-h-screen font-inter">
  <div class="flex h-screen">
    <!-- Sidebar -->
    <aside class="w-20 lg:w-60 bg-neutral-900 border-r border-neutral-800 flex flex-col justify-between">
      <div>
        <div class="flex items-center gap-3 px-4 pt-6 pb-8">
          <div class="w-8 h-8 rounded bg-gradient-to-tr from-violet-900 to-indigo-700 flex items-center justify-center font-bold text-white text-lg">A</div>
          <span class="font-semibold text-xl hidden lg:inline-block tracking-tight text-neutral-100">Aura</span>
        </div>
        <nav class="flex flex-col gap-2 mt-2 px-2">
          <a href="#" class="flex items-center gap-3 px-3 py-3 rounded-lg text-white bg-neutral-100/10 font-semibold border border-neutral-700 shadow-sm transition">
            <svg class="w-5 h-5 opacity-80" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8v-10h-8v10zm0-18v6h8V3h-8z"/>
            </svg>
            <span class="hidden lg:inline-block">Overview</span>
          </a>
          <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-neutral-300 hover:bg-neutral-800 transition">
            <svg class="w-5 h-5 opacity-70" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <rect x="3" y="6" width="18" height="13" rx="2"/>
              <path d="M16 10a4 4 0 1 1-8 0"/>
            </svg>
            <span class="hidden lg:inline-block">Board</span>
          </a>
          <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-neutral-300 hover:bg-neutral-800 transition">
            <svg class="w-5 h-5 opacity-70" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"&g.........完整代码请登录后点击上方下载按钮下载查看