JSFiddle - React, Tailwind, and code Playground

by andreasisaak

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div id="containerFirstRow" class="row-fluid">
    
    <div class="inside">

    <div id="left" class="span4">         
        
         <h3>kurze Überschrift 1</h3>
        <div class="competitionInfo">
            <div id="date">am 03. Juni 2013</div>
            <div id="startTime">Startzeit: 10:00</div>                    
        </div>
        <p>
            <button class="btn btn-large btn-custom-lightenBlue" type="button">Large button</button>           
        </p>
        
    </div>
    <div id="middle" class="span4">
          
        <h3>Ganz lange Überschrift 2</h3>
            <div class="competitionInfo">
            <div id="date">am 03. Juni 2013</div>
        <div id="startTime">Startzeit: 10:00</div>                   
        </div> 
        <p>
            <button class="btn btn-large btn-custom-lightenBlack" type="button">Large button</button>           
        </p> 

    </div>
    <div id="right" class="span4">
        
        <h3>Das ist eine ganz ganz lange Überschrift drei</h3>
        <div class="competitionInfo">
            <div id="date">am 03. Juni 2013</div>
            <div id="startTime">Startzeit: 10:00</div>                   
        </div>
        <p>
            <button class="btn btn-large btn-custom-lightenGreen" type="button">Large button</button>           
        </p>

    </div>  

    <div style="clear:both;"></div> 
    
    <div class="columnBackgrounds">
        <div id="leftBg" class="span4"></div>
        <div id="middleBg" class="span4"></div>
        <div id="rightBg" class="span4"></div>
    </div>
        
    </div>

</div>

CSS

div {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
#containerFirstRow {
    width: 100%;
    padding: 25px;                    
    max-width: 1350px;
    margin-left: auto;
    margin-right: auto;
}
#containerFirstRow .inside {
    position:relative;
}
#containerFirstRow .span4 {
    position:relative;
    z-index:999;
    padding:30px 30px 30px 50px;
}
.columnBackgrounds {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}
.columnBackgrounds .span4 {
    height:100%;
    z-index:1;
    padding:0;
}
#leftBg {
	border-left: 30px solid #0a58a5;
	border-top: 30px solid #0a58a5;
	border-top-right-radius: 30px;
	box-shadow: 3px 3px 5px 6px #ccc;
}
#rightBg {
	border-left: 30px solid #a1b209;
	border-top: 30px solid #a1b209;
	border-top-right-radius: 30px;
	box-shadow: 3px 3px 5px 6px #ccc;	
}
#middleBg {
	border-left: 30px solid #333;
	border-top: 30px solid #333;
	border-top-right-radius: 30px;
	box-shadow: 3px 3px 5px 6px #ccc;
}