-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpp.html
More file actions
110 lines (99 loc) · 6.5 KB
/
pp.html
File metadata and controls
110 lines (99 loc) · 6.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind Bento Box</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-950 min-h-screen p-6 md:p-12 font-sans antialiased text-white">
<div class="max-w-5xl mx-auto">
<header class="flex flex-col gap-6 mb-10">
<div>
<p class="text-xs uppercase tracking-[0.4em] text-slate-500">Tabbed layout</p>
<h1 class="text-3xl md:text-4xl font-semibold">Bento dashboard with tabs</h1>
</div>
<div class="flex flex-wrap gap-3">
<button class="tab-button rounded-full bg-emerald-500 px-4 py-2 text-sm font-semibold text-white" data-tab="about">About</button>
<button class="tab-button rounded-full border border-white/10 px-4 py-2 text-sm text-slate-300 hover:border-emerald-500 hover:text-white" data-tab="projects">Projects</button>
<button class="tab-button rounded-full border border-white/10 px-4 py-2 text-sm text-slate-300 hover:border-emerald-500 hover:text-white" data-tab="blog">Blog</button>
</div>
</header>
<section id="about" class="tab-panel">
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 auto-rows-[200px]">
<div class="md:col-span-2 md:row-span-2 relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900 to-slate-800 p-8 shadow-2xl ring-1 ring-white/10 group hover:ring-white/20 transition-all duration-300">
<div class="absolute inset-0 bg-emerald-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<h2 class="text-3xl font-semibold text-white mb-3">Main Feature</h2>
<p class="text-slate-400 leading-relaxed max-w-sm">This card carries the most visual weight. It spans across two columns and two rows, making it the anchor point of your bento grid.</p>
</div>
<div class="md:col-span-2 md:row-span-1 flex flex-col justify-center rounded-3xl bg-slate-900 p-8 shadow-2xl ring-1 ring-white/10 hover:-translate-y-1 transition-transform duration-300">
<h3 class="text-xl font-medium text-white mb-2">Secondary Wide Card</h3>
<p class="text-sm text-slate-400">Perfect for timelines, progress bars, or a brief text intro.</p>
</div>
<div class="md:col-span-1 md:row-span-1 flex flex-col items-center justify-center text-center rounded-3xl bg-slate-900 p-6 shadow-2xl ring-1 ring-white/10 hover:bg-slate-800 transition-colors duration-300">
<span class="text-4xl font-bold text-emerald-400 mb-1">99%</span>
<span class="text-xs font-medium text-slate-500 uppercase tracking-widest">Efficiency</span>
</div>
<div class="md:col-span-1 md:row-span-1 flex flex-col justify-between rounded-3xl bg-emerald-500 p-6 shadow-2xl ring-1 ring-emerald-400 hover:bg-emerald-400 transition-colors duration-300">
<div class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center mb-4">
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
</div>
<h3 class="text-lg font-bold text-white leading-tight">Fast<br>Deploy</h3>
</div>
<div class="md:col-span-4 md:row-span-1 flex items-center justify-between rounded-3xl bg-slate-900 p-8 shadow-2xl ring-1 ring-white/10 overflow-hidden relative">
<div class="relative z-10">
<h3 class="text-xl font-medium text-white">Full Width Container</h3>
<p class="text-sm text-slate-400 mt-1">Excellent for a footer, a call-to-action, or a horizontal list of tech stack icons.</p>
</div>
<div class="absolute -right-20 -bottom-20 w-64 h-64 bg-indigo-500/20 blur-3xl rounded-full"></div>
</div>
</div>
</section>
<section id="projects" class="tab-panel hidden">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="rounded-3xl bg-slate-900 p-8 shadow-2xl ring-1 ring-white/10">
<h3 class="text-xl font-semibold">Featured Projects</h3>
<p class="text-sm text-slate-400 mt-2">Highlight releases, demos, or case studies here.</p>
</div>
<div class="rounded-3xl bg-slate-900 p-8 shadow-2xl ring-1 ring-white/10">
<h3 class="text-xl font-semibold">Open Source</h3>
<p class="text-sm text-slate-400 mt-2">List repositories and community work.</p>
</div>
</div>
</section>
<section id="blog" class="tab-panel hidden">
<div class="rounded-3xl bg-slate-900 p-8 shadow-2xl ring-1 ring-white/10">
<h3 class="text-xl font-semibold">Latest Posts</h3>
<ul class="mt-4 space-y-3 text-sm text-slate-400">
<li>Designing modular interfaces for developer portfolios</li>
<li>How to plan a product-led roadmap</li>
<li>Notes from recent engineering experiments</li>
</ul>
</div>
</section>
</div>
<script>
const tabButtons = document.querySelectorAll(".tab-button");
const tabPanels = document.querySelectorAll(".tab-panel");
const setActiveTab = (tabId) => {
tabPanels.forEach((panel) => {
panel.classList.toggle("hidden", panel.id !== tabId);
});
tabButtons.forEach((button) => {
const isActive = button.dataset.tab === tabId;
button.classList.toggle("bg-emerald-500", isActive);
button.classList.toggle("text-white", isActive);
button.classList.toggle("border", !isActive);
button.classList.toggle("border-white/10", !isActive);
button.classList.toggle("text-slate-300", !isActive);
});
};
tabButtons.forEach((button) => {
button.addEventListener("click", () => {
setActiveTab(button.dataset.tab);
});
});
setActiveTab("about");
</script>
</body>
</html>