JSFiddle - React, Tailwind, and code Playground

by Kehlan Krumme

HTML

<div id="menuWrap">
    <div class="top-links">
        <div id="top-nav"> <a class="top-link" href="#" title="My Profile">
            <span>MY PROFILE</span>
        </a>
 <a class="top-link" href="#" title="Account Profile">
            <span>ACCOUNT PROFILE</span>
        </a>
 <a class="top-link" href="#" title="Sign Out">
            <span>SIGN OUT</span>
        </a>

        </div>
    </div>
    <div class="links">
        <div id="nav"> <a class="home-link home-link-left" href="#" title="My Component Books">
            <span>MY COMPONENT BOOKS</span>
        </a>
 <a class="home-link" href="#" title="New Component Book">
            <span>NEW COMPONENT BOOK</span>
        </a>
 <a class="home-link" href="#" title="System Logs">
            <span>SYSTEM LOGS</span>
        </a>

        </div>
    </div>
</div>

CSS

/*----------- TOP NAVIGATION -----------*/
 #menuWrap {
    width: 400px;
    float: right;
    background: #222;
}
.top-links {
    height: 31px;
    margin: 0 0 0 0;
    width: auto;
    white-space: nowrap;
}
.top-link {
    margin-top: 50px;
    font: 7pt Georgia, serif;
    color: #E1915C;
    text-align:center;
    text-decoration: none;
    line-height: 34px;
    padding: 10px;
}
#top-nav {
    float: right;
    margin: 0 0 0 0;
    overflow: hidden;
}
/*----------- NAVIGATION -----------*/
 .links {
    margin-top: 20px;
    min-width: 120px;
    float: right;
    height: 36px;
}
.home-link {
    font: 7.25pt Georgia, serif;
    color: #E1915C;
    text-decoration: none;
    font-weight: bold;
    border-right: 1px solid #E1E1E1;
    text-align: center;
    line-height: 36px;
    width: auto;
    padding: 10px;
}
.home-link:hover {
    color: #369AAA;
}
.home-link-left {
    border-left: 1px solid #E1E1E1;
}
.home-link-right {
    border-right: 1px solid #E1E1E1;
}
#nav {
    position: absolute;
    float: right;
    overflow: hidden;
}