All Prompts
All Prompts

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&fit=crop&w=120&h=120&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>