Get started with react-flip-toolkit CDN

import React from 'react';
import Flip from 'react-flip-toolkit';

const MyComponent = () => {
  const [isFlipped, setIsFlipped] = React.useState(false);

  return (
    <Flip leftClassName="leave-active" rightClassName="leave-active">
      <button onClick={() => setIsFlipped(!isFlipped)}>
        Flip me!
      </button>
      <Flip.panel className="flip-panel" flipId="myPanel">
        <div className="front">
          <h1>Front side</h1>
        </div>
        <div className="back">
          <h1>Back side</h1>
        </div>
      </Flip.panel>
      {isFlipped && <Flip.panel className="flip-panel" flipId="myPanel">{/* back side content */}</Flip.panel>}
    </Flip>
  );
};

export default MyComponent;