JSFiddle - React, Tailwind, and code Playground

by speaktorob

HTML

<div class="header">
    <img class="main" src="http://www.google.co.uk/logos/2011/noyce11-hp.jpg" />
    <ul>
        <li>
            <a href="/home">Home</a>
        </li>
        <li>
            <a href="/about">About</a>
        </li>
        <li>
            <a href="/blog">Blog</a>
        </li>
        <li>
            <a href="/contact">Contact</a>
        </li>
    </ul>
</div>

CSS

.header {
    overflow   : hidden;
    width      : 100%;
    height     : 250px;
    background : #DFDFDF;
    font-family : Verdana, Arial, sans-serif;
}
.main {
    float  : left;
    border : 1px solid #000;
    height : 75px;
}
ul {
    display: inline-block;
    height : 75px;;
}
ul li {
    float : left;
    padding     : 0 5px;
    width  : 100px;
    height : 75px;
    line-height : 75px;
}
ul li a {
    display     : block;
    width       : 100px;
    height      : 50px;
    text-align  : center;
    font-size   : 125%;
    font-weight : bold;
    text-decoration : none;
    color       : #FFF;
    border      : 1px solid #000;
    background  : #CA0;
    vertical-align : middle;
}