JSFiddle - React, Tailwind, and code Playground

by Forresty

HTML

<nav>
    <div class="outer">
        <div class="inner">
            <div class="logo1">LOGO</div>
            <ul>
                <li><a href="#" class="border">About</a>

                </li>
                <li><a href="#" class="border">My Work</a>

                </li>
                <li><a href="#">Contact</a>

                </li>
            </ul>
        </div>
    </div>
</nav>

CSS

.outer {
     display: table;
     width: 100%;
     height: 100%;
 }
 .inner {
     display: table-row;
     /* vertical-align: middle; */
     /* text-align: center; */
 }
 .centered {
     position: relative;
     display: inline-block;
     width: 100%;
 }
 nav {
     position: fixed;
     width: 100%;
     top: 0;
     height: 4.5em;
     background: #f6f6f6;
 }
 nav ul {
     font-weight: 600;
     font-size: 1em;
     position: relative;
     /* margin-right: 0.625em; */
     background: none;
     /* float: right; */
     height: auto;
     /* padding: 0; */
     /* margin: 0; */
     color: #2b2b2b;
     display: table-cell;
     vertical-align: middle;
     text-align: right;
 }
 nav ul li {
     box-sizing: border-box;
     text-align: center;
     display: inline-block;
     padding: 1.25em;
     margin-left: 0.625em;
 }
 nav ul li a {
     position: relative;
     padding: 0;
 }
 .logo1 {
     display: table-cell;
     font-family: dan_custom-font;
     font-size: 2em;
     /* float: left; */
     /* margin: 0.3em; */
     /* margin-left: 0.7em; */
     cursor: pointer;
     color: #de1b1b;
     text-align: center;
     -webkit-transition: color .3s;
     transition: color .3s;
     vertical-align: middle;
     width: 20%;
 }