li

List item.

html

<ol class="li-list" style="--accent:#F5C2E0;">
  <li class="li-item">Design the flow</li>
  <li class="li-item">Build the prototype</li>
  <li class="li-item li-item--done">Ship it</li>
</ol>
<style>
.li-list { width: 260px; box-sizing: border-box; font: 14px/1.7 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px 16px 16px 34px; border-radius: 12px; margin: 0; }
.li-item::marker { color: var(--accent); font-weight: 700; }
.li-item--done { text-decoration: line-through; color: #241430888; }
.li-item--done::marker { content: "✓ "; }
</style>

tailwind

<ol class="w-[260px] box-border font-sans text-sm leading-loose text-[#241430] bg-[#FAF7F2] pl-[34px] pr-4 py-4 rounded-xl m-0 marker:font-bold">
  <li class="marker:text-[#F5C2E0]">Design the flow</li>
  <li class="marker:text-[#F5C2E0]">Build the prototype</li>
  <li class="marker:text-[#F5C2E0] line-through text-[#241430]/55">Ship it</li>
</ol>

react

export function LiElement({
  item1 = "Design the flow",
  item2 = "Build the prototype",
  item3 = "Ship it",
  accent = "#F5C2E0",
  markStatus = true,
}) {
  const itemStyle = { "::marker": { color: accent } };
  return (
    <ol style={{ width: 260, boxSizing: "border-box", font: "14px/1.7 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: "16px 16px 16px 34px", borderRadius: 12, margin: 0 }}>
      <li>{item1}</li>
      <li>{item2}</li>
      <li style={markStatus ? { textDecoration: "line-through", color: "#241430888" } : undefined}>{item3}</li>
    </ol>
  );
}