JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div id="div1"></div>
  <div id="div2"></div>
</div>
<button id="btn1">Toggle color block 1</button>
<button id="btn2">Toggle color block 2 + Trigger</button>

CSS

.parent {
  margin-bottom: 15px;
}
.parent div {
  max-width: 30vw;
  height: calc(30vw / 3);
  outline: 1px solid #e4e4e4;
}
.color1 {
  background: blue;
}
.color2 {
  background: yellow;
}

JavaScript

btn1.addEventListener('click', () => {
  div1.classList.toggle('color1');
});

btn2.addEventListener('click', () => {
  div2.classList.toggle('color2');
  btn1.dispatchEvent(new Event('click'));
});