JSFiddle - React, Tailwind, and code Playground

HTML

<div id=contenedormenu>
      <div id=menu>
	      <ul id="nav">
	        <li id="inicio">
            <a href="#home" title="Home">Home</a>
          </li>
          <li id="item1">
            <a href="#home">Menu item 2</a>
          </li>
          <li id="item2">
            <a href="#home">Menu Item 3</a>
          </li>
        </ul>
      </div>
    </div>

CSS

#contenedormenu{
 background-color:#FFFFFF;
 width:100%;
 position:fixed;
 top:0px;
 box-shadow: 0px 1px 2px #888;
 height:40px;
 z-index:1;
}

#menu{
 width:100%;
 height:40px;
 position:fixed;
 top:0px;
}

#nav{ 
 width:100%;
 height:40px;
 top:0px; 
 position:fixed; 
 margin-top:0px;
}

#nav li {
 margin-top:10px; 
 list-style:none;
 display:inline-block;
}

#nav li a {
 color:#5D5D5D;    
 font-family:Lobster, Arial, sans-serif;
 font-size:16px;
 padding:10px 5px 12px 5px;
 text-decoration:none;
 text-shadow:rgba(255, 255, 255, 0.6) 1px 1px 0;
}


#nav a:hover {
 background-color:#f15a24;
 color:white; 
 text-shadow:none;
}