JSFiddle - React, Tailwind, and code Playground

by Kalu Singh Rao

HTML

<div id="pages">
    <ul>
        <li><a href="#"><img class = "home_icon" src="img/home_icon.png"></a>
        </li>
        <li><a href="#">JOURNAL</a>
        </li>
        <li><a href="#">TIMELINE</a>
        </li>
        <li><a href="#">GALLERY</a>
        </li>
        <li><a href="#">CONTACT</a>
        </li>
    </ul>
</div>

CSS

body {
    background:url(http://lorempizza.com/800/800);
}
#pages ul {
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    list-style-type: none;
    border:5px solid;
    border-radius:15px;
    width: 700px;
    font-family:'Open Sans', sans-serif;
    font-size: 20px;
    border-color: white;
}
#pages ul li {
    display: inline-block;
    margin-left: 45px;
    vertical-align:middle;
}
#pages ul li a {
    text-decoration: none;
    color: white;
}
.home_icon {
    padding-top: 3.5px;
}