JSFiddle - React, Tailwind, and code Playground

HTML

<button class="button active">Button 1</button>
<button class="button">Button 2</button>
<button class="button">Button 3</button>

CSS

.button {
  padding: 4px 8px;
  border: 2px solid black;
  border-radius: 5px;
  background-color: white;
}

.button.active {
  border-color: red;
  background-color: yellow;
}

JavaScript

document.querySelectorAll(".button").forEach((el) => {
  el.addEventListener("click", () => {
    resetButtons();
		activateButton(el);
	});
});

const activateButton = (el) => {
  el.classList.add("active");
};

const resetButtons = () => {
	document.querySelectorAll(".button").forEach((el) => {
    el.classList.remove("active");
   });
};