ul

Unordered list.

html

<ul class="ul-el ul-el--check" style="--accent:#A8E6C1;">
  <li>Unlimited projects</li>
  <li>Priority support</li>
  <li>Custom domains</li>
</ul>
<style>
.ul-el { width: 260px; box-sizing: border-box; font: 14px/1.7 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 14px 16px 14px 20px; border-radius: 12px; margin: 0; list-style: none; }
.ul-el--disc { list-style: disc; padding-left: 34px; }
.ul-el--disc li::marker { color: var(--accent); }
.ul-el--none li { padding-left: 0; }
.ul-el--check li { padding-left: 26px; position: relative; }
.ul-el--check li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 800; }
</style>

tailwind

<ul class="ul-tw ul-tw--check w-[260px] box-border font-sans text-sm leading-loose text-[#241430] bg-[#FAF7F2] py-3.5 pr-4 pl-5 rounded-xl m-0 list-none">
  <li>Unlimited projects</li>
  <li>Priority support</li>
  <li>Custom domains</li>
</ul>
<style>
.ul-tw--disc { list-style: disc; padding-left: 34px; }
.ul-tw--disc li::marker { color: #A8E6C1; }
.ul-tw--none li { padding-left: 0; }
.ul-tw--check li { padding-left: 26px; position: relative; }
.ul-tw--check li::before { content: "✓"; position: absolute; left: 0; color: #A8E6C1; font-weight: 800; }
</style>

react

export function UlElement({
  item1 = "Unlimited projects",
  item2 = "Priority support",
  item3 = "Custom domains",
  marker = "check",
  accent = "#A8E6C1",
}) {
  const itemStyle = marker === "check"
    ? { paddingLeft: 26, position: "relative", listStyle: "none" }
    : marker === "disc"
    ? { listStyle: "disc" }
    : { listStyle: "none", paddingLeft: 0 };
  const items = [item1, item2, item3];
  return (
    <ul style={{ width: 260, boxSizing: "border-box", font: "14px/1.7 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: "14px 16px 14px 20px", borderRadius: 12, margin: 0, listStyle: "none" }}>
      {items.map((item) => (
        <li key={item} style={itemStyle}>
          {marker === "check" && <span style={{ position: "absolute", left: 0, color: accent, fontWeight: 800 }}>✓</span>}
          {item}
        </li>
      ))}
    </ul>
  );
}