JSFiddle - React, Tailwind, and code Playground

by techiedelight

HTML

<html>

  <body>
    <div id="container">
      <p>Select your preferred contact method:</p>
      <div>
        <input type="radio" id="email" name="contact" value="email">
        <label for="email">Email</label>

        <input type="radio" id="phone" name="contact" value="phone">
        <label for="phone">Phone</label>

        <input type="radio" id="mail" name="contact" value="mail">
        <label for="mail">Mail</label>
      </div>
    </div>
  </body>

  <script>
    var radios = document.querySelectorAll('input[type=radio][name="contact"]');
    radios.forEach(radio => radio.addEventListener('change', () => alert(radio.value)));
  </script>

</html>

CSS

p,
label {
  font: 15px 'Exo 2', sans-serif;
}

input {
  margin: 6px;
}

button {
  margin-top: 10px;
  padding: 2 2;
  font: 15px 'Exo 2', sans-serif;
}