JSFiddle - React, Tailwind, and code Playground

well

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css">
   <div id="content"> <!-- Content start -->

        <div class="inner_content">

            <div class="widgets_area">
                <div class="row-fluid">

                        <div class="well light_blue">
                            <div class="well-header">
                                <h5>Form elements</h5>
                                <ul>
                                    <li class="color_pick"><a href="#"><i class="icon-th"></i></a></li>
                                </ul>
                            </div>

                            <div class="well-content no-search">
                                <form>
                                    <div class="form_row">
                                        <label class="field_name">Standard input</label>
                                        <div class="field">
                                            <input class="span12" name="standard" placeholder="Standard input" type="text">
                                        </div>
                                    </div>
                                    <div class="form_row">
                                        <label class="field_name">Small input</label>
                                        <div class="field">
                                            <input class="input-small" name="small" placeholder=".input-small" type="text">
                                        </div>
                                    </div>
                                    <div class="form_row">
                                        <label class="field_name">Medium input</label>
                                        <div class="field">
                                            <input class="input-medium" name="medium" placeholder=".input-medium" type="text">
                                        </div>
                               ...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
    color: #333333;
    font-family: 'Open Sans',Arial,Helvetica,sans-serif;
    font-size: 12px;
    line-height: 20px;
}
#content {
    position: relative;
    z-index: 97;
}
#content .inner_content {
    border-width: 1px 1px 0;
    box-shadow: 0 1px 0 #FFFFFF inset;
    margin: 1px 0 0;
}
.widgets_area {
    padding: 20px;
}
.row-fluid:before, .row-fluid:after {
    content: "";
    display: table;
    line-height: 0;
}
.row-fluid:before, .row-fluid:after {
    content: "";
    display: table;
    line-height: 0;
}
.row-fluid:after {
    clear: both;
}
.row-fluid:before, .row-fluid:after {
    content: "";
    display: table;
    line-height: 0;
}
.row-fluid:after {
    clear: both;
}
.row-fluid:before, .row-fluid:after {
    content: "";
    display: table;
    line-height: 0;
}
.row-fluid {
    width: 100%;
}
.row-fluid {
    width: 100%;
}
.row-fluid [class*="span"]:first-child {
    margin-left: 0;
}
.row-fluid [class*="span"]:first-child {
    margin-left: 0;
}
.row-fluid .span6 {
    width: 48.7179%;
}
.row-fluid [class*="span"] {
    -moz-box-sizing: border-box;
    display: block;
    float: left;
    margin-left: 2.5641%;
    min-height: 30px;
    width: 100%;
}
.row-fluid .span6 {
    width: 48.9362%;
}
.well {
    border-radius: 0 0 0 0;
    margin-bottom: 20px;
    min-height: 20px;
    padding: 0;
    position: relative;
}
.well.light_blue .well-header {
    background: none repeat scroll 0 0 #5DB2FF;
}
.well.light_blue .well-content {
    border-color: #5DB2FF;
    border-style: solid;
    border-width: 1px;
    padding: 15px;
}
.well-header {
    background: none repeat scroll 0 0 #0072C6;
    min-height: 40px;
    padding: 0;
}
.well-header h5 {
    color: #FFFFFF;
    display: block;
    float: left;
    font-size: 13px;
    line-height: 40px;
    margin: 0 0 0 15px;
    min-height: 40px;
}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child,...