JSFiddle - React, Tailwind, and code Playground

by HappyCougar

HTML

<script src="http://www.astrosoft.ru/bitrix/templates/as_index/js/jquery-ui-custom.min.js"></script>
<link rel="stylesheet" href="http://www.astrosoft.ru/bitrix/templates/as_index/css/jquery-ui-custom.css">
<script src="http://www.astrosoft.ru/bitrix/templates/as_index/js/jquery-migrate-1.2.1.min.js"></script>
<div id="metro_holder">
    <div id="metro_l">
        <div class="metro_line">
            <div class="metro_inner_head metro_head">
                <img src="http://nephalemcube.ru/astrosoft/icon_lync.png" alt="" />
                <span>Управляй работой с клиентами</span>
            </div>
            <div class="metro_block metro_block_12 metro_block_blue">
                <p><b>SCS.</b><br />
                    Обрабатывайте каждый входящий звонок
                </p>
                <div class="metro_block_hover_content">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lobortis sem sit amet ligula lobortis viverra. Duis eu ligula vel dui faucibus bibendum. Proin at augue est.
                    </p>
                </div>
            </div>
            <div class="metro_block metro_block_12 metro_block_blue">
                <p><b>Онлайн-консультант</b><br />
                    Отвечайте каждому посейтителю сайта
                </p>
                <div class="metro_block_hover_content">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lobortis sem sit amet ligula lobortis viverra. Duis eu ligula vel dui faucibus bibendum. Proin at augue est.
                    </p>
                </div>
            </div>
        </div>
        <div class="metro_line">
            <div class="metro_inner_head metro_head">
                <img src="http://nephalemcube.ru/astrosoft/icon_lync.png" alt="" />
                <span>Управляйте рабочим процессом</span>
            </div>
            <div class="metro_block metro_block_12...

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:100%;
    display:block;
    height: 50%;
}
.metro_head {
    font-size:18px;
    color: #333333;
}
.metro_inner_head {
    height:16%;
}
.metro_inner_head + .metro_block, .metro_inner_head + .metro_block + .metro_block {
    height: 84%;
}
.metro_block_12 {
    width:50%;
}
.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;
    font-family: 'Open Sans', sans-serif;
}
.metro_line {
    height: 50%;
}
.metro_head img {
    position: relative;
    margin-right: 8px;
    left: 5px;
    top:3px;
}
.metro_head.metro_head_outer {
    height: 8%;
}
.metro_head_outer + .metro_line, .metro_head_outer + .metro_line + .metro_line {
    height: 46%;
}
.metro_block_hover_content {
    background: rgba(0, 0, 0, 0.80);
    width: 100%;
    height: 100%;
    position: relative;
    display:none;
    cursor: pointer;
}
.metro_block_hover_content p {
    position:relative;
    top:0px;
   ...

JavaScript

$(window).resize(function() {
    var pazzle_height = 340;
    $("#metro_holder").css("min-height",(pazzle_height + (pazzle_height - pazzle_height * (1150/$("body").width()))));
});
$(document).on('mouseenter','.metro_block', function (event) {
   $(this).find('.metro_block_hover_content').fadeIn(500);
}).on('mouseleave','.metro_block',  function(){
   $(this).find('.metro_block_hover_content').fadeOut(500);
});
$(window).load(function() {
    $(window).trigger("resize")
})