tailwindcss实现ai工具箱黑色ui布局代码
代码语言：html
所属分类：布局界面
代码描述：tailwindcss实现ai工具箱黑色ui布局代码
代码标签： tailwind ai 工具箱 黑色 ui 布局 代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>toolbox</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#7C3AED', // 主紫色
secondary: '#1E293B', // 深色背景
sidebar: '#0F172A', // 侧边栏颜色
card: '#1E293B', // 卡片背景
cardHover: '#334155', // 卡片悬停颜色
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.scrollbar-thin {
scrollbar-width: thin;
}
.scrollbar-thumb-rounded {
scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}
.window-shadow {
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
}
}
</style>
</head>
<body class="bg-gray-900/80 min-h-screen flex items-center justify-center p-4">
<!-- 弹出窗口容器 -->
<div id="appWindow" class="bg-secondary text-gray-200 font-sans rounded-lg overflow-hidden window-shadow w-[90%] max-w-6xl h-[80vh] flex flex-col transition-all duration-300">
<!-- 窗口标题栏 - 可拖动区域 -->
<div id="titleBar" class="bg-sidebar px-4 py-2 flex items-center justify-between border-b border-gray-700 cursor-move">
<div class="flex items-center">
<i class="fa fa-wrench text-primary mr-2"></i>
<span class="font-medium">ToolBox</span>
</div>
<div class="flex items-center space-x-1">
<button id="minimizeBtn" class="p-2 hover:bg-gray-700 rounded transition-colors">
<i class="fa fa-window-minimize text-gray-400"></i>
</button>
<button id="maximizeBtn" class="p-2 hover:bg-gray-700 rounded transition-colors">
<i class="fa fa-window-maximize text-gray-400"></i>
</button>
<button id="closeBtn" class="p-2 hover:bg-red-600 rounded transition-colors">
<i class="fa fa-times text-gray-400"></i>
</button>
</div>
</div>
<!-- 窗口内容区域 -->
<div class="flex-1 flex overflow-hidden">
<!-- 侧边栏 -->
<aside class="bg-sidebar w-64 flex-shrink-0 flex flex-col border-r border-gray-700">
<!-- 顶部搜索栏 -->
<div class="p-4 border-b border-gray-700">
<div class="relative">
<input type="text" placeholder="Type to search for tools..." class="w-full bg-gray-800 rounded-md py-2 pl-10 pr-4 text-sm focus:outline-none focus:ring-2 focus:ring-primary">
<i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
</div>
</div>
<!-- 工具导航 -->
<nav class="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-rounded p-2">
<div class="mb-4">
<p class="text-xs uppercase text-gray-500 px-3 mb-2">All tools</p>
<ul>
<li>
<a href="#" class="flex items-center px-3 py-2 rounded-md bg-primary/20 text-primary">
<i class="fa fa-th-large w-5 mr-3"></i>
<span>Markdown Preview</span>
</a>
</li>
<li>
<a href="#" class="flex items-center px-3 py-2 rounded-md hover:bg-gray-700/50 transi.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0