JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app"></div>

CSS

ul li {
    list-style: none;
    float: left;
    font-size:60px;
    color: black;

    transition: 2.9s;
}

li.hover {
    transform: rotateY(360deg);
}

React

function ALi(props) {
	const handleMouseEnter = (e) => {
  	e.target.classList.add("hover");
  }
	const handleTransitionEnd = (e) => {
  	e.target.classList.remove("hover");
  }
	
	return (
  	<li
      onMouseEnter={handleMouseEnter}
      onTransitionEnd={handleTransitionEnd}>
      {props.children}
    </li>
  )
}

function App() {
	return (
    <ul> 
      <ALi>H</ALi>
      <ALi>e</ALi>
      <ALi>l</ALi>
      <ALi>l</ALi>
      <ALi>o</ALi>
    </ul>
  );
}

   
ReactDOM.render(<App />, document.querySelector("#app"));