Accordion

<div className="w-full max-w-md space-y-2 border-b border-border pb-4"><details className="group [&_summary::-webkit-details-marker]:hidden"><summary className="flex cursor-pointer items-center justify-between font-medium py-2"><span>Item 1</span><span className="transition group-open:rotate-180"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M6 9l6 6 6-6"></path></svg></span></summary><p className="text-muted-foreground mt-2">Content for item 1.</p></details></div>

<div className="w-full max-w-md border border-border rounded-lg overflow-hidden"><details className="group [&_summary::-webkit-details-marker]:hidden border-b border-border last:border-0"><summary className="flex cursor-pointer items-center justify-between font-medium p-4 bg-muted/20 hover:bg-muted/50"><span>Item 1</span><span className="transition group-open:rotate-180"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M6 9l6 6 6-6"></path></svg></span></summary><p className="p-4 text-muted-foreground border-t border-border bg-background">Content for item 1.</p></details></div>

<div className="w-full max-w-md space-y-4"><details className="group [&_summary::-webkit-details-marker]:hidden border border-border rounded-lg"><summary className="flex cursor-pointer items-center justify-between font-medium p-4"><span>Item 1</span><span className="transition group-open:rotate-180"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M6 9l6 6 6-6"></path></svg></span></summary><p className="px-4 pb-4 text-muted-foreground">Content for item 1.</p></details></div>

<div className="w-full max-w-md border-b border-border pb-4"><details className="group [&_summary::-webkit-details-marker]:hidden"><summary className="flex cursor-pointer items-center justify-between font-medium py-2"><span>Item 1</span><span className="relative h-5 w-5 shrink-0"><svg className="absolute inset-0 h-5 w-5 opacity-100 group-open:opacity-0 transition-opacity" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 4v16m8-8H4"></path></svg><svg className="absolute inset-0 h-5 w-5 opacity-0 group-open:opacity-100 transition-opacity" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M20 12H4"></path></svg></span></summary><p className="text-muted-foreground mt-2">Content for item 1.</p></details></div>

<div className="w-full max-w-md space-y-2"><details className="group [&_summary::-webkit-details-marker]:hidden rounded-lg bg-primary/5 text-primary"><summary className="flex cursor-pointer items-center justify-between font-medium p-4"><span>Item 1</span><span className="transition group-open:rotate-180"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M6 9l6 6 6-6"></path></svg></span></summary><p className="px-4 pb-4 opacity-80">Colored content for item 1.</p></details></div>