Expandable FAQ Card

1function FaqCard() {
2  const [open, setOpen] = React.useState(true);
3  return (
4    <div style={{width:300,borderRadius:16,border:'1px solid rgba(255,255,255,.1)',background:'rgba(255,255,255,.04)',
5      overflow:'hidden',fontFamily:'system-ui'}}>
6      <button onClick={() => setOpen(!open)} style={{width:'100%',display:'flex',justifyContent:'space-between',
7        alignItems:'center',padding:'16px 18px',background:'none',border:0,color:'#fff',fontSize:15,fontWeight:600,cursor:'pointer'}}>
8        Ist Elementa kostenlos?
9        <span style={{transition:'transform .3s',transform:open?'rotate(45deg)':'none',color:'#a78bfa',fontSize:20}}>+</span>
10      </button>
11      <div style={{maxHeight:open?120:0,transition:'max-height .35s ease',overflow:'hidden'}}>
12        <p style={{margin:0,padding:'0 18px 16px',color:'rgba(255,255,255,.6)',fontSize:14,lineHeight:1.6}}>
13          Ja. Alle Komponenten sind MIT-lizenziert und für private wie kommerzielle Projekte frei nutzbar.
14        </p>
15      </div>
16    </div>
17  );
18}