JSFiddle - React, Tailwind, and code Playground

by Shajeer Ahamed

HTML

<script src="http://s6.postimg.org/4e4im9vkt/checks.png"></script>
<table id="rbtnsslEnabled" class="chkMargin">
    <tbody>
        <tr>
            <td>
                <input id="rbtnsslEnabled_0" type="radio" name="rbtnsslEnabled" value="SSL">
                <label for="rbtnsslEnabled_0">SSL</label>
            </td>
        </tr>
        <tr>
            <td>
                <input id="rbtnsslEnabled_1" type="radio" name="rbtnsslEnabled" value="TLS">
                <label for="rbtnsslEnabled_1">TLS</label>
            </td>
        </tr>
    </tbody>
</table>

CSS

table {
    width: 100% !important;
    border: none;
    table-layout: fixed;
}
input[type=checkbox]:not(old), input[type=radio]:not(old) {
    width: 40px;
    margin: 0;
    padding: 0;
}
input[type=checkbox]:not(old) + label, input[type=radio]:not(old) + label {
    display: inline-block;
    margin-left: -28px;
    padding-left: 28px;
    padding-bottom: 4px;
}
input[type="radio"], input[type="checkbox"] {
    margin: 4px 0 0;
    margin-top: 1px \9;
    line-height: normal;
}
input[type=radio]:not(old):checked + label {
    background-position: 0 -24px;
}