tailwind布局设计师社区app原型图代码
代码语言：html
所属分类：布局界面
代码描述：tailwind布局设计师社区app原型图代码
代码标签： tailwind 布局 设计师 社区 app 原型图 代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html lang="zh-CN"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设计师社区APP原型</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: '#165DFF',
secondary: '#36CFC9',
accent: '#FF7D00',
dark: '#1D2129',
light: '#F2F3F5',
muted: '#86909C'
},
fontFamily: {
inter: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.prototype-shadow {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.prototype-card {
@apply bg-white rounded-xl overflow-hidden prototype-shadow transition-all duration-300 hover:shadow-lg;
}
.prototype-header {
@apply text-lg font-semibold text-dark mb-3 flex items-center;
}
.prototype-subheader {
@apply text-sm font-medium text-muted mb-2;
}
}
</style>
</head>
<body class="bg-gray-50 font-inter p-4 md:p-8">
<div class="max-w-7xl mx-auto">
<h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-8 text-center">设计师社区APP原型图</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- 首页 -->
<div class="prototype-card">
<div class="p-5">
<div class="prototype-header">
<i class="fa fa-home text-primary mr-2"></i>
<span>首页</span>
</div>
<div class="h-[450px] bg-light rounded-lg overflow-hidden relative">
<div class="h-16 bg-primary flex items-center justify-between px-4">
<div class="text-white font-semibold">设计师社区</div>
<div class="flex space-x-3">
<i class="fa fa-search text-white"></i>
<i class="fa fa-bell text-white"></i>
</div>
</div>
<div class="px-4 py-3">
<div class="flex space-x-2 overflow-x-auto pb-2">
<span class="px-3 py-1 bg-primary text-white rounded-full text-xs whitespace-nowrap">推荐</span>
<span class="px-3 py-1 bg-gray-200 text-dark rounded-full text-xs whitespace-nowrap">最新</span>
<span class="px-3 py-1 bg-gray-200 text-dark rounded-full text-xs whitespace-nowrap">热门</span>
<span class="px-3 py-1 bg-gray-200 text-dark rounded-full text-xs whitespace-nowrap">插画</span>
<span class="px-3 py-1 bg-gray-200 text-dark rounded-full text-xs whitespace-nowrap">UI设计</span>
<span class="px-3 py-1 bg-gray-200 text-dark rounded-full text-xs whitespace-nowrap">平面设计</span>
</div>
</div>
<div class="px-4">
<div class="space-y-3">
<div class="bg-white rounded-lg p-3">
<div class="flex items-center mb-2">
<img src="https://picsum.photos/seed/designer1/40/40" alt="用户头像" class="w-8 h-8 rounded-full">
<div class="ml-2">
<div class="text-sm font-medium">张设计师</div>
<div class="text-xs text-muted">2小时前</div>
</div>
</div>
<div class="text-sm mb-2">分享我的最新作品《未来城市》概念设计</div>
<div class="grid grid-cols-2 gap-1 mb-2">
<img src="https://picsum.photos/seed/design1/150/100" alt="设计作品缩略图" class="w-full h-20 object-cover rounded">
<img src="https://picsum.photos/seed/design2/150/100" alt="设计作品缩略图" class="w-full h-20 object-cover rounded">
</div>
<div class="flex justify-between text-xs text-muted">
<span><i class="fa fa-heart-o mr-1"></i> 128</span>
<span><i class="fa fa-comment-o mr-1"></i> 32</span>
<span><i class="fa fa-share mr-1"></i> 8</span>
</div>
</div>
<div class="bg-white rounded-lg p-3">
<div class="flex items-center mb-2">
<img src="https://picsum.photos/seed/designer2/40/40" alt="用户头像" class="w-8 h-8 rounded-full">
<div class="ml-2">
<div class="text-sm font-medium">李UI</div>
<div class="text-xs text-muted">昨天</div>
</div>
</div>
<div class="text-sm mb-2">极简风格APP界面设计分享</div>
<div class="grid grid-cols-3 gap-1 mb-2">
<img src="https://picsum.photos/seed/design3/100/100" alt="设计作品缩略图" class="w-full h-16 object-cover rounded">
<img src="https://picsum.photos/seed/design4/100/100" alt="设计作品缩略图" class="w-full h-16 object-cover rounded">
<img src="https://picsum.photos/seed/design5/100/100" alt="设计作品缩略图" class="w-full h-16 object-cover rounded">
</div>
<div class="flex justify-between text-xs text-muted">
<span><i class="fa fa-heart-o mr-1"></i> 256</span>
<span><i class="fa fa-comment-o mr-1"></i> 45</span>
<span><i class="fa fa-share mr-1"></i> 12</span>
</div>
</div>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 h-12 border-t border-gray-200 flex items-center justify-around bg-white">
<div class="text-primary text-center">
<i class="fa fa-home block text-lg"></i>
<span class="text-xs">首页</span>
</div>
<div class="text-muted text-center">
<i class="fa fa-compass block text-lg"></i>
<span class="text-xs">发现</span>
</div>
<div class="text-muted text-center">
<i class="fa fa-plus-circle block text-xl text-accent"></i>
</div>
<div class="text-muted text-center">
<i class="fa fa-bell block text-lg"></i>
<span class="text-xs">消息</span>
</div>
<div class="text-muted text-center">
<i class="fa fa-user block text-lg"></i>
<span class="text-xs">我的</span>
</div>
</div>
</div>
</div>
</div>
<!-- 发现页 -->
<div class="prototype-card">
<div class="p-5">
<div class="prototype-header">
<i class="fa fa-compass text-primary mr-2"></i>
<span>发现页</span>
</div>
<div class=&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