Загрузка...

Карточка с AI-саммари и действиями в темной теме. UI-компонент для дашбордов, показывает итоги встреч, задачи и кнопки. Tailwind CSS, адаптивный дизайн.
<div class="relative ring-1 ring-white/10 bg-neutral-900/40 border-neutral-800/70 border rounded-3xl shadow-2xl backdrop-blur max-w-xl flex flex-col">
<div class="relative sm:p-6 lg:p-8 flex-1 flex flex-col pt-5 pr-5 pb-5 pl-5">
<div class="flex items-center gap-2">
<span class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-violet-500/20 ring-1 ring-violet-500/30">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="circuit-board" class="lucide lucide-circuit-board w-[15px] h-[15px]" data-icon-replaced="true" style="width: 15px; height: 15px; color: rgb(196, 181, 253);"><rect width="18" height="18" x="3" y="3" rx="2" class=""></rect><path d="M11 9h4a2 2 0 0 0 2-2V3" class=""></path><circle cx="9" cy="9" r="2" class=""></circle><path d="M7 21v-4a2 2 0 0 1 2-2h4" class=""></path><circle cx="15" cy="15" r="2" class=""></circle></svg>
</span>
<h3 class="text-xl tracking-tight font-semibold text-white font-sans" style="">AI recaps & actions</h3>
</div>
<div class="mt-4 rounded-2xl border border-neutral-800/80 bg-neutral-900/70 p-4 space-y-3">
<div class="flex items-center gap-2 text-neutral-300">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-neutral-400"><path d="M3 5h18" class=""></path><path d="M3 10h18" class=""></path><path d="M3 15h18" class=""></path><path d="M3 20h18" class=""></path></svg>
<span class="text-sm font-sans" style="">Key decisions</span>
</div>
<div class="text-sm text-neutral-300 font-sans" style="">
• Launch copy approved • Add pricing screenshot • QA after embedding assets
</div>
<div class="flex gap-2 mt-1">
<button class="inline-flex items-center gap-1.5 rounded-lg bg-white text-neutral-900 px-3 py-1.5 text-xs font-medium hover:bg-neutral-100 font-sans" style="">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="play" class="lucide lucide-play w-[14px] h-[14px]" data-icon-replaced="true" style="width: 14px; height: 14px; color: rgb(23, 23, 23);"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" class=""></path></svg>
Summarize
</button>
<button class="inline-flex items-center gap-1.5 rounded-lg border border-neutral-800 bg-neutral-900/60 px-3 py-1.5 text-xs text-neutral-200 hover:bg-neutral-900 font-sans" style="">
Create tasks
</button>
</div>
</div>
<div class="mt-4 rounded-2xl border border-neutral-800/80 bg-neutral-900/70 p-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="inline-flex h-6 w-6 items-center justify-center rounded-md bg-emerald-500/15 ring-1 ring-emerald-500/30">
<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="message-circle" class="lucide lucide-message-circle w-[13px] h-[13px]" data-icon-replaced="true" style="width: 13px; height: 13px; color: rgb(110, 231, 183);"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719" class=""></path></svg>
</span>
<p class="text-sm text-white font-sans" style="">Auto follow-ups</p>
</div>
<span class="text-[11px] text-neutral-400 font-sans" style="">Smart reminders</span>
</div>
</div>
</div>
</div>