JSFiddle - React, Tailwind, and code Playground

by rexfiddle

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap.min.css">
<div class="container-fluid">
    <div class="row-fluid" style="text-align: center">
        <div class="span12">
            <div class="page-header">
              <h1>Header</h1>
            </div>
            <form class="well form-search form-span">
                <input type="text" class="offset1 span7 input-large search-query" />
                <button type="submit" class="span3 btn btn-primary" >Search</button>
            </form>
            <form class="well form-search form-span inline-center">
                <input type="text" class="span7 input-large search-query" />
                <button type="submit" class="span3 btn btn-primary" >Search</button>
            </form>
            <form class="well form-search form-span">
                <div class="input-append span12">
                    <input type="text" class="offset1 span7 input-large search-query" /><button type="submit" class="span3 btn btn-primary" >Search</button>
                </div>
            </form>
        </div>
    </div>
</div>

CSS

.form-span input[type="text"][class*="span"] { float: left; }

.inline-center { text-align: center!important; }
.inline-center [class*="span"] { float: none!important; display: inline-block!important; }

/* From https://github.com/twitter/bootstrap/blob/2.1.0-wip/docs/assets/css/bootstrap.css#L415 */


.row-fluid .offset12 {
  margin-left: 104.25531914893617%;
  *margin-left: 104.14893617021275%;
}

.row-fluid .offset12:first-child {
  margin-left: 102.12765957446808%;
  *margin-left: 102.02127659574467%;
}

.row-fluid .offset11 {
  margin-left: 95.74468085106382%;
  *margin-left: 95.6382978723404%;
}

.row-fluid .offset11:first-child {
  margin-left: 93.61702127659574%;
  *margin-left: 93.51063829787232%;
}

.row-fluid .offset10 {
  margin-left: 87.23404255319149%;
  *margin-left: 87.12765957446807%;
}

.row-fluid .offset10:first-child {
  margin-left: 85.1063829787234%;
  *margin-left: 84.99999999999999%;
}

.row-fluid .offset9 {
  margin-left: 78.72340425531914%;
  *margin-left: 78.61702127659572%;
}

.row-fluid .offset9:first-child {
  margin-left: 76.59574468085106%;
  *margin-left: 76.48936170212764%;
}

.row-fluid .offset8 {
  margin-left: 70.2127659574468%;
  *margin-left: 70.10638297872339%;
}

.row-fluid .offset8:first-child {
  margin-left: 68.08510638297872%;
  *margin-left: 67.9787234042553%;
}

.row-fluid .offset7 {
  margin-left: 61.70212765957446%;
  *margin-left: 61.59574468085106%;
}

.row-fluid .offset7:first-child {
  margin-left: 59.574468085106375%;
  *margin-left: 59.46808510638297%;
}

.row-fluid .offset6 {
  margin-left: 53.191489361702125%;
  *margin-left: 53.085106382978715%;
}

.row-fluid .offset6:first-child {
  margin-left: 51.063829787234035%;
  *margin-left: 50.95744680851063%;
}

.row-fluid .offset5 {
  margin-left: 44.68085106382979%;
  *margin-left: 44.57446808510638%;
}

.row-fluid .offset5:first-child {
  margin-left: 42.5531914893617%;
  *margin-left: 42.4468085106383%;
}

.row-fluid .offset4 {
  margin-left:...