JSFiddle - React, Tailwind, and code Playground

by Linda Rian

HTML

<div id="metro_holder">
    <div id="metro_l">
        <div class="metro_line">
            <div class="metro_block metro_block_11 metro_block_blue">
                    <p>
                        <b>Lorem ipsum dolor sit amet</b>
                    </p> 
                </div>
                <div class="metro_block metro_block_11 metro_block_blue">
                    <p>
                        <b>Lorem ipsum dolor sit amet</b>
                    </p> 
                </div>
                <div class="metro_block metro_block_11 metro_block_blue">
                    <p>
                        <b>Lorem ipsum dolor sit amet</b>
                    </p> 
                </div>
                <div class="metro_block metro_block_11 metro_block_blue">
                    <p>
                        <b>Lorem ipsum dolor sit amet</b>
                    </p> 
                </div>
        </div>
    </div>

    <div id="metro_c">
        <div class="metro_line">
            
            <div class="metro_block metro_block_12 metro_block_orange">
                <p>
                    <b>Lorem ipsum dolor sit amet</b>
                </p> 
            </div>
            
                <div class="metro_block metro_block_11 metro_block_orange">
                    <p>
                        <b>Lorem ipsum dolor sit amet</b>
                    </p> 
                </div>
                <div class="metro_block metro_block_11 metro_block_orange">
                    <p>
                        <b>Lorem ipsum dolor sit amet</b>
                    </p> 
                </div>
            
        </div>
    </div>
    <div id="metro_r">
        <div class="metro_line">
            <div class="metro_block metro_block_12 metro_block_yellow">
                <p>
                    <b>Lorem ipsum dolor sit amet</b>
                </p> 
            </div>
                <div class="metro_block metro_block_11 metro_block_yellow">
                     <p>
        ...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,300&subset=latin,cyrillic);
body {
    min-width:990px;
    max-width:1150px;
    background:#fff;
    margin:0 auto;
    font-size:0px;
}
.metro_block {
    display:inline-block;
    vertical-align:top;
    background-clip: content-box !important;
    box-sizing: border-box;
    padding: 4px;
    color:#fff;
    font-size:11px;
    height: 100%;
    position:relative;
}
.metro_block p b {
    font-size:13px;
    font-weight:normal;
}
.metro_block p {
    position:absolute;
    bottom: 0px;
    left: 0px;
    margin: 0px;
    padding: 12px;
    box-sizing: border-box;
}
.metro_block_11 {
    width:50%;
    display:block;
    height: 50%;
    float:left
}
.metro_head {
    font-size:18px;
    color: #333333;
}
.metro_block_12 {
    width:50%;
    float:left
}
.metro_block_22 {
    width:100%;
}
.metro_block_blue {
    background:#0072c6;
}
.metro_block_orange {
    background:#ff5722;
}
.metro_block_yellow {
    background:#f9bc07;
}
#metro_l, #metro_c, #metro_r {
    width:33%;
    display:inline-block;
    vertical-align: top;
    box-sizing: content-box;
    height: 100%;
}
.metro_inline {
    display:inline-block;
    vertical-align:top;
    width: 50%;
    height: 100%;
}
#metro_holder {
    min-height: 365px;      
    height: 1px;
}
.metro_line {
    height: 50%;
}


.metro_block_12.metro_block_orange {
    float: right;
}