Tarjetas de estadísticas agrupadas

por

Kyle Kozlowski

• 12/30/2025

Avance

Kyle Kozlowski

Se unió hace 2 meses

Contribuciones 4

Visitar perfil

Acerca de este componente

Un grupo de tarjetas bellamente diseñado que se utilizan para las estadísticas.

#tarjeta

Fragmento de código

<style>
  .glass {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
  }
  .glass-dark {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
</style>
<section class="relative py-24 z-20">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
      <div class="glass p-8 rounded-3xl border border-white/5">
        <div class="text-4xl font-black text-white mb-2">99.99<span class="text-blue-500">%</span></div>
        <div class="text-xs uppercase tracking-[0.2em] font-bold text-slate-500">System Uptime</div>
      </div>
      <div class="glass p-8 rounded-3xl border border-white/5">
        <div class="text-4xl font-black text-white mb-2">1M<span class="text-purple-500">+</span></div>
        <div class="text-xs uppercase tracking-[0.2em] font-bold text-slate-500">Threats Blocked</div>
      </div>
      <div class="glass p-8 rounded-3xl border border-white/5">
        <div class="text-4xl font-black text-white mb-2">256<span class="text-blue-500">bit</span></div>
        <div class="text-xs uppercase tracking-[0.2em] font-bold text-slate-500">AES Encryption</div>
      </div>
      <div class="glass p-8 rounded-3xl border border-white/5">
        <div class="text-4xl font-black text-white mb-2">50<span class="text-purple-500">ms</span></div>
        <div class="text-xs uppercase tracking-[0.2em] font-bold text-slate-500">Response Time</div>
      </div>
    </div>
  </div>
</section>