JSFiddle - React, Tailwind, and code Playground

Bootstrap Forms

by Jennifer Perrin

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<form class="panel form-horizontal form-bordered" name="form-account">
    <div class="panel-body pt0 pb0">
        <div class="form-group header bgcolor-default">
            <div class="col-md-12">
                 <h4 class="semibold text-primary mt0 mb5">Account</h4>

                <p class="text-default nm">Change your basic account and language settings.</p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">Username</label>
            <div class="col-sm-8">
                <input class="form-control" name="username" value="" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">Email</label>
            <div class="col-sm-8">
                <input class="form-control" name="email" type="text">
                <p class="help-block">Email will not be publicly displayed. <a href="javascript:void(0);">Learn more.</a>
                </p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">language</label>
            <div class="col-sm-5">
                <select class="form-control" name="language">
                    <option>Select Language...</option>
                    <option value="eu">Basque - Euskara (beta)</option>
                    <option value="ca">Catalan - català (beta)</option>
                    <option value="cs">Czech - Čeština (beta)</option>
                    <option value="da">Danish - Dansk</option>
                    <option value="nl">Dutch - Nederlands</option>
                    <option value="en"...

CSS

@import url(http://fonts.googleapis.com/css?family=Lato);
* { font-family:'Lato'; border-radius: 0 !important; }

.form-horizontal.form-bordered .form-group, .form-horizontal.form-striped .form-group {
    border-top-color: #e0e7e8 !important;
    border-top-style: solid;
    border-top-width: 1px;
    margin-bottom: 0;
    padding-bottom: 15px;
    padding-top: 15px;
}
.form-horizontal .form-group {
    margin-left: -15px;
    margin-right: -15px;
}

.form-horizontal .control-label, .form-horizontal .radio, .form-horizontal .checkbox, .form-horizontal .radio-inline, .form-horizontal .checkbox-inline {
    margin-bottom: 0;
    margin-top: 0;
    padding-top: 7px;
}
.control-label {
    color: #6f6f6f;
    font-weight: 300;
}

.bgcolor-default {
    background-color: #f6f6f6 !important;
    border-color: #cfd9db !important;
    color: #444 !important;
}

JavaScript

// Bootstrap v3.1.0
// Font Awesome 4.1.0