JSFiddle - React, Tailwind, and code Playground

by JUNXI LI

HTML

<body>
    <div class="container">

       
        

        <div class="content">
            <div id="menu">
                <ul class="parent-menu">
                    <li>
                        <a href="#">Home & Kitchen</a>
                        <ul>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                           
                        </ul>
                    </li>

                    <li>
                        <a href="#">Electronics</a>
                        <ul>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                            
                            <li><a href="#">item</a></li>
                        </ul>
                    </li>

                    <li>
                        <a href="#">Clothing</a>
                        <ul>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                            <
                        </ul>
                    </li>

                    <li>
                        <a href="#">Cars & Motorbikes</a>
                        <ul>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                            <
                        </ul>
                    </li>

                    <li>
                        <a href="#">Books</a>
                        <ul>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                           
                        </ul>
                    </li>

                    <li>
                        <a href="#">Support</a>
                        <ul>
                            <li>
                                <a href="#">Contact Us</a>
                            </li>
                  ...

CSS

/* Basic Style */
html, body{
	height:100%;	
}

body {
   
   	background-color: grey;
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
	
	
	background-size:cover;

}



/*Global Setting*/

.hover{
	float:left;
	display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}

.hover:active, .hover:hover, .hover:focus{
	background-color: rgba(32, 152, 209, 0.5);
}

.container{
	height:100%;
	width:100%;	
}

.content{
	
	position:fixed;
	top:10%;
	left:0%;
	height:90%;
	width:100%;
}

/* NAVIGATION*/

p, ul, li, div, nav { padding:0; margin:0; }
 #menu { 
 overflow: hidden; 
 position:fixed ;
 left:0%;
 top:20%; 
z-index:999; }
.parent-menu { 
background-color: #0c8fff; 
width:180px; 


}
#menu ul { 
list-style-type:none; 
} 
#menu ul li a {
 padding:10px 15px; 
 display:block; 
 color:#fff; 
 text-decoration:none; 
 } 
#menu ul li a:hover { 
background-color:#007ee9; 
    }
#menu ul li:hover  > ul { 
left: 200px; 
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
transition: left 200ms ease-in; 
} 

#menu ul li > ul { 
position: absolute; 
background-color: #333; 
top: 0; 
left: -200px; 
min-width: 200px; 
z-index: 999; 
height: 100%; 
-webkit-transition: left 200ms ease-in; 
-moz-transition: left 200ms ease-in; 
-ms-transition: left 200ms ease-in; 
transition: left 200ms ease-in; 
}
#menu ul li > ul li a:hover { 
background-color:#2e2e2e; 
}

#menu ul li a:focus + ul { 
left: 200px; 
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms...