Collapse

html

<div class="collapse-demo" style="--accent:#BFD9F2;border-radius:10px;">
  <button type="button" class="collapse-demo__head" aria-expanded="false"{{unless collapsed}} aria-expanded="true"

tailwind

<div class="w-[300px]" style="font-family:system-ui,sans-serif;color:#241430;background:#FAF7F2;border:1.5px solid #24143022;border-radius:10px;overflow:hidden">
  <button type="button" class="w-full box-border flex items-center gap-2 px-3.5 py-3 bg-transparent border-0 font-semibold cursor-pointer text-left" aria-expanded="false"{{unless collapsed}} aria-expanded="true"

react

import { useState } from "react";

export function Collapse({
  title = "Advanced options",
  bodyText = "These settings are rarely needed but available if you want them.",
  collapsed: initialCollapsed = true,
  accent = "#BFD9F2",
  radius = 10,
}) {
  const [collapsed, setCollapsed] = useState(initialCollapsed);
  return (
    <div style={{ width: 300, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", background: "#FAF7F2", border: "1.5px solid #24143022", borderRadius: radius, overflow: "hidden" }}>
      <button type="button" onClick={() => setCollapsed((c) => !c)} aria-expanded={!collapsed}
        style={{ width: "100%", boxSizing: "border-box", display: "flex", alignItems: "center", gap: 8, padding: "12px 14px", background: "transparent", border: "none", font: "inherit", fontWeight: 600, cursor: "pointer", textAlign: "left", color: "inherit" }}>
        <span className="collapse-caret" style={{ display: "inline-block", color: accent, transform: collapsed ? "none" : "rotate(90deg)" }}>&#9656;</span>{title}
      </button>
      {!collapsed && <div style={{ padding: "0 14px 14px", fontSize: 13, color: "#241430cc" }}><p style={{ margin: 0 }}>{bodyText}</p></div>}
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .collapse-caret { transition: transform .15s; }
        }
      `}</style>
    </div>
  );
}