ol

Ordered list.

html

<ol class="ol-el" type="1" style="--accent:#241430;">
  <li>Preheat the oven</li>
  <li>Mix the batter</li>
  <li>Bake for 25 minutes</li>
</ol>
<style>
.ol-el { width: 260px; box-sizing: border-box; font: 14px/1.8 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 14px 16px 14px 36px; border-radius: 12px; margin: 0; }
.ol-el::marker { color: var(--accent); }
.ol-el li::marker { color: var(--accent); font-weight: 700; }
</style>

tailwind

<ol type="1" class="w-[260px] box-border font-sans text-sm leading-loose text-[#241430] bg-[#FAF7F2] pl-9 pr-4 py-3.5 rounded-xl m-0 marker:text-[#241430] marker:font-bold">
  <li>Preheat the oven</li>
  <li>Mix the batter</li>
  <li>Bake for 25 minutes</li>
</ol>

react

export function OlElement({
  item1 = "Preheat the oven",
  item2 = "Mix the batter",
  item3 = "Bake for 25 minutes",
  type = "1",
  accent = "#241430",
  reversed = false,
}) {
  return (
    <ol type={type} reversed={reversed}
      style={{ width: 260, boxSizing: "border-box", font: "14px/1.8 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: "14px 16px 14px 36px", borderRadius: 12, margin: 0 }}>
      <li style={{ color: accent, fontWeight: 700 }}>{item1}</li>
      <li>{item2}</li>
      <li>{item3}</li>
    </ol>
  );
}