.seoul {
  font-size: 4rem;
  margin: 0;
  font-weight: 900;
  letter-spacing: 1rem;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: url(https://i.namu.wiki/i/vzQIsovYmymvt84FWS9hhAS3Qva_O31fczg3ErMrSQrSgnJ9h3oQDf3kVo5M6aD1Q05-etvQRlqc3dnurUczXw.webp);
  text-align: center;
  padding: 2rem;
}

.seoul:hover {
  transform: rotate(10deg);
  transition: all 1s
}

const { useState } = React;

function App() {
  const [name, setName] = useState('seoul');

  return (
    <div>
      <p className={name}>SEOUL</p>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));