JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <header>
    <h1 id="header">
      ヘッダー
    </h1>
  </header>
  <div>
    <h2>
      見出し
    </h2>
    <button
      id="button"
      class="button">サンプルボタン</button>
  </div>
</div>

CSS

.header {
  color: #f00;
}
.button {
  background: #7fc9ff;
  color: #004a7f;
  border: solid 1px #0094ff;
  border-radius: 5px;
  padding: 10px;
}

JavaScript

document.getElementById("button")
  .onclick = function() {
    document.getElementById("header")
      .classList.add("header");
  }