JSFiddle - React, Tailwind, and code Playground

by alga noto

HTML

<div id="menu-container">
    <div id="menu-wrapper">
        <div id="logo">
            <img src="https://dl.dropboxusercontent.com/u/59895113/PNsaude-01.png" />
        </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-container">
    <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 class="about-bt">
                <p>about us</p>
            </div>
        </div>
        <!--close textbox-->
        <div id="icon-heart">
            <img src="https://dl.dropboxusercontent.com/u/59895113/icon_heart.png" />
        </div>
    </div>
    <!--close background-->
</div>
<!--close background-container-->

CSS

body {
    font-family:'Open Sans', sans-serif;
    margin:0;
    padding:0;
}
#logo {
    width:80px;
    height:80px;
    float:left;
}
#logo img {
    max-width:80%;
    height:auto;
    display:block;
    margin: 0 auto;
    margin-top:10px;
}
#menu-wrapper {
    width:1000px;
    height:80px;
    margin:0 auto;
}
#menu-container {
    width:100%;
    height:80px;
    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:80px;
}
#menu > li a {
    vertical-align:middle;
    text-decoration:none;
    color:gray;
}
#background {
    height:1200px;
    width:1000px;
    margin:0 auto;
    background:white;
    margin-top:80px;
}
#sub {
    padding:0;
    position: absolute;
    top: 80px;
    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:620px;
    display:table;
    background:#3598DB;
    width:1024px;
}
#background-container {
    height:620px;
    width:100%;
   ...