JSFiddle - React, Tailwind, and code Playground

by adiioo7

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/flat/orange.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>
<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').iCheck({
	        radioClass: 'iradio_flat-orange'
	    });

	    $('input').on('ifClicked', function (event) {
            var value = $(this).val();
	        alert("You clicked " + value);
	    });
	});