JSFiddle - React, Tailwind, and code Playground

by Manju06

HTML

<div class="main-nav">
          <ul class="nav">
          	<li><a href="#">HOME</a></li>
          	<li><a href="#">METHODOLGY</a></li>
          	<li><a href="#">PORTFOLIO</a></li>
          	<li><a href="#">SERVICES</a></li>
          	<li><a href="#">TEAM</a></li>
          	<li><a href="#">CONTACT</a></li>
          </ul>
        </div>

CSS

html, body {
    min-height:100%;
    max-height:100%;
    height:100%;
    font-family:Oswald, sans-serif, Arial;
    font-size:14px;
    background:#fff
}
a {
    text-decoration:none
}
li {
    list-style:none
}
ul {    
    margin:0
}
.main-nav {
    width:100vh;    
    height:45px;
    position:fixed;
    background:#4c4c4c;
    -webkit-transform-origin: left top;
    -webkit-transform:rotate(-90deg) translateX(-100%);
}
ul.nav {    
    margin:0 auto;
    height:100%;        
}

ul.nav li {    
    margin-right:20px;
    float:right;
    height:100%;
    line-height:45px;
}
ul.nav li a {           
    color:#fff;    
}