tailwind布局工作任务待办事项类的ui设计原型图代码
代码语言：html
所属分类：布局界面
代码描述：tailwind布局工作任务待办事项类的ui设计原型图代码
代码标签： tailwind 布局 工作 任务 待办 事项 ui 设计 原型图 代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Workspace Manager - Mobile UI</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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lucide.min.js"></script>
<style>
* { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto; }
::-webkit-scrollbar { width: 0; height: 0; }
</style>
<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">
</head>
<body class="min-h-screen flex items-center justify-center lg:p-6 bg-[url(https://images.unsplash.com/photo-1658937364065-60f3f6818724?w=2160&q=80)] bg-cover pt-4 pr-4 pb-4 pl-4">
<div class="w-full max-w-6xl flex flex-col xl:flex-row gap-12 items-center justify-center">
<!-- Phone 1 - Dashboard -->
<div class="relative h-[740px] w-[360px] overflow-hidden flex flex-col bg-white border-gray-200 border rounded-[32px] mr-auto ml-auto shadow-2xl -translate-y-4">
<div class="flex pt-6 pr-6 pl-6 items-center justify-between">
<div class="flex items-center gap-3">
<img src="https://images.unsplash.com/photo-1506863530036-1efeddceb993?w=1080&q=80" alt="Profile" class="w-9 h-9 object-cover rounded-full">
<span class="text-sm font-medium">Sarah Chen</span>
</div>
<div class="flex items-center gap-4">
<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="search" class="lucide lucide-search text-gray-500 hover:text-gray-700"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg>
<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="bell" class="lucide lucide-bell text-gray-500 hover:text-gray-700"><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>
</div>
</div>
<div class="mx-6 mt-5 p-6 rounded-2xl bg-gradient-to-br from-violet-200 to-violet-400/80 relative overflow-hidden">
<div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width= bg-[url(https://images.unsplash.com/photo-1676022763096-a1ad12b2e370?w=1080&q=80)] bg-cover" 60"="" height="60" viewbox="0 0 60 60" xmlns="http://www.w3.org/2000/svg" %3e%3cg="" fill="none" fill-rule="evenodd" fill-opacity="0.1" %3e%3ccircle="" cx="30" cy="30" r="2" %3e%3c="" g%3e%3c="" svg%3e')]="" opacity-30"=""></div>
<h3 class="relative z-10 text-lg font-medium leading-snug tracking-tight">Drive innovation<br>through collaboration</h3>
<div class="relative z-10 mt-6 flex items-center justify-between">
<div class="">
<p class="text-xs text-violet-900/70">4h 12m today</p>
<p class="text-xs font-medium text-violet-900">Sprint milestone reached</p>
</div>
<div class="w-11 h-11 flex items-center justify-center rounded-full bg-black/20 backdrop-blur-sm">
<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="trending-up" class="lucide lucide-trending-up text-violet-900 w-5 h-5"><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg>
</div>
</div>
</div>
<div class="flex items-center justify-between mx-6 mt-6">
<h4 class="font-medium">Active Tasks <span class="ml-1 px-2 py-0.5 text-xs rounded-full bg-gray-900 text-white">3</span></h4>
<div class="flex items-center gap-4">
<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="plus" class="lucide lucide-plus text-gray-500 hover:text-gray-700"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
<button class="text-gray-500 hover:text-gray-700 text-sm">View all</button>
</div>
</div>
<!-- Task Cards -->
<div class="mx-6 mt-4 bg-white rounded-2xl border border-gray-100 p-5">
<div class="flex items-start justify-between">
<div class="flex gap-3 items-start">
<svg xmlns="http://www.w3.org/2000/svg" width="24" heig.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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