JSFiddle - React, Tailwind, and code Playground

by DugSohn

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css">
<form class="form-example">
<div class
    <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
    <div class="control-group">
        <label for="email">Email</label>
        <input id="email" type="text" class="input-block-level" />
    </div>
    <div class="form-footer">
        <button class="btn btn-success btn-large btn-block" type="submit">Submit Query</button>
    </div>
</form>

CSS

body {
    padding-top: 100px;
    background: #f7f8f9;
}

.form-example {
    max-width: 400px;        
    margin: 0 auto;
    padding: 25px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.form-example input[type="text"],
.form-example input[type="email"],
.form-example input[type="password"] {
    font-size: 16px;
    height: auto;
    padding: 7px 9px;
}
.form-footer a {
    font-size: 12px;
    display: inline-block;
    margin-top: 15px;
}

.first-name,
.last-name {
    width: 48%;
    display: inline-block;
    float: left;
}
.last-name {
    float: right;
}