JSFiddle - React, Tailwind, and code Playground
by prince4prodigy
HTML
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">
</div>
<div class="span3"></div>
<div class="span3"></div>
</div>
</div>
CSS
.container-fluid{
margin-top: 100px;
}
.span6{
background-color:#e79132;
height:200px;
}
.span3{
background-color: #63c0dc;
}
.span3:last-child{
background-color: #cc57c0;
}
/* Large desktop */
@media (min-width: 1200px) {
.span6{
height: 200px;
}
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
.span6{
height: 150px;
}
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
.span6{
height: 200px;
}
}
/* Landscape phones and down */
@media (max-width: 480px) {
.span6{
height: 70px;
}
}
/*!
* Bootstrap v2.3.2
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;line-height:0;content:""}.clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}a:hover,a:active{outline:0}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{width:auto\9;height:auto;max-width:100%;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}#map_canvas img,.google-maps...