JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<form id="edit1" name="edit1">
    <label>Wrapped</label>
    <div class="radios padTop" id="status">
        <label class="inline true" for="active1">ACTIVE</label>
        <input type="radio" name="status1" value="1" id="active1" />
        <label class="inline false" for="inactive1">INACTIVE</label>
        <input type="radio" name="status1" value="0" id="inactive1" checked="checked" />
    </div>
</form>

<form id="edit2" name="edit2"></form>
<label>Unwrapped</label>
<div class="radios padTop" id="status">
    <label class="inline true" for="active2">ACTIVE</label>
    <input type="radio" name="status2" form="edit2" value="1" id="active2" />
    <label class="inline false" for="inactive2">INACTIVE</label>
    <input type="radio" form="edit2" name="status2" value="0" id="inactive2" checked="checked" />
</div>

<form id="edit3" name="edit3"></form>
<label>Form Attribute Stripped</label>
<div class="radios padTop" id="status">
    <label class="inline true" for="active3">ACTIVE</label>
    <input type="radio" name="status3" value="1" id="active3" />
    <label class="inline false" for="inactive3">INACTIVE</label>
    <input type="radio"  name="status3" value="0" id="inactive3" checked="checked" />
</div>

<p>It's the FORM attribute that kills the click event, if I take that out it works fine.</p>

CSS

p{float:left; clear:both; margin-top:20px; font-weight:bold;width:100%; text-align:center;}
form {width:100%; clear:both; float:left;}
label {margin: 5px 0;
float: left;
width: 50%;
line-height: 30px;
height: 30px;
font-weight: bold;
clear: right;
text-transform: uppercase;
color: #646464;
text-align: right;
    padding-right:10px;
}
/* ==========================================================================
   Toggle Buttons - Inherits the icon style button
   ========================================================================== */
.radios label, .checkboxes label {
  float: left;
  border: 1px solid #d2d2d2;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fafafa), color-stop(100%, #f0f0f0));
  background-image: -webkit-linear-gradient(top, #fafafa, #f0f0f0);
  background-image: -moz-linear-gradient(top, #fafafa, #f0f0f0);
  background-image: -o-linear-gradient(top, #fafafa, #f0f0f0);
  background-image: linear-gradient(top, #fafafa, #f0f0f0);
  clear: none;
  width: auto !important;
  margin: 0 !important;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.radios label span, .checkboxes label span {
  color: #646464;
  padding: 4px 15px !important;
  position: relative;
}
.radios label:hover, .checkboxes label:hover {
  background: #f0f0f0;
  border: 1px solid #d2d2d2;
}
.radios label.ui-state-active, .checkboxes label.ui-state-active {
  border: 1px solid #d2d2d2;
  background: #00a57b;
}
.radios label.ui-state-active span, .checkboxes label.ui-state-active span {
  color: white;
}
.radios label.ui-state-active[for="munuItem_active_true"], .radios label.ui-state-active[data-true], .radios label.ui-state-active[id*="_true"], .radios label.ui-state-active[for*="_true"], .checkboxes label.ui-state-active[for="munuItem_active_true"], .checkboxes label.ui-state-active[data-true], .checkboxes...

JavaScript

$(document).ready(function () {
    $('.radios').buttonset();
});