JSFiddle - React, Tailwind, and code Playground

by tsdexter

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<p>Filter By:</p>
<div id="filter-campus">
    <input id="rdoAnyCampus" type="radio" name="campus" value="" checked="checked" /><label for="rdoAnyCampus">Any</label>
    <input id="rdoBarrie" type="radio" name="campus" value="barrie" /><label for="rdoBarrie">Barrie</label>
    <input id="rdoOrillia" type="radio" name="campus" value="orillia" /><label for="rdoOrillia">Orillia</label>
    <input id="rdoOwenSound" type="radio" name="campus" value="owen-sound" /><label for="rdoOwenSound">Owen Sound</label>
</div>
<div id="filter-type">
    <input id="rdoAnyType" type="radio" name="type" value="" checked="checked" /><label for="rdoAnyType">Any</label>
    <input id="rdoFitness" type="radio" name="type" value="fitness" /><label for="rdoFitness">Fitness</label>
    <input id="rdoRecreation" type="radio" name="type" value="recreation" /><label for="rdoRecreation">Recreation</label>
    <input id="rdoVarsity" type="radio" name="type" value="varsity" /><label for="rdoVarsity">Varsity</label>
</div>

JavaScript

jQuery("#filter-campus, #filter-type").buttonset();