.background {
  display: flex;
  align-items: center;
  justify-content: center;
}

.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;
  border: dashed 5px red;
}

.border-box {
  font-size: 4rem;
  margin: 0;
  font-weight: 900;
  letter-spacing: 1rem;
  text-align: center;
  color: white;
  background-clip: border-box;
  background-image: url(https://i.namu.wiki/i/vzQIsovYmymvt84FWS9hhAS3Qva_O31fczg3ErMrSQrSgnJ9h3oQDf3kVo5M6aD1Q05-etvQRlqc3dnurUczXw.webp);
  border: dashed 5px red;
  padding: 2rem;
  background-size: cover;
}

.padding-box {
  font-size: 4rem;
  margin: 0;
  font-weight: 900;
  letter-spacing: 1rem;
  text-align: center;
  color: white;
  background-clip: padding-box;
  background-image: url(https://i.namu.wiki/i/vzQIsovYmymvt84FWS9hhAS3Qva_O31fczg3ErMrSQrSgnJ9h3oQDf3kVo5M6aD1Q05-etvQRlqc3dnurUczXw.webp);
  border: dashed 5px red;
  padding: 2rem;
  background-size: cover;
}

.content-box {
  font-size: 4rem;
  margin: 0;
  font-weight: 900;
  letter-spacing: 1rem;
  text-align: center;
  color: white;
  background-clip: content-box;
  background-image: url(https://i.namu.wiki/i/vzQIsovYmymvt84FWS9hhAS3Qva_O31fczg3ErMrSQrSgnJ9h3oQDf3kVo5M6aD1Q05-etvQRlqc3dnurUczXw.webp);
  border: dashed 5px red;
  padding: 2rem;
  background-size: cover;
}

.button-box {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  flex-direction: column;
  transform: translate(-50%);
}

.button-box > button {
  margin: 0;
  border: none;
  font-size: 2rem;
  margin-bottom: 1rem;
  border: 1px solid black;
  border-radius: 10px;
  padding:0.2rem 1rem;
}

const { useState } = React;

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

  return (
    <div>
      <div className="background">
        <p className={name}>SEOUL</p>
        <div className="button-box">
          <button onClick={() => setName('border-box')}>background-clip : border-box</button>
          <button onClick={() => setName('padding-box')}>background-clip : padding-box</button>
          <button onClick={() => setName('content-box')}>background-clip : content-box</button>
          <button onClick={() => setName('seoul')}>background-clip : text</button>
        </div>
      </div>
    </div>
  );
}

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