JSFiddle - React, Tailwind, and code Playground

by scispear

HTML

<script src="http://goldcoastlager.com/image/CT1.jpg"></script>
<div id ="navbar">
<ul id="navpiclist">
<li><img src="/CT1.jpg" /> <a href="index.php">Home</a></li>
<li><img src="/image/CT2.jpg" /> <a href="about.php">About</a></li>
<li><img src="/image/CT3.jpg" /> <a href="beers.php">Beers</a></li>
<li><img src="/image/CT4.jpg" /> <a href="contact.php">Contact</a></li>
</ul></div>

CSS

#navbar {
width: 100%;
float: left;
background-color: #FFFFCC;
box-shadow: 5px 5px 30px #888888;
margin-bottom: 5%;
}

#navbar ul {
    list-style-type: none;
    margin:0;
    padding:0;
    display: table;
    width: 100%;
} 

#navbar li {
    display: table-cell;
    text-align: center;
}


#navpiclist img {
    height: 100px;
    display: block;
    margin: 0 auto;
}