JSFiddle - React, Tailwind, and code Playground

by williamtdavies

HTML

<div id="mainContainer">
    <div class="contentBlock contentBlock--wide">1</div>
    <div class="contentBlockRow">
        <div class="contentBlockRow__group">
            <div class="contentBlock contentBlock--small">2</div>
            <div class="contentBlock contentBlock--small">3</div>
        </div>
        <div class="contentBlock contentBlock--medium contentBlock--tall">4</div>
        <div class="contentBlock contentBlock--small contentBlock--tall">5</div>
    </div>
    <div class="contentBlock contentBlock--wide">6</div>
</div>

CSS

body {
    background-color: #999999;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 70%;
    margin: 15px 0;
    padding: 0;
}
#mainContainer {
    background-color: #FFFFFF;
    height: 500px;
    margin: 0 auto;
    position: relative;
    width: 916px;
}
.contentBlock {
    float:left;
    border: 1px solid orange;
    box-sizing: border-box;
    color: orange;
    font-size: 2em;
    text-align: center;
}
.contentBlock:after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.contentBlockRow{
    float:left;
    margin-top:20px;
    margin-bottom:20px;
    margin-left:-10px;
    margin-right:-10px;
}

.contentBlockRow .contentBlock{    
    margin:0 10px;
 }

.contentBlockRow__group{
    float:left;
}

.contentBlockRow__group .contentBlock{
    clear:both;
}

.contentBlockRow__group .contentBlock:first-child{
    margin-bottom:20px;
}

.contentBlock--small{
    width:136px;
    height: 100px;
}

.contentBlock--medium{
    width:604px;
}

.contentBlock--wide{
    width:100%;
    height: 120px;
}

.contentBlock--tall{
    height: 220px;
}