tailwindcss实现手机移动app仪表盘ui布局代码
代码语言：html
所属分类：布局界面
代码描述：tailwindcss实现手机移动app仪表盘ui布局代码
代码标签： tailwind 手机 移动 app 仪表盘 ui 布局 代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insights</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<body class="min-h-screen bg-[#0B0B0F] text-slate-100 antialiased" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;"><div class="spline-container fixed top-0 w-full h-screen -z-10"><iframe src="https://my.spline.design/radialglass-20RYcJn9wbsEb5QEYkazHjpb" frameborder="0" width="100%" height="100%" class=""></iframe></div>
<div class="min-h-screen flex pt-6 pr-6 pb-6 pl-6 items-center justify-center">
<!-- iPhone Frame -->
<div class="relative ring-1 ring-white/10 shadow-[0_40px_120px_-30px_rgba(0,0,0,0.75)] bg-indigo-950/30 rounded-[38px] pt-3 pr-3 pb-3 pl-3 backdrop-blur">
<!-- Side buttons -->
<div class="pointer-events-none absolute -left-1 top-28 h-16 w-[3px] rounded-r-full bg-white/10"></div>
<div class="pointer-events-none absolute -right-1 top-24 h-10 w-[3px] rounded-l-full bg-white/10"></div>
<div class="pointer-events-none absolute -right-1 top-40 h-20 w-[3px] rounded-l-full bg-white/10"></div>
<!-- Screen -->
<div class="relative overflow-hidden w-[448px] bg-[radial-gradient(circle_at_bottom_left,var(--tw-gradient-stops))] from-[#5e2ce8]/10 via-[#0B0B0F] to-[#0B0B0F] border-slate-50/10 border rounded-[30px]">
<!-- Dynamic Island / Notch -->
<div class="pointer-events-none absolute left-1/2 top-2 z-30 h-7 w-40 -translate-x-1/2 rounded-full bg-black/90 ring-1 ring-white/5"></div>
<div class="max-w-md mr-auto ml-auto pb-28">
<!-- Status Bar -->
<div class="flex text-xs text-slate-300 pt-5 pr-5 pl-5 items-center justify-between">
<div class="font-medium tracking-tight">9:41</div>
<div class="flex items-center gap-2 opacity-80">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="signal" class="lucide lucide-signal h-4 w-4"><path d="M2 20h.01"></path><path d="M7 20v-4"></path><path d="M12 20v-8"></path><path d="M17 20V8"></path><path d="M22 4v16"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="wifi" class="lucide lucide-wifi h-4 w-4"><path d="M12 20h.01"></path><path d="M2 8.82a15 15 0 0 1 20 0"></path><path d="M5 12.859a10 10 0 0 1 14 0"></path><path d="M8.5 16.429a5 5 0 0 1 7 0"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="battery" class="lucide lucide-battery h-4 w-4"><path d="M 22 14 L 22 10"></path><rect x="2" y="6" width="16" height="12" rx="2"></rect></svg>
</div>
</div>
<!-- Header -->
<header class="mt-3 flex items-center justify-between px-5 transition duration-500 ease-out motion-reduce:transition-none opacity-100 translate-y-0 blur-none" style="">
<h1 class="text-[28px] leading-tight tracking-tight font-semibold text-white">Insights</h1>
<div class="flex items-center gap-3">
<div class="h-8 w-8 flex text-[13px] font-semibold text-[#0B0B0F] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9c3af2bd-32da-4659-8095-1deb5455b9f6_320w.jpg)] bg-cover rounded-full items-center justify-center"></div>
<button data-action="toggle-notifications" class="rounded-full bg-white/5 p-2 ring-1 ring-white/10 hover:bg-white/10 transition duration-200 ease-out motion-reduce:transition-none active:scale-95 motion-reduce:transform-none">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="bell" class="lucide lucide-bell h-5 w-5 text-slate-200"><path d="M10.268 21a2 2 0 0 0 3.464 0"></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg>
</button>
<button data-action="create-new" class="rounded-full bg-white/5 p-2 ring-1 ring-white/10 hover:bg-white/10 transition duration-200 ease-out motion-reduce:transition-none active:scale-95 motion-reduce:transform-none">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus h-5 w-5 text-slate-200"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
</button>
</div>
</header>
<!-- Filters -->
<div class="mt-5 px-5">
<div class="flex flex-wrap gap-3" id="aura-emeb8ndsf"><button data-filter="engagement" aria-haspopup="menu" aria-expanded="false" class="rounded-2xl bg-white/5 px-4 py-2 text-sm text-slate-200 ring-1 ring-white/10 backdrop-blur hover:bg-white/10 transition duration-200 ease-out motion-reduce:transition-none active:scale-95 motion-reduce:transform-none duration-500 opacity-100 translate-y-0 blur-none" style="">
<span class="mr-2">Engagement</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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