JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-3.1.1.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div id="dialog" title="Basic dialog">
    <div id='color_sort_div'>
      <div id='color_sort_caption'>Color sort by</div>
      <form id='color_sort_form'>
        <div id='color_sort_sel'>
          <label for='r_hue'>Hue</label>
          <input checked type='radio' id='r_hue' name='radio' value='hue'>
          <label for='r_light'>Lightness</label>
          <input type='radio' id='r_light' name='radio' value='light'>
        </div>
      </form>
    </div>
</div>

<div id='color_sort_div2'>
  <div id='color_sort_caption2'>Color sort by</div>
  <form id='color_sort_form2'>
    <div id='color_sort_sel2'>
      <label for='r_hue2'>Hue</label>
      <input checked type='radio' id='r_hue2' name='radio' value='hue'>
      <label for='r_light2'>Lightness</label>
      <input type='radio' id='r_light2' name='radio' value='light'>
    </div>
  </form>
</div>

JavaScript

$(function() {
		  $("#dialog").dialog();
		  $("#color_sort_sel, #color_sort_sel2").controlgroup();
		});