VibeCoderzVibeCoderz
Telegram
All Prompts
Statistics Grid Dashboard preview
statisticsgridmetricsdashboardhover-effectsiconsdark-theme

Statistics Grid Dashboard

Статистическая сетка для дашборда: отображает метрики с иконками и эффектами при наведении. Адаптивный дизайн для демонстрации достижений.

Prompt

<div class="grid grid-cols-2 lg:grid-cols-3 gap-px bg-white/20">
  <div class="bg-black p-6 lg:p-8 flex flex-col justify-end min-h-[120px] hover:bg-white/5 transition-colors group">
    <div class="flex items-center space-x-2 mb-2">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="opacity-60 group-hover:opacity-100 transition-opacity text-white">
        <path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
        <rect width="20" height="14" x="2" y="6" rx="2"></rect>
      </svg>
      <span class="text-3xl lg:text-4xl font-semibold text-white">150+</span>
    </div>
    <span class="text-xs uppercase tracking-wider opacity-70 text-white">Projects Completed</span>
  </div>
  <div class="bg-black p-6 lg:p-8 flex flex-col justify-end min-h-[120px] hover:bg-white/5 transition-colors group">
    <div class="flex items-center space-x-2 mb-2">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="opacity-60 group-hover:opacity-100 transition-opacity text-white">
        <path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526"></path>
        <circle cx="12" cy="8" r="6"></circle>
      </svg>
      <span class="text-3xl lg:text-4xl font-semibold text-white">12</span>
    </div>
    <span class="text-xs uppercase tracking-wider opacity-70 text-white">Design Awards</span>
  </div>
  <div class="bg-black p-6 lg:p-8 flex flex-col justify-end min-h-[120px] hover:bg-white/5 transition-colors group col-span-2 lg:col-span-1">
    <div class="flex items-center space-x-2 mb-2">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="opacity-60 group-hover:opacity-100 transition-opacity text-white">
        <circle cx="12" cy="12" r="10"></circle>
        <polyline points="12 6 12 12 16 14"></polyline>
      </svg>
      <span class="text-3xl lg:text-4xl font-semibold text-white">8+</span>
    </div>
    <span class="text-xs uppercase tracking-wider opacity-70 text-white">Years Experience</span>
  </div>
  <div class="bg-black p-6 lg:p-8 flex flex-col justify-end min-h-[120px] hover:bg-white/5 transition-colors group">
    <div class="flex items-center space-x-2 mb-2">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="opacity-60 group-hover:opacity-100 transition-opacity text-white">
        <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
        <path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
        <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
        <circle cx="9" cy="7" r="4"></circle>
      </svg>
      <span class="text-3xl lg:text-4xl font-semibold text-white">45+</span>
    </div>
    <span class="text-xs uppercase tracking-wider opacity-70 text-white">Happy Clients</span>
  </div>
  <div class="bg-black p-6 lg:p-8 flex flex-col justify-end min-h-[120px] hover:bg-white/5 transition-colors group">
    <div class="flex items-center space-x-2 mb-2">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="opacity-60 group-hover:opacity-100 transition-opacity text-white">
        <circle cx="12" cy="12" r="10"></circle>
        <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path>
        <path d="M2 12h20"></path>
      </svg>
      <span class="text-3xl lg:text-4xl font-semibold text-white">4</span>
    </div>
    <span class="text-xs uppercase tracking-wider opacity-70 text-white">Languages</span>
  </div>
</div>
All Prompts