JSFiddle - React, Tailwind, and code Playground
by HappyCougar
HTML
<div id="as_metro_holder">
<div id="as_metro_l">
<div class="as_metro_line">
<div class="as_metro_block as_metro_block_11" style="background:#8A29C6">
<p>Тест4</p>
</div>
<div class="as_metro_block as_metro_block_11" style="background:#0072c6">
<p>Тест3</p>
</div>
<div class="as_metro_block as_metro_block_11" style="background:#8A29C6">
<p>Тест2</p>
</div>
<div class="as_metro_block as_metro_block_11" style="background:#0072c6">
<p>Тест1</p>
</div>
</div>
</div>
<div id="as_metro_c">
<div class="as_metro_line">
<div class="as_metro_block as_metro_block_21" style="background:#8A29C6">
<p>Тест4</p>
</div>
<div class="as_metro_block as_metro_block_11" style="background:#8A29C6">
<p>Тест2</p>
</div>
<div class="as_metro_block as_metro_block_11" style="background:#0072c6">
<p>Тест1</p>
</div>
</div>
</div>
<div id="as_metro_r">
<div class="as_metro_line">
<div class="as_metro_block as_metro_block_11" style="background:#8A29C6">
<p>Тест4</p>
</div>
<div class="as_metro_block as_metro_block_11" style="background:#0072c6">
<p>Тест3</p>
</div>
<div class="as_metro_block as_metro_block_21" style="background:#8A29C6">
<p>Тест2</p>
</div>
</div>
</div>
</div>CSS
body {
min-width:990px;
max-width:1150px;
background:#fff;
margin:0 auto;
font-size:0px;
}
#as_metro_l, #as_metro_c, #as_metro_r {
width: 33%;
display: inline-block;
vertical-align: top;
box-sizing: content-box;
height: 100%;
}
.as_metro_block_11 {
width: 50%;
display: block;
height: 50%;
float: left;
}
.as_metro_block_21 {
width: 50%;
float: left;
}
.as_metro_line {
height: 50%;
}
.as_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;
}
#as_metro_holder {
min-height: 170px;
height: 1px;
}