tailwind布局暗色简洁窗口ui效果代码-html代码-BFW代码库

tailwind布局暗色简洁窗口ui效果代码

代码语言：html

代码描述：tailwind布局暗色简洁窗口ui效果代码

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Onboarding - Minimal Globe</title>
  <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=Geist:wght@400;500&family=Inter:wght@600&display=swap" rel="stylesheet">
  <script>
    window.tailwind = {
      theme: {
        extend: {
          fontFamily: {
            heading: ['Inter', 'sans-serif'],
            body: ['Geist', 'sans-serif']
          },
          letterSpacing: {
            tightest: '-0.03em'
          }
        }
      }
    }
  </script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.browser@4.js"></script>
</head>
<body class="bg-gray-900 min-h-screen flex items-center justify-center p-6">
  <div class="w-full max-w-4xl bg-white/5 backdrop-blur-xl rounded-2xl shadow-xl border border-white/10 flex overflow-hidden min-h-[520px]">
    <!-- Sidebar -->
    <aside class="w-60 bg-transparent border-r border-white/10 flex flex-col py-8 px-5">
      <div class=.........完整代码请登录后点击上方下载按钮下载查看