JSFiddle - React, Tailwind, and code Playground

by techiedelight

HTML

<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>

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;
}

JavaScript

$(document).ready(function() {
  $('input[type=radio][name="contact"]').change(function() {
    alert($(this).val()); // or this.value
  });
});