VibeCoderzVibeCoderz
Telegram
All Prompts
Dark Analytics Widget Card with SVG Growth Chart preview
cardanalyticsdashboardtailwindchartresponsivewidgetdark

Dark Analytics Widget Card with SVG Growth Chart

Темная карточка виджета аналитики с SVG-графиком роста. Идеальна для дашбордов, SaaS-лендингов для быстрой визуализации данных.

Prompt

<div class="relative overflow-hidden bg-black/40 border-white/10 border rounded-2xl px-6 py-6">
      <div class="absolute inset-0 pointer-events-none" style="background:
          radial-gradient(220px 160px at 8% 100%, rgba(139,92,246,0.25), transparent 60%),
          radial-gradient(260px 180px at 100% 0%, rgba(59,130,246,0.10), transparent 70%),
          linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00))"></div>
      <h3 class="text-xl sm:text-2xl lg:text-3xl tracking-tight" style="font-weight: 600">Business Data Solutions</h3>
      <p class="mt-2 text-sm sm:text-base text-gray-300">Your data‑driven guide to making informed business decisions.</p>

      <div class="mt-6 relative">
        <div class="rounded-xl bg-white/5 border border-white/10 p-4">
          <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-3">
            <p class="text-sm font-medium">See Growth</p>
            <div class="flex items-center gap-2">
              <span class="text-[11px] px-2 py-1 rounded bg-black/40 border border-white/10">Monthly Visits</span>
              <span class="text-[11px] px-2 py-1 rounded bg-black/40 border border-white/10">Last 24hrs</span>
            </div>
          </div>
          <div class="mt-3 h-28 rounded-lg bg-gradient-to-b from-gray-900/60 to-transparent border border-white/10 overflow-hidden">
            <svg viewBox="0 0 400 112" class="w-full h-full">
              <defs class="">
                
              </defs>
              <path d="M0 90 C70 40, 140 100, 200 55 S330 90, 400 65" stroke="#34d399" stroke-width="2" fill="url(#growthGrad)" class=""></path>
            </svg>
          </div>
          <div class="mt-3 inline-flex items-center gap-2 px-2.5 py-1.5 rounded-md bg-black/40 border border-white/10">
            <span class="inline-flex h-6 w-6 items-center justify-center rounded bg-blue-500/20 ring-1 ring-white/10 flex-shrink-0">
              <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="layers" class="lucide lucide-layers w-3.5 h-3.5"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" class=""></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" class=""></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" class=""></path></svg>
            </span>
            <span class="text-xs font-medium">LanderX</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="badge-check" class="lucide lucide-badge-check w-3.5 h-3.5 text-yellow-300 flex-shrink-0"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" class=""></path><path d="m9 12 2 2 4-4" class=""></path></svg>
          </div>
        </div>

        <!-- Floating checklist -->
        <div class="mt-6 lg:absolute lg:right-0 lg:bottom-0 lg:translate-x-0 lg:translate-y-6 lg:mt-0 rounded-xl bg-black/60 backdrop-blur border border-white/10 p-4 w-full lg:w-80">
          <div class="flex items-center justify-between mb-3">
            <p class="text-sm font-medium">See Growth</p>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-down" class="lucide lucide-chevron-down w-4 h-4 text-gray-400 flex-shrink-0"><path d="m6 9 6 6 6-6" class=""></path></svg>
          </div>
          <ul class="space-y-2 text-sm text-gray-300">
            <li class="flex items-center gap-2">
              <span class="inline-flex h-4 w-4 items-center justify-center rounded-[4px] bg-blue-500/20 border border-blue-300/40 flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-2.5 h-2.5 text-blue-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
              </span>
              100% score anytime
            </li>
            <li class="flex items-center gap-2">
              <span class="inline-flex h-4 w-4 items-center justify-center rounded-[4px] bg-blue-500/20 border border-blue-300/40 flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-2.5 h-2.5 text-blue-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
              </span>
              Watch Stats &amp; Growth like master
            </li>
            <li class="flex items-center gap-2">
              <span class="inline-flex h-4 w-4 items-center justify-center rounded-[4px] bg-blue-500/20 border border-blue-300/40 flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-2.5 h-2.5 text-blue-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
              </span>
              Start Growing Now
            </li>
          </ul>
        </div>
      </div>
    </div>
All Prompts