JSFiddle - React, Tailwind, and code Playground

by alga noto

HTML

<div id="menu-container">
    <div id="menu-wrapper">
        <div id="logo"></div>
        <ul id="menu">
            <li><a href="#">About us</a>

            </li>
            <li><a href="#">Products</a>

                <ul id="sub">
                    <li><a href="#">MissionPharma</a>

                    </li>
                    <li><a href="#">NanoRepro</a>

                    </li>
                    <li><a href="#">LMB Technologie</a>

                    </li>
                    <li><a href="#">Turmaks</a>

                    </li>
                </ul>
            </li>
            <li><a href="#">Contact</a>

            </li>
            <div class="lang"> <a href="#" class="active">ENG</a>
 <a href="#">PT</a>

            </div>
        </ul>
    </div>
</div>
<div id="background">
    <div id="text-box">
         <h1>Consigo</h1>

         <h2>nos momentos certos</h2>

         <h3>Ponemos as ofertas mais inovadoras na area da saude a disposicao da populacao angolana.</h3>

    </div>
    <div id="icon-heart"><img src="https://dl.dropboxusercontent.com/u/59895113/icon_heart-03.png"/></div>
</div>
<div id="content-container">
    <div class="area-icons" id="one">
        <p>Medical Kits and Hospital Equipment</p>
    </div>
    <div class="area-icons" id="two">
        <p>Blood Components</p>
    </div>
    <div class="area-icons" id="three">
        <p>Rapid Self-Diagnostic Tests</p>
    </div>
    <div class="area-icons" id="four">
        <p>Field Hospitals and Mobile Units</p>
    </div>
</div>

CSS

body {
    font-family:'Open Sans', sans-serif;
    margin:0;
    padding:0;
}
#logo {
    width:120px;
    height:120px;
    background:blue;
    float:left;
    background: url('https://dl.dropboxusercontent.com/u/59895113/PNsaude-01.png') no-repeat center;
}
#menu-wrapper {
    width:1000px;
    height:120px;
    margin:0 auto;
}
#menu-container {
    width:100%;
    height:120px;
    position:fixed;
    top:0;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.11);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.11);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.11);
    background-color: #fff !important;
}
#menu {
    list-style:none;
    float:right;
    display:inline;
    padding:0;
    margin:0;
}
#menu > li {
    display:inline-block;
    padding:0 2em 0 2em;
    margin:0;
    font-size:14px;
    line-height:120px;
}
#menu > li a {
    vertical-align:middle;
    text-decoration:none;
    color:gray;
}
#background {
    height:1200px;
    width:1000px;
    margin:0 auto;
    background:white;
    margin-top:120px;
}
#sub {
    padding:0;
    position: absolute;
    top: 120px;
    visibility: hidden;
}
#sub li {
    background: white;
    display: block;
    color: gray;
    border-bottom: 1px solid gray;
    font-weight:400!important;
    font-size:12px;
    padding:0 60px 0 14px;
    line-height:4em;
    margin-left:-14px;
}
#sub li a {
    text-decoration:none;
    color:gray;
}
#menu li:hover #sub {
    display: block;
    visibility: visible;
}
.lang {
    display: inline;
    padding-left: 8px;
    margin-left: 12px;
    border-left: 4px solid #eee;
}
.lang a {
    display: inline-block;
    margin-left:10px;
    text-decoration:none;
    color:gray;
    font-size:12px;
}
.lang .active, .lang > a:hover {
    font-weight:600;
}
#menu > li:hover > a, #sub li:hover a {
    color:#0696d7;
}
#background {
    height:520px;
    display:table;
}
#icon-heart {
    display:table-cell;
    vertical-align:middle;
    
    
}
#text-box {
    display:table-cell;
   ...