Flip Card

1function FlipCard() {
2  const [f, setF] = React.useState(false);
3  const face = {position:'absolute',inset:0,borderRadius:20,backfaceVisibility:'hidden',display:'flex',
4    flexDirection:'column',alignItems:'center',justifyContent:'center',padding:24,fontFamily:'system-ui'};
5  return (
6    <div onClick={() => setF(!f)} style={{width:260,height:170,cursor:'pointer',perspective:1000}}>
7      <div style={{position:'relative',width:'100%',height:'100%',transition:'transform .6s',transformStyle:'preserve-3d',
8        transform: f ? 'rotateY(180deg)' : 'none'}}>
9        <div style={{...face,background:'linear-gradient(135deg,#8b5cf6,#06b6d4)',color:'#fff'}}>
10          <span style={{fontSize:26,fontWeight:700}}>Elementa</span>
11          <span style={{opacity:.8,fontSize:13,marginTop:6}}>Zum Umdrehen klicken</span>
12        </div>
13        <div style={{...face,background:'#12121c',border:'1px solid rgba(255,255,255,.1)',color:'#fff',transform:'rotateY(180deg)'}}>
14          <span style={{fontSize:15,color:'rgba(255,255,255,.7)',textAlign:'center',lineHeight:1.6}}>Framework-übergreifende UI-Komponenten zum Kopieren.</span>
15        </div>
16      </div>
17    </div>
18  );
19}