Expandable Card

Card can reveal more information.

html

<details class="expcard" style="--c:#F5C2E0;" >
  <summary class="expcard__summary">
    <span>
      <strong class="expcard__title">What&#39;s included</strong>
      <span class="expcard__meta">3 items in this plan</span>
    </span>
    <svg class="expcard__chevron" viewBox="0 0 12 12" width="12" height="12" aria-hidden="true"><path d="M2 4l4 4 4-4"/></svg>
  </summary>
  <p class="expcard__details">Unlimited projects, priority support, and audit logs.</p>
</details>
<style>
.expcard { font: 14px system-ui, sans-serif; color: #241430; border: 1.5px solid var(--c); border-radius: 10px; padding: 12px 14px; max-width: 300px; }
.expcard__summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; }
.expcard__summary::-webkit-details-marker { display: none; }
.expcard__summary:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.expcard__title { display: block; }
.expcard__meta { display: block; font-size: 12px; opacity: .65; }
.expcard__chevron { fill: none; stroke: #241430; stroke-width: 1.6; flex: none; }
@media (prefers-reduced-motion: no-preference) {
.expcard__chevron { transition: transform .15s; }
}
.expcard[open] .expcard__chevron { transform: rotate(180deg); }
.expcard__details { margin: 10px 0 0; font-size: 13px; opacity: .85; }
</style>

tailwind

<details class="expcard-tw font-sans text-[14px] text-[#241430] border-[1.5px] rounded-[10px] px-3.5 py-3 max-w-xs" style="border-color:#F5C2E0;" >
  <summary class="expcard-tw__summary flex justify-between items-center cursor-pointer list-none">
    <span>
      <strong class="block">What&#39;s included</strong>
      <span class="block text-xs opacity-65">3 items in this plan</span>
    </span>
    <svg class="expcard-tw__chevron flex-none motion-safe:transition-transform" viewBox="0 0 12 12" width="12" height="12" aria-hidden="true" fill="none" stroke="#241430" stroke-width="1.6"><path d="M2 4l4 4 4-4"/></svg>
  </summary>
  <p class="mt-2.5 mb-0 text-[13px] opacity-85">Unlimited projects, priority support, and audit logs.</p>
</details>
<style>
.expcard-tw[open] .expcard-tw__chevron { transform: rotate(180deg); }
</style>

react

export function ExpandableCard({
  title = "What's included",
  summary = "3 items in this plan",
  details = "Unlimited projects, priority support, and audit logs.",
  expanded = false,
  color = "#F5C2E0",
}) {
  return (
    <details open={expanded} style={{ font: "14px system-ui, sans-serif", color: "#241430", border: "1.5px solid " + color, borderRadius: 10, padding: "12px 14px", maxWidth: 300 }}>
      <summary style={{ display: "flex", justifyContent: "space-between", alignItems: "center", cursor: "pointer", listStyle: "none" }}>
        <span>
          <strong style={{ display: "block" }}>{title}</strong>
          <span style={{ display: "block", fontSize: 12, opacity: 0.65 }}>{summary}</span>
        </span>
        <svg viewBox="0 0 12 12" width="12" height="12" aria-hidden="true" style={{ flex: "none", transform: expanded ? "rotate(180deg)" : "none" }}>
          <path d="M2 4l4 4 4-4" fill="none" stroke="#241430" strokeWidth="1.6" />
        </svg>
      </summary>
      <p style={{ margin: "10px 0 0", fontSize: 13, opacity: 0.85 }}>{details}</p>
    </details>
  );
}