JSFiddle - React, Tailwind, and code Playground

by mrnobody

HTML

<div class="wrapper">
    <div class="header">International</div>
    <div class="menu">
        <ul>
            <li> <a href="#">Home</a>
            </li>
            <li><a href="#">Portfolio</a>
            </li>
            <li><a href="#">Become a member</a>
            </li>
            <li><a href="#">Partners</a>
            </li>
            <li><a href="#">About us</a>
            </li>
            <li><a href="#">Contacts</a>
            </li>
        </ul>
    </div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

CSS

.wrapper {
    width:1024px;
    height:680px;
    outline: 5px solid #cc0000;
    margin: auto auto;
}
.header {
    height: 82px;
    outline: 3px solid #000000;
    font: 48px Mistral;
    color: #afafaf;
    padding-left: 52px;
}
.menu {
    width:960px;
    height: 42px;
    outline: 3px solid #d1d;
    margin:0 auto;
    padding:0;
    background-color: #B0B0B0;
    font: 18px Arial, sans-serif;
    color:#ffffff;
}
.menu ul {
    display: table;
    width: 100%;
    
}
.menu li a {
    text-decoration: none;
    color:#ffffff;
    line-height: 42px;
}
.menu li {
    display: table-cell;
    text-align: center;
}
.menu a:hover {
    text-decoration: underline;
    
}