JSFiddle - React, Tailwind, and code Playground

by the94air

HTML

<section>
  <div id="item1">click me!</div>
  <div id="mega-menu"></div>
</section>

CSS

div:nth-child(1) {
  background: red;
  width: 100px;
  height: 100px;
}

div:nth-child(2) {
  background: blue;
  width: 100px;
  height: 100px;
}

.mega-menu-active {
  background: black !important;
}

JavaScript

let item = document.querySelector('#item1');
let mega = document.querySelector('#mega-menu');

item.addEventListener('click', () => {
  mega.classList.add('mega-menu-active');
});