VibeCoderzVibeCoderz
Telegram
All Prompts
Project Summary Card with Progress and Actions preview
carddashboardprojectprofileprogresstailwindresponsive

Project Summary Card with Progress and Actions

Карточка сводки проекта: информация о владельце, название, прогресс, уведомления, опции. UI-компонент для дашбордов.

Prompt

<div class="flex flex-col bg-[#d6f14a] rounded-3xl pt-5 pr-5 pb-5 pl-5">
      <div class="flex items-start justify-between mb-4">
        <div class="flex items-center gap-3">
          <img src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&amp;fit=crop&amp;w=120&amp;h=120&amp;q=80" alt="Project owner" class="w-9 h-9 object-cover rounded-full">
          <div class="">
            <p class="text-xs text-slate-800">Project owner</p>
            <p class="text-sm font-medium text-slate-900 tracking-tight">Ariana Woods</p>
          </div>
        </div>
        <div class="flex items-center gap-2">
          <button class="w-7 h-7 rounded-full bg-slate-900/5 flex items-center justify-center text-slate-800 hover:bg-slate-900/10 transition">
            <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="bell" class="lucide lucide-bell w-3.5 h-3.5"><path d="M10.268 21a2 2 0 0 0 3.464 0" class=""></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" class=""></path></svg>
          </button>
          <button class="w-7 h-7 rounded-full bg-slate-900/5 flex items-center justify-center text-slate-800 hover:bg-slate-900/10 transition">
            <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 w-3.5 h-3.5"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="19" cy="12" r="1" class=""></circle><circle cx="5" cy="12" r="1" class=""></circle></svg>
          </button>
        </div>
      </div>

      <div class="">
        <h3 class="text-lg tracking-tight font-semibold text-slate-900">NovaSprint Launch</h3>
        <p class="text-xs text-slate-800 mt-1">Industry: EdTech</p>
      </div>

      <div class="mt-4">
        <div class="flex items-center justify-between text-[11px] text-slate-800 mb-1">
          <span class="">Project progress</span>
          <span class="font-medium">61%</span>
        </div>
        <div class="h-1.5 rounded-full bg-slate-900/10 overflow-hidden">
          <div class="h-full w-[61%] bg-slate-900"></div>
        </div>
      </div>

      <div class="mt-4 flex items-center justify-between gap-3">
        <button class="flex-1 inline-flex items-center justify-between rounded-full bg-slate-900/5 px-3 py-1.5 text-[11px] font-medium text-slate-900">
          <span class="flex items-center gap-1.5">
            <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="file-text" class="lucide lucide-file-text w-3.5 h-3.5"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" class=""></path><path d="M14 2v5a1 1 0 0 0 1 1h5" class=""></path><path d="M10 9H8" class=""></path><path d="M16 13H8" class=""></path><path d="M16 17H8" class=""></path></svg>
            Weekly report
          </span>
          <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="chevron-down" class="lucide lucide-chevron-down w-3.5 h-3.5"><path d="m6 9 6 6 6-6" class=""></path></svg>
        </button>
        <button class="w-9 h-9 rounded-full bg-slate-900 text-[#d6f14a] flex items-center justify-center hover:bg-slate-800 transition">
          <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="send" class="lucide lucide-send w-4 h-4"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" class=""></path><path d="m21.854 2.147-10.94 10.939" class=""></path></svg>
        </button>
      </div>
    </div>
All Prompts