All Prompts
All Prompts

cardbar chartstatsdashboardwidgettailwindresponsive
Weekly Stats Card with Mini Bar Chart
Карточка с мини-графиком для отображения еженедельной статистики. Идеально для дашбордов, виджетов KPI и аналитики.
Prompt
<!-- This Week bars -->
<div class="rounded-2xl bg-white/[0.04] ring-1 ring-white/10 p-3 w-full max-w-sm">
<div class="flex items-start justify-between">
<div>
<p class="text-xs text-white/60">This Week</p>
<p class="text-sm font-medium">$2300</p>
</div>
<button class="text-white/40 hover:text-white/70">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="more-horizontal" class="lucide lucide-more-horizontal h-4 w-4"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
</button>
</div>
<div class="mt-4 flex h-20 items-end justify-between gap-1.5">
<span class="w-2 rounded bg-gradient-to-t from-cyan-500/50 to-cyan-300/80 h-6"></span>
<span class="w-2 rounded bg-gradient-to-t from-cyan-500/50 to-cyan-300/80 h-10"></span>
<span class="w-2 rounded bg-gradient-to-t from-cyan-500/50 to-cyan-300/80 h-8"></span>
<span class="w-2 rounded bg-gradient-to-t from-cyan-500/50 to-cyan-300/80 h-14"></span>
<span class="w-2 rounded bg-gradient-to-t from-cyan-500/50 to-cyan-300/80 h-20"></span>
<span class="w-2 rounded bg-gradient-to-t from-cyan-500/50 to-cyan-300/80 h-12"></span>
<span class="w-2 rounded bg-gradient-to-t from-cyan-500/50 to-cyan-300/80 h-7"></span>
<span class="w-2 rounded bg-gradient-to-t from-cyan-500/50 to-cyan-300/80 h-8"></span>
<span class="w-2 rounded bg-gradient-to-t from-cyan-500/50 to-cyan-300/80 h-7"></span>
</div>
</div>
</div>