JSFiddle - React, Tailwind, and code Playground

by Mohammed Hijas

HTML

<a style="float:right" href="http://www.asmhijas.com/">Visit me</a>


<div id="container1">
    <div id="container2">          
        <ul class="menu">
    <div class="drop">
        <li ><a href="#">Home</a></li>
        <li class="menu-item-has-children highlight"><a href="#" class="">HOVER ME!!</a>    
            <div class="drop">
                <ul class="sub-menu">
                    <li class="menu-item-has-children highlight"><a href="#" class="">2nd Level Page</a>
                        <div class="drop">
                            <ul class="sub-menu">		
                                <li class="highlight"><a href="#">3rd Level Page</a></li>
                                <li class="highlight"><a href="#">Another 3rd Level Page</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </li>
        <li class="highlight"><a href="http://www.asmhijas.com/">Visit me</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a...

CSS

.menu	{
	    padding: 0;
	    margin: 0;	  
	    z-index: 9998;
	    top:0;
	    bottom:0;
	    left:0;
	    background: white;
	   
			-webkit-backface-visibility: hidden;
		  backface-visibility: hidden;
			
	}

	.menu li.highlight {
	    -webkit-transition: all .1s cubic-bezier(.77,0,.175,1) .1s;
	    -moz-transition: all .1s cubic-bezier(.77,0,.175,1) .1s;
	    -ms-transition: all .1s cubic-bezier(.77,0,.175,1) .1s;
	    transition: all .1s cubic-bezier(.77,0,.175,1) .1s;
			-webkit-backface-visibility: hidden;
		  backface-visibility: hidden;
	}

	.menu li.highlight:hover {
	    -webkit-transition: all .3s cubic-bezier(.77,0,.175,1) .7s;
	    -moz-transition: all .3s cubic-bezier(.77,0,.175,1) .7s;
	    -ms-transition: all .3s cubic-bezier(.77,0,.175,1) .7s;
	    transition: all .3s cubic-bezier(.77,0,.175,1) .7s;
        background: pink;
			-webkit-backface-visibility: hidden;
		  backface-visibility: hidden;
	}

	.menu li > .drop li > .drop li.current-menu-item a,
	.menu li > .drop li.current-menu-item a,
	.contact.open a { color: #fff ; }

	.menu li {
	    height: auto;
	    width: 100%;
	    list-style: none;
		 border-bottom: 2px solid #f0f0f0;
		 -webkit-backface-visibility: hidden;
 	  backface-visibility: hidden;
		background: #fff;
		-webkit-user-select: none;
-webkit-touch-callout: none;
	}

	.menu li a {
	    color: #aaa;
	    text-transform: uppercase;
	    font-size:12px;
	    padding: 0 35px;
	    display: inline-block;
	    width: 100%;
		 line-height: 1.4em;
		 height:58px;
		 -moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
	}

		/* Sweep To Right */
		.menu li a {
		  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;
		  position: relative;
		  -webkit-transition-property:...