All Prompts
All Prompts

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>