JSFiddle - React, Tailwind, and code Playground

by andys_fiddle

HTML

<button class="text-button" data-value="A">A</button>
<button class="text-button" data-value="B">B</button>
<button class="text-button" data-value="C">C</button>

<p id="display"></p>

CSS

* {
  font-family: Verdana;
}
.text-button {
  padding: 4px 8px;
  margin: 0 2px;
}

#display {
  border: 1px solid #eeeeee;
  padding: 4px;
}

JavaScript

document
  .querySelectorAll('button')
  .forEach(button =>
    button
     .addEventListener("click", (e) => {
           let dataSetValue = e.target.dataset.value;
           console.log(dataSetValue);
           document.querySelector("#display").innerText = dataSetValue;
        }
     )
  )