JSFiddle - React, Tailwind, and code Playground

HTML

<div class="toolbar">
  <a class="btn" href="#" data-target="firstId">Первый</a>
  <a class="btn" href="#" data-target="secondId">
    Второй
  </a>


  <a class="btn" href="#" data-target="thirdId">Третий</a>

</div>
<div class="modal-window" id="firstId">
  Первое окно
</div>
<div class="modal-window" id="secondId">
  Второе окно
</div>
<div class="modal-window" id="thirdId">
  Третье окно
</div>

CSS

.toolbar {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.btn {
  width: 120px;
  height: 48px;
}

.modal-window {
  display: none;
  width: 200px;
  height: 200px;
  border: 2px solid blue;
}

.modal-window--active {
  display: flex;
}

JavaScript

let toolbar = document.querySelector('.toolbar');

toolbar.onclick = function(event) {
  let target = event.target.closest('a');

  if (target.tagName != 'A') return;
  let modalActive = document.querySelector('#' + target.dataset.target);
  modalActive.classList.toggle("modal-window--active");

};