JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mainContainer">
    <div class="checkboxContainer">
        <input type="checkbox" id="check1" name="options" />
        <label for="check1">Option 1</label>
        <input type="checkbox" id="check2" name="options" />
        <label for="check2">Option 2</label>
        <input type="checkbox" id="check3" name="options" />
        <label for="check3">Option 3</label>
        <input type="checkbox" id="check4" name="options" />
        <label for="check4">Option 4</label>
    </div>
    <div class="radioContainer">
        <input type="radio" id="radio1" name="type" />
        <label for="radio1">Type 1</label>
        <input type="radio" id="radio2" name="type" />
        <label for="radio2">Type 2</label>
        <input type="radio" id="radio3" name="type" />
        <label for="radio3">Type 3</label>
        <input type="radio" id="radio4" name="type" />
        <label for="radio4">Type 4</label>
    </div>
</div>

CSS

body {
    font: normal 12px/1 Arial,helvetica,sans-serif;
    color: #333;
    background: #eee;
}
.mainContainer {
    width: 360px;
    height: 104px;
    position: absolute;
    margin-left: -180px;
    left: 50%;
    top: 20%;
    background: #fff;
    padding: 30px 30px 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 1px #ddd;
    -moz-box-shadow: 0 1px 1px #ddd;
    box-shadow: 0 1px 1px #ddd;
}
.checkboxContainer, .radioContainer {
    margin-bottom: 30px;
}
/* RADIO */
input[type='radio'] {
    display: none;
}
input[type='radio'] + label {
    margin-right: 20px;
    position: relative;
    cursor: pointer;
}
input[type='radio'] + label:before {
    content: '';
    cursor: pointer;
    display: inline-block;
    position: relative;
    width: 16px;
    height: 16px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #eee;
    margin-right: 5px;
    top: 4px;
}
input[type='radio']:checked + label:before {
    background-color: #aaa; 
}
input[type='radio']:checked + label:after {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    position: absolute;
    left: 4px;
    top: 4px;
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #fff;
    content: '';
}
input[type='checkbox'] {
    display: none;
}
input[type='checkbox'] + label {
    position: relative;
    margin-right: 20px;
    cursor: pointer;
}
input[type='checkbox'] + label:before {
    content: '';
    display: inline-block;
    cursor: pointer;
    width: 16px;
    height: 16px;
    background: #eee;
    position: relative;
    top: 4px;
    margin-right: 5px;
}
input[type='checkbox']:checked + label:before {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    background-color: #aaa;
}
input[type='checkbox']:checked + label:after {
    content: '';
    width: 10px;
    height: 10px;
    display: inline-block;
 ...