// Standard glassmorphic container
<div className="bg-black/20 backdrop-blur-md border border-white/10">
  ...
</div>

<div className="bg-black/20 backdrop-blur-md border border-white/10 rounded-full px-3 py-2">
  {/* Content */}
</div>

<div className="bg-white/10 backdrop-blur-md border border-white/20 rounded-xl px-4 py-3">
  {/* Content */}
</div>

<div className="bg-black/10 backdrop-blur-sm border border-white/5 rounded-lg px-3 py-2">
  {/* Content */}
</div>

<div className="bg-black/40 backdrop-blur-lg border border-white/20 rounded-2xl px-5 py-4">
  {/* Content */}
</div>

<div className="absolute bottom-3 left-1/2 -translate-x-1/2">
  <div className="flex items-center gap-2 px-3 py-2 rounded-full bg-black/20 backdrop-blur-md border border-white/10">
    {/* Indicator dots */}
  </div>
</div>

<button className="fixed bottom-6 right-6 p-4 rounded-full bg-black/20 backdrop-blur-md border border-white/10 hover:bg-black/30 transition-colors">
  <Icon className="w-6 h-6 text-white" />
</button>

<div className="absolute top-full mt-2 px-3 py-2 rounded-lg bg-black/30 backdrop-blur-md border border-white/10">
  <span className="text-white text-sm">Tooltip content</span>
</div>

<nav className="fixed top-0 left-0 right-0 z-50 bg-black/10 backdrop-blur-md border-b border-white/10">
  {/* Nav content */}
</nav>