VibeCoderzVibeCoderz
Telegram
All Prompts
Weekly Stats Card with Mini Bar Chart preview
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>
All Prompts