tailwind布局实现ai视频剪辑生成工具ui代码
代码语言：html
所属分类：布局界面
代码描述：tailwind布局实现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">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
fontFamily: {
sans: ['Inter', 'ui-sans-serif', 'system-ui']
}
}
}
</script>
<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">
<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">
<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="min-h-screen flex items-center justify-center antialiased text-white bg-gradient-to-r from-slate-900 to-slate-700">
<!-- Main Canvas -->
<div class="relative w-full max-w-6xl h-screen max-h-[900px] bg-gray-900/80 backdrop-blur-xl rounded-3xl overflow-hidden shadow-2xl border border-white/10">
<!-- Top Navigation -->
<nav class="absolute top-0 left-0 right-0 flex items-center gap-4 px-6 py-4 backdrop-blur-md bg-gray-900/60 border-b border-white/10">
<div class="flex items-center gap-2 text-lg font-medium tracking-tight">
<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="clapperboard" id="logo" class="lucide lucide-clapperboard w-5 h-5 text-blue-400"><path d="M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3Z"></path><path d="m6.2 5.3 3.1 3.9"></path><path d="m12.4 3.4 3.1 4"></path><path d="M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"></path></svg>
<span class="">MotionFlow</span>
</div>
<div class="hidden lg:flex items-center gap-2 ml-6">
<button class="px-4 py-2 rounded-lg bg-white text-black text-sm font-medium shadow-sm hover:bg-gray-100 transition-colors">Timeline</button>
<button class="px-4 py-2 rounded-lg border border-white/20 text-sm hover:bg-white/10 transition-colors">Projects</button>
<button class="px-4 py-2 rounded-lg border border-white/20 text-sm hover:bg-white/10 transition-colors">Library</button>
<button class="px-4 py-2 rounded-lg border border-white/20 text-sm hover:bg-white/10 transition-colors">Templates</button>
<button class="px-4 py-2 rounded-lg border border-white/20 text-sm hover:bg-white/10 transition-colors">Export</button>
<button class="px-4 py-2 rounded-lg border border-white/20 text-sm hidden xl:inline hover:bg-white/10 transition-colors">Settings</button>
</div>
</nav>
<!-- Left Tool Panel -->
<div class="absolute top-1/2 -translate-y-1/2 left-4 lg:left-6 flex flex-col items-center gap-3">
<button class="w-12 h-12 bg-white/10 hover:bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center border border-white/10 transition-all hover:scale-105">
<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="move" class="lucide lucide-move w-5 h-5"><path d="M12 2v20"></path><path d="m15 19-3 3-3-3"></path><path d="m19 9 3 3-3 3"></path><path d="M2 12h20"></path><path d="m5 9-3 3 3 3"></path><path d="m9 5 3-3 3 3"></path></svg>
</button>
<button class="w-12 h-12 bg-white/10 hover:bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center border border-white/10 transition-all hover:scale-105">
<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="crop" class="lucide lucide-crop w-5 h-5"><path d="M6 2v14a2 2 0 0 0 2 2h14"></path><path d="M18 22V8a2 2 0 0 0-2-2H2"></path></svg>
</button>
<button class="w-12 h-12 bg-white/10 hover:bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center border border-white/10 transition-all hover:scale-105">
<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="scissors" class="lucide lucide-scissors w-5 h-5"><circle cx="6" cy="6" r="3"></circle><path d="M8.12 8.12 12 12"></path><path d="M20 4 8.12 15.88"></path><circle cx="6" cy="18" r="3"></circle><path d="M14.8 14.8 20 20"></path></svg>
</button>
<button class="w-12 h-12 bg-white/10 hover:bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center border border-white/10 transition-all hover:scale-105">
<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&qu.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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