Explorer
project
index.html
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
<div class="min-h-screen bg-slate-50 font-sans antialiased flex">
<aside class="w-60 bg-white ring-1 ring-slate-200 p-4 flex flex-col gap-1">
<div class="flex items-center gap-2 px-2 py-3">
<div class="h-8 w-8 rounded-lg bg-gradient-to-br from-indigo-600 to-violet-600"></div>
<span class="font-semibold tracking-tight">Rloop</span>
</div>
<nav class="mt-2 space-y-1 text-sm">
<a href="#" class="flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-100 text-slate-900 font-medium">Dashboard</a>
<a href="#" class="flex items-center gap-2 px-3 py-2 rounded-lg text-slate-600 hover:bg-slate-50 transition">Projects</a>
<a href="#" class="flex items-center gap-2 px-3 py-2 rounded-lg text-slate-600 hover:bg-slate-50 transition">Customers</a>
<a href="#" class="flex items-center gap-2 px-3 py-2 rounded-lg text-slate-600 hover:bg-slate-50 transition">Reports</a>
<a href="#" class="flex items-center gap-2 px-3 py-2 rounded-lg text-slate-600 hover:bg-slate-50 transition">Settings</a>
</nav>
</aside>
<main class="flex-1 p-8">
<div class="flex items-center justify-between">
<div>
<h1 class="text-2xl font-semibold tracking-tight">Dashboard</h1>
<p class="text-sm text-slate-500">Overview of your workspace</p>
</div>
<button class="px-3 py-1.5 rounded-lg bg-slate-900 text-white text-sm font-medium hover:bg-slate-800 transition">+ New project</button>
</div>
<div class="mt-6 grid grid-cols-3 gap-4">
<div class="bg-white ring-1 ring-slate-200 rounded-2xl p-5 shadow-sm">
<p class="text-xs text-slate-500 font-medium uppercase tracking-wider">Revenue</p>
<p class="mt-2 text-2xl font-bold tracking-tight">$48,290</p>
<p class="mt-1 text-xs text-emerald-600">↑ 12.4%</p>
</div>
<div class="bg-white ring-1 ring-slate-200 rounded-2xl p-5 shadow-sm">
<p class="text-xs text-slate-500 font-medium uppercase tracking-wider">Users</p>
<p class="mt-2 text-2xl font-bold tracking-tight">12,940</p>
<p class="mt-1 text-xs text-emerald-600">↑ 4.1%</p>
</div>
<div class="bg-white ring-1 ring-slate-200 rounded-2xl p-5 shadow-sm">
<p class="text-xs text-slate-500 font-medium uppercase tracking-wider">Churn</p>
<p class="mt-2 text-2xl font-bold tracking-tight">1.2%</p>
<p class="mt-1 text-xs text-rose-600">↓ 0.3%</p>
</div>
</div>
</main>
</div>
rloop.dev/p/Pr-F76