tailwind布局实现亮色简洁PC端邮箱ui代码
代码语言：html
所属分类：布局界面
代码描述：tailwind布局实现亮色简洁PC端邮箱ui代码
代码标签： tailwind 布局 亮色 简洁 PC端 邮箱 ui 代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen p-4">
<!-- Mac Browser Window Container -->
<div class="w-full max-w-6xl bg-white rounded-lg shadow-xl overflow-hidden border border-gray-200">
<!-- Browser Header -->
<div class="bg-gray-100 px-4 py-2 border-b border-gray-200 flex items-center">
<div class="flex space-x-2 mr-4">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
</div>
<div class="flex-1 flex justify-center">
<div class="bg-gray-200 rounded-md py-1 px-3 text-xs text-gray-600 w-1/2 text-center">flux-mail.app</div>
</div>
</div>
<!-- App Container -->
<div class="flex h-[650px]">
<!-- Sidebar -->
<div class="w-64 bg-gray-50 border-r border-gray-200 flex flex-col">
<!-- App Logo -->
<div class="p-4 border-b border-gray-200">
<div class="flex items-center">
<div class="w-8 h-8 rounded-md bg-indigo-500 flex items-center justify-center text-white font-bold">F</div>
<span class="ml-2 font-medium text-gray-800">Flux Mail</span>
</div>
</div>
<!-- Sidebar Navigation -->
<nav class="flex-1 overflow-y-auto p-2">
<div class="space-y-1">
<a href="#" class="flex items-center px-3 py-2 rounded-md bg-indigo-50 text-indigo-700 group">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
</svg>
<span>Inbox</span>
<span class="ml-auto bg-indigo-100 text-indigo-800 rounded-full px-2 py-0.5 text-xs">24</span>
</a>
<a href="#" class="flex items-center px-3 py-2 rounded-md text-gray-700 hover:bg-gray-100 group">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
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