Explorer
project
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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-md w-full bg-white ring-1 ring-slate-200 rounded-2xl p-6 shadow-sm space-y-4">
<div class="flex items-center justify-between">
<span class="text-sm font-medium">Mobile only</span>
<span class="md:hidden px-2.5 py-1 rounded-md bg-emerald-50 text-emerald-700 text-xs font-medium ring-1 ring-emerald-100">visible</span>
<span class="hidden md:inline px-2.5 py-1 rounded-md bg-slate-100 text-slate-500 text-xs font-medium">hidden</span>
</div>
<div class="flex items-center justify-between">
<span class="text-sm font-medium">Desktop only</span>
<span class="hidden md:inline px-2.5 py-1 rounded-md bg-emerald-50 text-emerald-700 text-xs font-medium ring-1 ring-emerald-100">visible</span>
<span class="md:hidden px-2.5 py-1 rounded-md bg-slate-100 text-slate-500 text-xs font-medium">hidden</span>
</div>
<div class="flex items-center justify-between">
<span class="text-sm font-medium">Inline-flex chip</span>
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-indigo-50 text-indigo-700 text-xs font-medium"><span class="h-1.5 w-1.5 rounded-full bg-indigo-500"></span>active</span>
</div>
</div>
</div>
rloop.dev/p/Pr-H44