Explorer
project
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="min-h-screen bg-gradient-to-br from-slate-50 via-white to-indigo-50/40 font-sans text-slate-900 antialiased p-8 flex items-center justify-center">
<div class="max-w-2xl w-full space-y-4">
<h2 class="text-2xl font-semibold tracking-tight">Color System</h2>
<div class="grid grid-cols-4 gap-3">
<div class="aspect-square rounded-xl bg-indigo-600 shadow-lg shadow-indigo-600/20 flex items-end p-3 text-white text-xs font-medium">Indigo</div>
<div class="aspect-square rounded-xl bg-violet-600 shadow-lg shadow-violet-600/20 flex items-end p-3 text-white text-xs font-medium">Violet</div>
<div class="aspect-square rounded-xl bg-emerald-500 shadow-lg shadow-emerald-500/20 flex items-end p-3 text-white text-xs font-medium">Emerald</div>
<div class="aspect-square rounded-xl bg-rose-500 shadow-lg shadow-rose-500/20 flex items-end p-3 text-white text-xs font-medium">Rose</div>
</div>
<div class="rounded-xl bg-white ring-1 ring-slate-200 p-5">
<p class="text-slate-900 font-medium">Primary text — slate-900</p>
<p class="text-slate-600 mt-1">Secondary text — slate-600</p>
<p class="text-slate-400 mt-1 text-sm">Muted text — slate-400</p>
</div>
</div>
</div>
rloop.dev/p/Pr-C85