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
<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-3xl w-full grid md:grid-cols-3 gap-4">
<div class="bg-white ring-1 ring-slate-200 rounded-2xl p-6 shadow-sm">
<p class="font-semibold">Starter</p>
<p class="mt-3"><span class="text-3xl font-bold tracking-tight">$0</span><span class="text-sm text-slate-500">/mo</span></p>
<ul class="mt-5 space-y-2 text-sm text-slate-600">
<li>✓ 1 project</li><li>✓ Community support</li><li>✓ Basic analytics</li>
</ul>
<button class="mt-6 w-full px-4 py-2 rounded-lg ring-1 ring-slate-200 text-sm font-medium hover:bg-slate-50 transition">Get started</button>
</div>
<div class="bg-slate-900 text-white rounded-2xl p-6 shadow-2xl shadow-slate-900/20 relative ring-1 ring-slate-900 md:-translate-y-2">
<span class="absolute -top-2 right-4 px-2 py-0.5 rounded-full bg-indigo-500 text-white text-xs font-medium">Popular</span>
<p class="font-semibold">Pro</p>
<p class="mt-3"><span class="text-3xl font-bold tracking-tight">$29</span><span class="text-sm text-slate-400">/mo</span></p>
<ul class="mt-5 space-y-2 text-sm text-slate-300">
<li>✓ Unlimited projects</li><li>✓ Priority support</li><li>✓ Advanced analytics</li>
</ul>
<button class="mt-6 w-full px-4 py-2 rounded-lg bg-white text-slate-900 text-sm font-medium hover:bg-slate-100 transition">Start trial</button>
</div>
<div class="bg-white ring-1 ring-slate-200 rounded-2xl p-6 shadow-sm">
<p class="font-semibold">Enterprise</p>
<p class="mt-3"><span class="text-3xl font-bold tracking-tight">Custom</span></p>
<ul class="mt-5 space-y-2 text-sm text-slate-600">
<li>✓ SSO + SAML</li><li>✓ Dedicated CSM</li><li>✓ Custom SLAs</li>
</ul>
<button class="mt-6 w-full px-4 py-2 rounded-lg ring-1 ring-slate-200 text-sm font-medium hover:bg-slate-50 transition">Contact sales</button>
</div>
</div>
</div>
rloop.dev/p/Pr-N37