<div id="root"></div>

@import url("https://fonts.googleapis.com/css2?family=Signika+Negative:wght@400;600&display=swap");

:root {
	--dark: #1d1d1d;
	--light: #fff;
	--green: #28a92b;
  --purple: #8d3dae;
}

body {
	background-color: var(--dark);
	color: var(--light);
	font-family: "Signika Negative", sans-serif;
	margin: 0;
  padding: 0;
  height: 100vh;
}

.box {
	width: 100px;
	height: 100px;
  border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: var(--green);
	font-weight: 600;
	color: var(--light);
}

.circle {
	width: 100px;
	height: 100px;
  border-radius: 99%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: var(--purple);
	font-weight: 600;
	color: var(--light);
}

.App {
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-height: 100vh;
}

const { useRef, useLayoutEffect } = React;

function App() {
  const container = useRef();
  const circle = useRef();
  
  useLayoutEffect(() => {
    let ctx = gsap.context(() => {
      // all your animations go in here...
      gsap.to(".box", { rotation: "+=360" });
    }, container); // <- scopes all selector text to the container element

    return () => ctx.revert();
  }, []);

  return (
    <div ref={container} className="App">
      <div className="box">selector</div>
      <div className="circle" ref={circle}>Ref</div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);