JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<div id="accordion">	
  <h3 href="#0"><a href="#0">Tennis - Période</a></h3>
  <div>
    <fieldset class="controle">
      <legend>Select a Location: </legend>
      <label for="radio-1">New York</label>
      <input type="radio" name="radio-1" id="radio-1">
      <label for="radio-2">Paris</label>
      <input type="radio" name="radio-1" id="radio-2">
      <label for="radio-3">London</label>
      <input type="radio" name="radio-1" id="radio-3">
    </fieldset>
  </div>
  <h3 href="#1"><a href="#0">Squash - Période</a></h3>
  <div>
    <fieldset class="controle">
      <legend>Select a Location: </legend>
      <label for="radio-4">New York</label>
      <input type="radio" name="radio-2" id="radio-4">
      <label for="radio-5">Paris</label>
      <input type="radio" name="radio-2" id="radio-5">
      <label for="radio-6">London</label>
      <input type="radio" name="radio-2" id="radio-6">
    </fieldset>
  </div>
  <h3 href="#3"><a href="#0">Badminton - Période</a></h3>
  <div>
    <fieldset class="controle">
      <legend>Select a Location: </legend>
      <label for="radio-7">New York</label>
      <input type="radio" name="radio-3" id="radio-7">
      <label for="radio-8">Paris</label>
      <input type="radio" name="radio-3" id="radio-8">
      <label for="radio-9">London</label>
      <input type="radio" name="radio-3" id="radio-9">
    </fieldset>
  </div>
</div>

JavaScript

$( "input:radio, input:checkbox" ).checkboxradio({icon: false});
	$( ".controle" ).controlgroup();
  $( "#accordion" ).accordion({active : 0, heightStyle: "content", collapsible : true});