JSFiddle - React, Tailwind, and code Playground

HTML

<head>
	<style>
		@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&family=Poppins:wght@400;500&display=swap');
	</style>
</head>

<div class="radio-container ">
			<div class="radioButtonContainer"></div>

				<div class="exitF">
					<a href="" title="Exit" aria-label="Close"></a>
				</div>
			


	</div>

CSS

.radio-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  /* added*/
  min-height: 100%;
  margin: auto;
  justify-content: center;
  align-content: center;
}

.radio-container.hide{
  display: none;
}

.radioButtonContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
  max-width: 569px;
  gap: 10px;
  background: red;
}

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

}
.btn-primary {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.btn {
  display: inline-block;
  font-weight: 400;
  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: #0d6efd;
  border: 1px solid transparent;
  padding: 6px 12px;
  font-size: 16px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  border-radius: 4px;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn:hover {
  background-color: #0056b3;
  color: #ffffff;
}

.btn:focus {
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0a58ca;
  box-shadow: 0 0 0 4px rgb(0 128 0 / 100%);
}

.exitF a {
  position: relative;
  margin: 10px auto 0;
  width: 37px;
  height: 37px;
  background: black;
  border-radius: 50%;
  border: 5px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exitF a::before,
.exitF a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 5px;
  background: red;
  transform: rotate(45deg);
}

.exitF a::after {
  transform: rotate(-45deg);
}

JavaScript

(function manageRadios() {

  // Define your radio stations
  const radioStations = [{
  
      src: "https://stream.synthwaveradio.eu/listen/synthwaveradio.eu/radio.mp3",
      title: "Synthwave Radio"

    }
    // Add more stations here...
  ];

  // Get the container for the buttons
  const buttonContainer = document.querySelector('.radioButtonContainer');
  // Create audio and button elements for each station
  radioStations.forEach(station => {
    // Create audio element
    const audio = document.createElement('audio');
    audio.title = station.title;
    audio.preload = "none";

    const source = document.createElement('source');
    source.src = station.src;
    source.type = "audio/mpeg";

    audio.appendChild(source);

    // Add audio element to the body
    document.body.appendChild(audio);

    // Create button element
    const button = document.createElement('button');
    button.classList.add('radioButton', 'btn', 'btn-primary');
    button.dataset.src = station.src;
    button.textContent = station.title;

    // Add button to the container
    buttonContainer.appendChild(button);
  });

  // Your existing JavaScript code
  const buttons = document.querySelectorAll(".radioButton");
  const audios = document.querySelectorAll("audio");

  function playButton(button, buttonIndex) {
    button.addEventListener("click", function() {
      buttons.forEach(function(button) {
        button.classList.remove("blue");
      });
      audios.forEach(function(audio, i) {
        if (buttonIndex !== i || audio.currentTime > 0) {
          audio.src = "";
        } else {
          button.classList.add("blue");
          audio.src = button.dataset.src;
          audio.play();
        }
      });
    });
  }

  buttons.forEach(function(button, i) {
    playButton(button, i);
  });

}());