JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<form>
  <fieldset>
    <label>Name:</label>
    <input type="text" placeholder="What's your name ?">

    <div class="control-group">
      <label class="checkbox inline">
        <input type="checkbox"> Check me out
      </label>
      <label class="checkbox inline">
        <input type="checkbox"> Otherwise you could check me
      </label>
    </div>
      
    <span class="help-block">Example block-level help text here.</span>

    <label class="radio">
      <input type="radio" name="a" checked>
      Option one is this and that—be sure to include why it's great
    </label>
    <label class="radio">
      <input type="radio" name="a">
      Option two can be something else and selecting it will deselect option one
    </label>

    <button type="submit" class="btn">Submit</button>
  </fieldset>
</form>

CSS

body {
    padding-top: 20px;
}

input[type="radio"],
input[type="checkbox"] {
    -webkit-appearance: none;
    
    margin: 0;
    padding: 0;
    height: 1em;
    width: 1em;
    
    position: relative;
    top: .25em;
    
    border-radius: 2px;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

input[type="radio"] {
    border-radius: 50%;
}

input[type="radio"]:active,
input[type="checkbox"]:active {
    background: #eee;
}

input[type="checkbox"]:checked:before {
    content: "✔";
    font-size: 1.2em;
    color: #555;
    position: absolute;
    top: -.3em;
    right: -.2em;
}

input[type="radio"]:checked:before {
    content: "";
    display: block;
    border-radius: 50%;
    background: #555;
    height: 50%;
    width: 50%;
    position: absolute;
    top: 25%;
    left: 25%;
}

label.checkbox input[type="checkbox"] {   
}