JSFiddle - React, Tailwind, and code Playground

Radio/Checkboxes

by Jennifer Perrin

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="demo">
    <div class="demo-title">Checkboxes 1</div>
    <div class="demo-body">
        <div class="item-default">
            <input type="checkbox" class="radiocheck" name="demo1_one" id="demo1_one" />
            <label class="full default left" for="demo1_one">Default</label>
        </div>
        <div class="item-default">
            <input type="checkbox" class="radiocheck" name="demo1_six" id="demo1_six" />
            <label class="full default left circle" for="demo1_six">Circle</label>
        </div>
        <div class="item-default">
            <input type="checkbox" class="radiocheck" name="demo1_seven" id="demo1_seven" />
            <label class="full default left square" for="demo1_seven">Square</label>
        </div>
        <div class="item-default">
            <input type="checkbox" class="radiocheck" name="demo1_two" id="demo1_two" />
            <label class="full default left train" for="demo1_two">Train</label>
        </div>
        <div class="item-default">
            <input type="checkbox" class="radiocheck" name="demo1_three" id="demo1_three" />
            <label class="full default left bus" for="demo1_three">Bus</label>
        </div>
        <div class="item-default">
            <input type="checkbox" class="radiocheck" name="demo1_four" id="demo1_four" />
            <label class="full default left subway" for="demo1_four">Subway</label>
        </div>
        <div class="item-default">
            <input type="checkbox" class="radiocheck" name="demo1_five" id="demo1_five" disabled/>
            <label class="full default left" for="demo1_five">Disabled</label>
        </div>
    </div>
</div>
<div class="demo">
    <div class="demo-title">Radio buttons 1</div>
    <div class="demo-body">
        <div class="item-default">
            <input type="radio" class="radiocheck" name="demo3_one" id="demo3_one" />
     ...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 600, 700);
 * {
    margin: 0;
    padding: 0;
    font-family:"Open Sans";
}
html, body {
    color: #58666e;
}
#main {
    border-left: 1px solid #f2f2f2;
    border-right: 1px solid #f2f2f2;
    margin: 0 auto;
    max-width: 998px;
    width: 100%;
}
#header {
    background: none repeat scroll 0 0 #23b7e5;
    color: #fff;
    font-size: 20px;
    padding: 30px 15px;
    text-align: center;
}
h2 {
    background: none repeat scroll 0 0 #cef1fc;
    margin: 10px 0;
    padding: 12px 0;
    text-align: center;
    font-weight: 400;
}
h3 {
    font-weight: 400;
}
p {
    font-size: 14px;
    padding: 10px;
}
.demos {
    overflow: hidden;
}
.demo {
    float: left;
    overflow: hidden;
    width: 50%;
}
.demo-title {
    margin: 0 auto;
    padding: 15px 0 0;
    text-align: center;
}
.demo-body {
    margin: 0 auto;
    width: 146px;
}
.item-small {
    margin: 15px;
}
.item-default {
    margin: 23px 15px;
}
.item-big {
    margin: 25px 15px;
}
.code {
    background: none repeat scroll 0 0 #f2f2f2;
    font-size: 12px;
    padding: 10px;
}
input.radiocheck + label.full.circle:after {
    content:'\f111';
    /*checked*/
}
input.radiocheck + label.full.square:after {
    content:'\f0c8';
    /*checked*/
}
input.radiocheck + label.full.train:after {
    content:'\f238';
    /*checked*/
}
input.radiocheck + label.full.bus:after {
    content:'\f207';
    /*checked*/
}
input.radiocheck + label.full.subway:after {
    content:'\f239';
    /*checked*/
}
input.radiocheck + label.nofull.circle:after {
    content:'\f111';
    /*checked*/
}
input.radiocheck + label.nofull.square:after {
    content:'\f0c8';
    /*checked*/
}
input.radiocheck + label.nofull.train:after {
    content:'\f238';
    /*checked*/
}
input.radiocheck + label.nofull.bus:after {
    content:'\f207';
    /*checked*/
}
input.radiocheck + label.nofull.subway:after {
    content:'\f239';
    /*checked*/
}
@media (max-width: 400px)...