JSFiddle - React, Tailwind, and code Playground

by web_developer_888

HTML

<div id='header'>
    <ul>
        <li>item 1</li>
        <li class='cls1'>item 2
            <ul id='sub_1'>
                <li>item A</li>
                <li>item B</li>
                <li>item C</li>
            </ul>
        </li>
        <li>item 3</li>
    </ul>
</div>

CSS

#header{
    
    height:50px;
border: 1px solid #FFFFFA;
    display:block;
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #2D2E2E 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #2D2E2E 100%);

/* Opera */ 
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #2D2E2E 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #2D2E2E));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #2D2E2E 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #FFFFFF 0%, #2D2E2E 100%);
}


ul li{
   width: 50px; 
    cursor: pointer;
/*     height: 50px; */
 /*    border: 1px solid #FFFFFA;
    border-bottom: 0px 
    border-top: 0px  */
        height:inherit;
        border-top:    0px solid  #FFFFFA;
border-right:  1px solid #FFFFFA;
border-bottom: 0px solid #FFFFFA;
border-left:   1px solid  #FFFFFA;
        
    padding: 5px;
 
    
    float: left;
  display: block;

    text-decoration: none;
   list-style-type: none;
    margin-top: -16px;
    text-align: center;
padding: 12px;
    height:initial;

}

ul:not(#sub_1) li:hover{
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #282E0B 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #282E0B 100%);

/* Opera */ 
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #282E0B 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #282E0B));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #282E0B 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #FFFFFF 0%, #282E0B 100%);
    color: white;
}

#header ul{
 /*    height:100%; */     
...