Glassmorphism Card

1export default function GlassmorphismCard() {
2  return (
3    <div className="flex min-h-screen items-center justify-center bg-[#09090b] p-8">
4      {/* Background shapes */}
5      <div className="relative">
6        <div className="absolute -left-20 -top-20 h-40 w-40 rounded-full bg-orange-500/30 blur-3xl" />
7        <div className="absolute -bottom-10 -right-10 h-32 w-32 rounded-full bg-violet-500/20 blur-3xl" />
8        <div className="absolute left-20 top-10 h-24 w-24 rounded-full bg-sky-500/20 blur-2xl" />
9        
10        {/* Glass card */}
11        <div className="relative w-80 rounded-2xl border border-white/10 bg-white/5 p-6 backdrop-blur-xl">
12          <div className="mb-4 flex items-center gap-3">
13            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-orange-500/20">
14              <svg className="h-5 w-5 text-orange-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
15                <path strokeLinecap="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
16              </svg>
17            </div>
18            <div>
19              <h3 className="text-sm font-semibold text-white">Performance</h3>
20              <p className="text-xs text-zinc-400">Last 30 days</p>
21            </div>
22          </div>
23          
24          <p className="mb-4 text-sm leading-relaxed text-zinc-400">
25            Your components have seen a 24% increase in copies this month across all categories.
26          </p>
27          
28          <div className="mb-5 flex items-center gap-4">
29            <div>
30              <p className="text-2xl font-bold text-white">2.4k</p>
31              <p className="text-[10px] uppercase tracking-wider text-zinc-500">Copies</p>
32            </div>
33            <div className="h-8 w-px bg-white/10" />
34            <div>
35              <p className="text-2xl font-bold text-white">890</p>
36              <p className="text-[10px] uppercase tracking-wider text-zinc-500">Likes</p>
37            </div>
38            <div className="h-8 w-px bg-white/10" />
39            <div>
40              <p className="text-2xl font-bold text-white">12k</p>
41              <p className="text-[10px] uppercase tracking-wider text-zinc-500">Views</p>
42            </div>
43          </div>
44          
45          <button className="w-full rounded-lg bg-white/10 py-2 text-sm font-medium text-white transition hover:bg-white/20">
46            View Details
47          </button>
48        </div>
49      </div>
50    </div>
51  );
52}