Create, Read, Update, Delete.
<section class="crud" data-mode="edit" style="--accent:#A8E6C1;" aria-label="Customers">
<h3 class="crud__heading">Customers</h3>
<div class="crud__layout">
<ul class="crud__list" aria-label="Records">
<li aria-current="true">Jordan Blake</li>
<li>Priya Nair</li>
<li>Sam Okoro</li>
</ul>
<form class="crud__form" aria-label="Record details">
<label class="crud__field">Name<input type="text" value="Jordan Blake"></label>
<label class="crud__field">Email<input type="text" value="jordan@example.com"></label>
<div class="crud__actions">
<button type="submit" class="crud__save">Save</button>
<button type="button" class="crud__delete">Delete</button>
</div>
</form>
</div>
</section>
<style>
.crud { font: 13.5px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 420px; width: 420px; padding: 16px; border-radius: 12px; box-sizing: border-box; }
.crud__heading { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.crud__layout { display: flex; gap: 12px; }
.crud__list { list-style: none; margin: 0; padding: 0; flex: 0 0 120px; }
.crud__list li { padding: 7px 8px; border-radius: 6px; }
.crud__list li[aria-current="true"] { background: var(--accent); font-weight: 700; }
.crud__form { flex: 1; background: #fff; border-radius: 8px; padding: 12px; }
.crud__field { display: block; font-size: 11px; font-weight: 600; color: #241430a0; margin-bottom: 8px; }
.crud__field input { display: block; width: 100%; box-sizing: border-box; margin-top: 3px; padding: 6px 8px; border: 1px solid #24143030; border-radius: 6px; font: inherit; color: #241430; }
.crud__actions { display: flex; gap: 8px; margin-top: 6px; }
.crud__save { background: var(--accent); border: none; border-radius: 6px; padding: 6px 12px; font: inherit; font-weight: 700; cursor: pointer; }
.crud__delete { background: transparent; border: 1.5px solid #B3261E; color: #B3261E; border-radius: 6px; padding: 6px 12px; font: inherit; font-weight: 700; cursor: pointer; }
.crud[data-mode="list"] .crud__form { display: none; }
.crud[data-mode="create"] .crud__delete { display: none; }
.crud[data-mode="create"] .crud__list li[aria-current] { background: transparent; font-weight: 400; }
</style><section class="crud-tw font-sans text-[13.5px] text-[#241430] bg-[#FAF7F2] max-w-[420px] w-[420px] p-4 rounded-xl box-border" data-mode="edit" style="--accent:#A8E6C1" aria-label="Customers">
<h3 class="m-0 mb-2.5 text-[15px] font-bold">Customers</h3>
<div class="flex gap-3">
<ul aria-label="Records" class="crud-tw__list list-none m-0 p-0 flex-none w-[120px]">
<li aria-current="true" class="crud-tw__current py-1.5 px-2 rounded-md font-bold" style="background:#A8E6C1">Jordan Blake</li>
<li class="py-1.5 px-2 rounded-md">Priya Nair</li>
<li class="py-1.5 px-2 rounded-md">Sam Okoro</li>
</ul>
<form aria-label="Record details" class="crud-tw__form flex-1 bg-white rounded-lg p-3">
<label class="block text-[11px] font-semibold text-[#241430a0] mb-2">Name<input type="text" value="Jordan Blake" class="block w-full box-border mt-1 py-1.5 px-2 rounded-md border border-[#24143030] text-[#241430] font-sans"></label>
<label class="block text-[11px] font-semibold text-[#241430a0] mb-2">Email<input type="text" value="jordan@example.com" class="block w-full box-border mt-1 py-1.5 px-2 rounded-md border border-[#24143030] text-[#241430] font-sans"></label>
<div class="flex gap-2 mt-1.5">
<button type="submit" class="rounded-md py-1.5 px-3 font-bold border-0 cursor-pointer" style="background:#A8E6C1">Save</button>
<button type="button" class="crud-tw__delete rounded-md py-1.5 px-3 font-bold cursor-pointer bg-transparent border-[1.5px] border-[#B3261E] text-[#B3261E]">Delete</button>
</div>
</form>
</div>
</section>
<style>
.crud-tw[data-mode="list"] .crud-tw__form { display: none; }
.crud-tw[data-mode="create"] .crud-tw__delete { display: none; }
.crud-tw[data-mode="create"] .crud-tw__current { background: transparent !important; font-weight: 400; }
</style>export function Crud({
heading = "Customers",
mode = "edit",
accent = "#A8E6C1",
showDelete = true,
recordName = "Jordan Blake",
}) {
const current = mode !== "create";
return (
<section aria-label={heading} style={{ fontFamily: "system-ui, sans-serif", fontSize: 13.5, color: "#241430", background: "#FAF7F2", maxWidth: 420, width: 420, padding: 16, borderRadius: 12, boxSizing: "border-box" }}>
<h3 style={{ margin: "0 0 10px", fontSize: 15, fontWeight: 700 }}>{heading}</h3>
<div style={{ display: "flex", gap: 12 }}>
<ul aria-label="Records" style={{ listStyle: "none", margin: 0, padding: 0, flex: "0 0 120px" }}>
<li aria-current={current ? "true" : undefined} style={{ padding: "7px 8px", borderRadius: 6, background: current ? accent : "transparent", fontWeight: current ? 700 : 400 }}>{recordName}</li>
<li style={{ padding: "7px 8px", borderRadius: 6 }}>Priya Nair</li>
<li style={{ padding: "7px 8px", borderRadius: 6 }}>Sam Okoro</li>
</ul>
{mode !== "list" && (
<form aria-label="Record details" style={{ flex: 1, background: "#fff", borderRadius: 8, padding: 12 }}>
<label style={{ display: "block", fontSize: 11, fontWeight: 600, color: "#241430a0", marginBottom: 8 }}>Name
<input type="text" defaultValue={recordName} style={{ display: "block", width: "100%", boxSizing: "border-box", marginTop: 3, padding: "6px 8px", border: "1px solid #24143030", borderRadius: 6, font: "inherit", color: "#241430" }} />
</label>
<label style={{ display: "block", fontSize: 11, fontWeight: 600, color: "#241430a0", marginBottom: 8 }}>Email
<input type="text" defaultValue="jordan@example.com" style={{ display: "block", width: "100%", boxSizing: "border-box", marginTop: 3, padding: "6px 8px", border: "1px solid #24143030", borderRadius: 6, font: "inherit", color: "#241430" }} />
</label>
<div style={{ display: "flex", gap: 8, marginTop: 6 }}>
<button type="submit" style={{ background: accent, border: "none", borderRadius: 6, padding: "6px 12px", font: "inherit", fontWeight: 700, cursor: "pointer" }}>Save</button>
{showDelete && mode !== "create" && (
<button type="button" style={{ background: "transparent", border: "1.5px solid #B3261E", color: "#B3261E", borderRadius: 6, padding: "6px 12px", font: "inherit", fontWeight: 700, cursor: "pointer" }}>Delete</button>
)}
</div>
</form>
)}
</div>
</section>
);
}