Columns containing movable cards.
<div class="kanban" style="--accent:#BFD9F2;">
<div class="kanban__col">
<h3 class="kanban__heading">To do</h3>
<ul class="kanban__list">
<li class="kanban__card">Design onboarding flow<span class="kanban__tag">UX</span></li>
<li class="kanban__card">Write Q3 report<span class="kanban__tag">Docs</span></li>
</ul>
</div>
<div class="kanban__col">
<h3 class="kanban__heading">In progress</h3>
<ul class="kanban__list">
<li class="kanban__card">Refactor auth module<span class="kanban__tag">Eng</span></li>
<li class="kanban__card">Update pricing copy<span class="kanban__tag">Marketing</span></li>
</ul>
</div>
<div class="kanban__col">
<h3 class="kanban__heading">Done</h3>
<ul class="kanban__list">
<li class="kanban__card">Ship landing page<span class="kanban__tag">Eng</span></li>
<li class="kanban__card">Customer interview notes<span class="kanban__tag">Research</span></li>
</ul>
</div>
</div>
<style>
.kanban { display: flex; gap: 16px; font: 16px/1.5 system-ui, sans-serif; color: #241430; align-items: flex-start; }
.kanban__col { background: #FAF7F2; border-radius: 12px; padding: 14px; width: 200px; box-sizing: border-box; box-shadow: 0 4px 14px rgba(36,20,48,.1); }
.kanban__heading { margin: 0 0 10px; font-size: 14px; font-weight: 700; border-bottom: 3px solid var(--accent); padding-bottom: 8px; }
.kanban__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.kanban__card { background: #fff; border: 1px solid #24143020; border-radius: 8px; padding: 12px; font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.kanban__tag { align-self: flex-start; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #241430; }
.kanban__empty { margin: 0; padding: 20px 8px; text-align: center; font-size: 12.5px; color: #241430aa; border: 1.5px dashed #24143033; border-radius: 8px; }
</style><div class="flex gap-4 font-sans text-[#241430] items-start" style="--accent:#BFD9F2">
<div class="kanban-tw__col bg-[#FAF7F2] rounded-xl p-3.5 w-[200px] box-border shadow-[0_4px_14px_rgba(36,20,48,.1)]">
<h3 class="m-0 mb-2.5 text-sm font-bold pb-2 border-b-[3px]" style="border-color:#BFD9F2">To do</h3>
<ul class="list-none m-0 p-0 flex flex-col gap-2.5">
<li class="bg-white border border-[#24143020] rounded-lg p-3 text-[13px] flex flex-col gap-1.5">Design onboarding flow<span class="self-start text-[11px] font-semibold px-2 py-0.5 rounded-full text-[#241430]" style="background:#BFD9F2">UX</span></li>
<li class="bg-white border border-[#24143020] rounded-lg p-3 text-[13px] flex flex-col gap-1.5">Write Q3 report<span class="self-start text-[11px] font-semibold px-2 py-0.5 rounded-full text-[#241430]" style="background:#BFD9F2">Docs</span></li>
</ul>
</div>
<div class="kanban-tw__col bg-[#FAF7F2] rounded-xl p-3.5 w-[200px] box-border shadow-[0_4px_14px_rgba(36,20,48,.1)]">
<h3 class="m-0 mb-2.5 text-sm font-bold pb-2 border-b-[3px]" style="border-color:#BFD9F2">In progress</h3>
<ul class="list-none m-0 p-0 flex flex-col gap-2.5">
<li class="bg-white border border-[#24143020] rounded-lg p-3 text-[13px] flex flex-col gap-1.5">Refactor auth module<span class="self-start text-[11px] font-semibold px-2 py-0.5 rounded-full text-[#241430]" style="background:#BFD9F2">Eng</span></li>
<li class="bg-white border border-[#24143020] rounded-lg p-3 text-[13px] flex flex-col gap-1.5">Update pricing copy<span class="self-start text-[11px] font-semibold px-2 py-0.5 rounded-full text-[#241430]" style="background:#BFD9F2">Marketing</span></li>
</ul>
</div>
<div class="kanban-tw__col bg-[#FAF7F2] rounded-xl p-3.5 w-[200px] box-border shadow-[0_4px_14px_rgba(36,20,48,.1)]">
<h3 class="m-0 mb-2.5 text-sm font-bold pb-2 border-b-[3px]" style="border-color:#BFD9F2">Done</h3>
<ul class="list-none m-0 p-0 flex flex-col gap-2.5">
<li class="bg-white border border-[#24143020] rounded-lg p-3 text-[13px] flex flex-col gap-1.5">Ship landing page<span class="self-start text-[11px] font-semibold px-2 py-0.5 rounded-full text-[#241430]" style="background:#BFD9F2">Eng</span></li>
<li class="bg-white border border-[#24143020] rounded-lg p-3 text-[13px] flex flex-col gap-1.5">Customer interview notes<span class="self-start text-[11px] font-semibold px-2 py-0.5 rounded-full text-[#241430]" style="background:#BFD9F2">Research</span></li>
</ul>
</div>
</div>export function KanbanBoard({
title1 = "To do",
title2 = "In progress",
title3 = "Done",
thirdColumn = true,
emptyMiddle = false,
accent = "#BFD9F2",
}) {
const colStyle = { background: "#FAF7F2", borderRadius: 12, padding: 14, width: 200, boxSizing: "border-box", boxShadow: "0 4px 14px rgba(36,20,48,.1)" };
const headingStyle = { margin: "0 0 10px", fontSize: 14, fontWeight: 700, borderBottom: `3px solid ${accent}`, paddingBottom: 8 };
const listStyle = { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 10 };
const cardStyle = { background: "#fff", border: "1px solid #24143020", borderRadius: 8, padding: 12, fontSize: 13, display: "flex", flexDirection: "column", gap: 6 };
const tagStyle = { alignSelf: "flex-start", fontSize: 11, fontWeight: 600, padding: "2px 8px", borderRadius: 999, background: accent, color: "#241430" };
return (
<div style={{ display: "flex", gap: 16, fontFamily: "system-ui, sans-serif", color: "#241430", alignItems: "flex-start" }}>
<div style={colStyle}>
<h3 style={headingStyle}>{title1}</h3>
<ul style={listStyle}>
<li style={cardStyle}>Design onboarding flow<span style={tagStyle}>UX</span></li>
<li style={cardStyle}>Write Q3 report<span style={tagStyle}>Docs</span></li>
</ul>
</div>
<div style={colStyle}>
<h3 style={headingStyle}>{title2}</h3>
{emptyMiddle ? (
<p style={{ margin: 0, padding: "20px 8px", textAlign: "center", fontSize: 12.5, color: "#241430aa", border: "1.5px dashed #24143033", borderRadius: 8 }}>No cards yet</p>
) : (
<ul style={listStyle}>
<li style={cardStyle}>Refactor auth module<span style={tagStyle}>Eng</span></li>
<li style={cardStyle}>Update pricing copy<span style={tagStyle}>Marketing</span></li>
</ul>
)}
</div>
{thirdColumn && (
<div style={colStyle}>
<h3 style={headingStyle}>{title3}</h3>
<ul style={listStyle}>
<li style={cardStyle}>Ship landing page<span style={tagStyle}>Eng</span></li>
<li style={cardStyle}>Customer interview notes<span style={tagStyle}>Research</span></li>
</ul>
</div>
)}
</div>
);
}