JSFiddle - React, Tailwind, and code Playground

by Lucas Mattos

HTML

<header>
   <nav>
     <ul>
        <li><a href="smartphones.php">Smartphones</a></li>
        <li><a href="tablets.php">Tablets</a></li>
        <li class="logo"><img src="logo.png" alt="Logo" height="80" width="80" /></li>
        <li><a href="laptops.php">Laptops</a></li>
        <li><a href="desktops.php">Desktops</a></li>    
     </ul>
  </nav>    
</header>

CSS

header {
    width: 100%;
    height: 80px;
}

nav {
    position:relative;
    height:80px;
    margin:auto;
}

nav ul {
    width:400px;
    margin:auto;
    padding:0px;
    position:absolute;
    left:0px;
    right:0px;
    list-style:none;
}

nav ul li{
    display:inline-block;
    padding:0px;
    margin:0px;
}

nav ul li a {
    display:block;
    line-height:80px;
    margin:0px;
    padding:5px;
}

li.logo {
    vertical-align:middle;
    display:inline-table;
}