JSFiddle - React, Tailwind, and code Playground

HTML

<p id="text">
  &#x25a2; I have eaten lunch
  <br> &#x25a2;&nbsp;&nbsp;I have eaten lunch
  <br> &#x25fb; I drank some tea today
  <br> &#x274f; Earn a lot of money
  <br> &#x2751; And write a book
  <br> &#x2610; And exercise every day
  <br> &#x2611; And take a look at http://jsfiddle.net/S2QCt/267/
</p>

<p>
  <form>
    <label>
      <input type="radio" name="font"> Arial</label>
    <br>
    <label>
      <input type="radio" name="font"> Calibri</label>
    <br>   
    <label>
      <input type="radio" name="font"> Consolas</label>
    <br>     
    <label>
      <input type="radio" name="font"> Georgia</label>
    <br>
    <label>
      <input type="radio" name="font"> Lucida Grande</label>
    <br>
    <label>
      <input type="radio" name="font"> Lucida Sans Unicode</label>
    <br>
    <label>
      <input type="radio" name="font"> Monaco</label>
    <br>
    <label>
      <input type="radio" name="font"> Times New Roman</label>
    <br>
    <label>
      <input type="radio" name="font"> Trebuchet MS</label>
    <br>    
    <label>
      <input type="radio" name="font"> Verdana</label>
    <br>
  </form>
</p>

CSS

#text {
  padding-bottom: 20px;
  border-bottom: 1px dotted #ccc;
  margin-bottom: 20px;
}

form {
  padding-left: 2px;
}

JavaScript

$('form input').each(function() {
  $(this).click(function(ev) {
    $('#text').css({
      'font-family': $(ev.target).parent().text()
    });
  });
});

$(function() {
  $('form input').first().click();
})