<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;
}

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);
}

.App {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
const { useEffect, useRef } = React;

function App() {
  const boxRef = useRef();
  
  useEffect(() => {
    gsap.to(boxRef.current, {
      rotation: "+=360"
    });
  });

  return (
    <div className="App">
      <div className="box" ref={boxRef}>Hello</div>
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector("#root"));
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.co/gsap@3/dist/gsap.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js