JSFiddle - React, Tailwind, and code Playground

by chrisfrisina

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<div class="row" id="case1">    
    <div class="b span8">business</div> 
    <div class="ab span4">abstract</div>   
    <div class="w span12">work</div>
    <div class="ac span12">academic</div>
    <div class="s span12">skills</div>
</div>
<br>
<!-- Change via JS or CSS the first cell class from span8 -> span12 -->
<div class="row" id="case2">    
    <div class="b span12">business</div> 
    <div class="ab span4 hide">abstract</div>  
    <div class="w span12">work</div>
    <div class="ac span12">academic</div>
    <div class="s span12">skills</div>
</div>
<br>
<div class="row" id="case3">    
    <div class="b span8 hide">business</div> 
    <div class="ab span4 offset8">abstract</div>   
    <div class="w span12">work</div>
    <div class="ac span12">academic</div>
    <div class="s span12">skills</div>
</div>
<br>
<div class="row" id="case4">    
    <div class="b span8 hide">business</div> 
    <div class="w span8">work</div>
    <div class="ab span4">abstract</div>   
    <div class="ac span12">academic</div>
    <div class="s span12">skills</div>
</div>

CSS

body{ padding: 10px; }

[class^="span"] {
    background-color: red;
    text-align: center;
    color: #FFF;
    margin-bottom: 1px;
}
.b { height:40px; background-color: orange }
.ab { height:20px; background-color: yellow }
.w { height:40px; background-color: green }
.ac { height:40px; background-color: blue }
.s { height:40px; background-color: purple }

.row { background-color: red; }
.hide { display: none; }
.right { float: right; }
.left { float: left; }
.clear {clear: left; }