JSFiddle - React, Tailwind, and code Playground

by Joshua Powell

HTML

<div id="header">
    <ul>
        <li><a href="#">Durka Durk</a>
        </li>
        <li><a href="#">Durka Durk</a>
            <li><div class="navimg"></div></li>
            <li><a href="#">Durka Durk</a></li>
        </li>
        <li><a href="#">Durka Durk</a>
        </li>
    </ul>
</div>

CSS

#header {
    margin:0 auto;
    width:1000px;
    height: 300px;
    background-color:#666;
}

#header .navimg {
    width: 300px;
    height: 300px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    background: url(../images/header_img.png) no-repeat;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    position: relative;
    top: 0;
}

#header ul {
    list-style-type: none;
}

#header ul li {
    float: left;
}