JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer-container ">
	

	<div class="containerC ">
		<div class="modal-contentA">
			<div class="buttonContainerB">
				<!--- <button data-destination="#lb" class="linkButton btn-primaryC btnC">linkButton</button>--->
				<button class="linkButtonB btn-primaryC btnC">linkButton</button>
				<button class="linkButtonB btn-primaryC btnC">linkButton</button>
				<button class="linkButtonB btn-primaryC btnC">linkButton</button>
				<button class="linkButtonB btn-primaryC btnC">linkButton</button>
				<button class="linkButtonB btn-primaryC btnC">linkButton</button>
				<button class="linkButtonB btn-primaryC btnC">linkButton</button>
				<button class="linkButtonB btn-primaryC btnC">linkButton</button>
				<button class="linkButtonB btn-primaryC btnC">linkButton</button>
				<button class="linkButtonB btn-primaryC btnC">linkButton</button>
				<button class="linkButtonB btn-primaryC btnC">linkButton</button>
				<button class="linkButtonB btn-primaryC btnC">linkButton</button>
				<button class="linkButtonB btn-primaryC btnC">linkButton</button>
				<button class="linkButtonB btn-primaryC btnC">linkButton</button>
				<button class="linkButtonB btn-primaryC btnC">linkButton</button>
				<button class="linkButtonB btn-primaryC btnC">linkButton</button>
				<button class="linkButtonB btn-primaryC btnC">linkButton</button>
				<button class="linkButtonB btn-primaryC btnC">linkButton</button>
				<button class="linkButtonB btn-primaryC btnC">linkButton</button>
				<button class="linkButtonB btn-primaryC btnC">linkButton</button>
				<button class="linkButtonB btn-primaryC btnC">linkButton</button>
				<button class="linkButtonB btn-primaryC btnC">linkButton</button>
				<button class="linkButtonB btn-primaryC btnC">linkButton</button>
				<button class="linkButtonB btn-primaryC btnC">linkButton</button>
			</div>
		   <div class="modal-footer">
        <button class="exitC exit" type="button" title="Exit" aria-label="Close"></button>
     ...

CSS

body {
  margin: 0;
  padding: 0;
}

body {
  background: #121212;
  padding: 0 8px 0;
}

/*body:has(.outer-container:not(.hide)) {
  padding-top: 0;
}*/

body:has(.modal.active) {
  overflow: hidden;
}

body:has(.modalB.active) {
  overflow: hidden;
}

.outer-container {
  display: flex;
  min-height: 100vh;
  /*justify-content: center;
  flex-direction: column;*/
}


.btn-primaryC {
  color: #2fdcfe;
  background-color: #000000;
  border-color: #2fdcfe;
}

.btnC {
  display: inline-block;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: #000000;
  border: 1px solid red;
  box-sizing: border-box;
  padding: 6px 12px;
  font-size: 16px;
  border-radius: 4px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}



.btn-primaryD {
  color: #2fdcfe;
  background-color: #000000;
  border-color: #2fdcfe;
}

.btnD {
  display: inline-block;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: #000000;
  border: 1px solid #2fdcfe;
  box-sizing: border-box;
  padding: 6px 12px;
  font-size: 16px;
  border-radius: 4px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}


.linkButtonB {
   /* flex-basis: 183px;*/
    /* width of each button */
    /*margin: 0;/*
    /* spacing between buttons */

    cursor: pointer;
}



.buttonContainerB {
  display: grid;
  grid-template-columns: repeat(3, 183px);
  /*align-content: center;
  justify-content: center;*/
  align-items: center;
  max-width: 569px;
  gap: 10px;
}

@media (max-width: 569px) {
  .buttonContainerB {
    grid-template-columns: repeat(2, 183px);
  }
}

@media (max-width: 183px) {
  .buttonContainerB {
    grid-template-columns: repeat(1,...

JavaScript

(function manageLinks() {

  const linksButton = [{
    buttonClass: "linkButton btn-primary btn",
    title: "Links"
  }

  ];

  const buttonContainer = document.querySelector(".buttonContainerB");

  linksButton.forEach(function (links) {
    const button = document.createElement("button");
    button.className = links.buttonClass;
    button.textContent = links.title;
    button.classList.add("linkButton", "btnC", "btn-primaryC");
    button.setAttribute("data-destination", "#lb"); // Added this line
    buttonContainer.appendChild(button);
  });
})();

(function manageLinkButtonOpen() {

  function openModal(target) {
    const modal = document.querySelector(target);
    modal.classList.add("active");
  }
  function addLinkToButton() {
    const modalButton = document.querySelector(".linkButton");
    modalButton.addEventListener("click", function (event) {
      //const target = event.currentTarget.dataset.destination;
      //openModal(target);
      openModal(event.currentTarget.dataset.destination);

    });
  }
  addLinkToButton();

}());

(function manageLinkButtonClose() {


  function closeModal(modal) {
    modal.classList.remove("active");
  }

 function addCloseEventToModal() {
    const closeModals = document.querySelectorAll(".closeB");
    closeModals.forEach(function (modal) {
      modal.addEventListener("click", function (event) {
        //closeModal(event.target.closest(".modalB"));
        closeModal(document.querySelector(".modalB"));
      });
    });
  }
  addCloseEventToModal();
}());