JSFiddle - React, Tailwind, and code Playground

by Kamal Agarwal

HTML

<div class="fixed-top">
     <div class="centered">       
            <div class="workbar">
          <ul class="worknav">      
              <li><a href="works.html">
                TEST BUTTON</a></li>
             <li><a href="works.html">
                <span class="fa-stack fa-lg">
  <i class="fa fa-circle-thin fa-stack-2x"></i>
  <i class="fa fa-arrow-left fa-stack-1x"></i>
</span></a></li>
            <li><a href="index.html#works">
                <span class="fa-stack fa-lg">
  <i class="fa fa-circle-thin fa-stack-2x"></i>
  <i class="fa fa-th-large fa-stack-1x"></i>
</span></a></li>
            <li><a href="works.html">
                <span class="fa-stack fa-lg">
  <i class="fa fa-circle-thin fa-stack-2x"></i>
  <i class="fa fa-arrow-right fa-stack-1x"></i>
</span></a></li>
          </ul>
      </div></div></div>

CSS

.fa {
font-size: 15px;
margin-top: -10px;
margin-bottom: -10px
}

.navbar-height {
    height: 65px;
}

.clearboth {
    clear: both;
}

/*workbar styles
      -------------------------------------------------- */

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background: #FFF;  
  text-align: center;
 height: 67px;    
    margin: 0 auto;
    width: 100%;
    
}


.workbar{
    text-align: center;
    margin: 0 auto;
    background-color:  #ffe6e6;
}

.worknav{
    list-style: none;
    padding-top: 22px;
    padding-left: 0px;
    margin: 0 auto;
    text-align: center;
    
  
    
        
}

.worknav> li {    
    text-align: center;   
    display: inline-block;
    padding-left: 20px;
    padding-right: 20px;
    
   
  
    
    
}

.worknav > li > a {    
    text-decoration: none;
    display:inline-block;
    color: #666;
    line-height:65px;
  
    
    
}

.worknav > li > a:hover,
.worknav > li > a:focus {
  color: yellow;
  background-color: black;
  
   
   
   
  
}


.centered{
    float: none;
     margin-left: auto;
     margin-right: auto;

}

.worktop {
margin-top: 70px;
}