JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.jque.re/plugins/effects-ui/icheck/js/jquery.icheck.min.js"></script>
<link rel="stylesheet" href="http://cdn.jque.re/plugins/effects-ui/icheck/skins/flat/orange.css">
<p>Are you sure you want to have your details removed from our marketing list?</p>
<div id="unsubscribe_radio">
<ul>
<li>
<input type="radio" name="iCheck" value="yes"/>
<label>Yes</label>
</li>
<li>
<input type="radio" name="iCheck" value="no"/>
<label>No</label>
</li>
</ul>
</div>
CSS
#unsubscribe_radio ul {
list-style:none;
}
#unsubscribe_radio ul li {
display: inline-block;
margin-left: 15px;
}
#unsubscribe_radio label {
float: left;
margin-top: -17px;
margin-left: 30px;
}
JavaScript
$(document).ready(function () {
$('input[name="iCheck"]').on('ifClicked', function (event) {
alert("You clicked " + this.value);
});
$('input').iCheck({
radioClass: 'iradio_flat-orange'
});
});