statscardgridtailwindresponsivehoverglassmorphismmetrics

Frosted Glass Statistic Cards Grid

Сетка карточек статистики с эффектом frosted glass на Tailwind CSS. Адаптивный дизайн, подсветка при наведении. Идеально для лендингов и дашбордов.

Live Preview

Prompt

<div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mt-6">
  <div
    class="rounded-xl bg-white/6 backdrop-blur-sm border border-white/10 p-3 shadow-sm hover:bg-white/10 transition-all duration-300">
    <div class="text-xl font-semibold tracking-tight text-white font-geist drop-shadow-sm">200+</div>
    <p class="text-[11px] text-white/80 mt-0.5 font-geist">Projects Delivered</p>
  </div>
  <div
    class="rounded-xl bg-white/6 backdrop-blur-sm border border-white/10 p-3 shadow-sm hover:bg-white/10 transition-all duration-300">
    <div class="text-xl font-semibold tracking-tight text-white font-geist drop-shadow-sm">50+</div>
    <p class="text-[11px] text-white/80 mt-0.5 font-geist">Clients Worldwide</p>
  </div>
  <div
    class="rounded-xl bg-white/6 backdrop-blur-sm border border-white/10 p-3 shadow-sm hover:bg-white/10 transition-all duration-300">
    <div class="text-xl font-semibold tracking-tight text-white font-geist drop-shadow-sm">8</div>
    <p class="text-[11px] text-white/80 mt-0.5 font-geist">Years in Practice</p>
  </div>
  <div
    class="rounded-xl bg-white/6 backdrop-blur-sm border border-white/10 p-3 shadow-sm hover:bg-white/10 transition-all duration-300">
    <div class="text-xl font-semibold tracking-tight text-white font-geist drop-shadow-sm">12</div>
    <p class="text-[11px] text-white/80 mt-0.5 font-geist">Team Members</p>
  </div>
</div>

All Prompts