Accordion

Expandable/collapsible sections.

html

<details class="accordion accordion--bordered" style="--accent:#A8E6C1;border-radius:10px;" open>
  <summary class="accordion__summary">Shipping &amp; returns</summary>
  <div class="accordion__panel">
    <p>Everything in Standard, plus priority support, unlimited seats and early access to new specimens.</p>
  </div>
</details>
<style>
.accordion { font: 16px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; overflow: hidden; }
.accordion--bordered { border: 1.5px solid #24143030; }
.accordion--boxed { box-shadow: 0 8px 24px rgba(36,20,48,.14); }
.accordion__summary { list-style: none; cursor: pointer; padding: 14px 18px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary::after { content: "+"; color: var(--accent); font-size: 20px; }
.accordion[open] .accordion__summary::after { content: "–"; }
.accordion__summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.accordion__panel { padding: 0 18px 16px; font-size: 14px; color: #241430cc; }
</style>

tailwind

<details open class="accordion-tw accordion-tw--bordered bg-[#FAF7F2] text-[#241430] font-sans overflow-hidden border-[1.5px] border-[#24143030]" style="border-radius:10px;">
  <summary class="list-none cursor-pointer px-[18px] py-3.5 font-semibold flex items-center justify-between marker:hidden">
    Shipping &amp; returns
    <span aria-hidden="true" style="color:#A8E6C1">+</span>
  </summary>
  <div class="px-[18px] pb-4 text-sm text-[#241430]/80">
    <p>Everything in Standard, plus priority support, unlimited seats and early access to new specimens.</p>
  </div>
</details>
<style>
.accordion-tw--boxed { box-shadow: 0 8px 24px rgba(36,20,48,.14); border: none !important; }
.accordion-tw--flat { border: none !important; }
</style>

react

import { useState } from "react";

export function Accordion({
  title = "Shipping & returns",
  variant = "bordered",
  accent = "#A8E6C1",
  radius = 10,
  open: initialOpen = true,
}) {
  const [open, setOpen] = useState(initialOpen);
  const wrap = {
    bordered: { border: "1.5px solid #24143030" },
    boxed: { boxShadow: "0 8px 24px rgba(36,20,48,.14)" },
    flat: {},
  }[variant] ?? {};
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 16, lineHeight: 1.5, color: "#241430",
      background: "#FAF7F2", borderRadius: radius, overflow: "hidden", ...wrap }}>
      <button type="button" onClick={() => setOpen((o) => !o)} style={{
        width: "100%", textAlign: "left", background: "none", border: "none", cursor: "pointer",
        padding: "14px 18px", fontWeight: 600, display: "flex", alignItems: "center",
        justifyContent: "space-between", color: "inherit", font: "inherit" }}>
        {title}
        <span aria-hidden="true" style={{ color: accent }}>{open ? "–" : "+"}</span>
      </button>
      {open && (
        <div style={{ padding: "0 18px 16px", fontSize: 14, color: "#241430cc" }}>
          <p>Everything in Standard, plus priority support, unlimited seats and early access to new specimens.</p>
        </div>
      )}
    </div>
  );
}