JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<ul id="menu">
    <li><a href="#" class="btn btn-1 btn-1d">Home</a></li>
    <li><a href="#"  class="btn btn-1 btn-1d">About Us</a>
        <ul>
            <li><a href="#">The Team</a></li>
            <li><a href="#">History</a></li>
            <li><a href="#">Vision</a></li>
        </ul>
    </li>
    <li><a href="#"  class="btn btn-1 btn-1d">Products</a>
        <ul>
            <li><a href="#">Cozy Couch</a></li>
            <li><a href="#">Great Table</a></li>
            <li><a href="#">Small Chair</a></li>
            <li><a href="#">Shiny Shelf</a></li>
            <li><a href="#">Invisible Nothing</a></li>
        </ul>
    </li>
    <li><a href="#"  class="btn btn-1 btn-1d">Contact</a>
        <ul>
            <li><a href="#">Online</a></li>
            <li><a href="#">Right Here</a></li>
            <li><a href="#">Somewhere Else</a></li>
        </ul>
    </li>
</ul>

CSS

ul { 
    font-family: Arial, Verdana; 
    font-size: 14px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
ul li { 
    display: block; 
    position: relative; 
    float: left; 
} 
li ul { 
    display: none; 
} 
ul li a { 
    display: block; 
    text-decoration: none; 
    color: #ffffff; 
    border-top: 1px solid #ffffff; 
    padding: 5px 15px 5px 15px; 
    background: #1e7c9a; 
    transform: skew(-20deg);
     -o-transform: skew(-20deg);
     -moz-transform: skew(-20deg);
     -webkit-transform: skew(-20deg);
    margin-left: 5px; 
    white-space: nowrap; 
    height:50px;
    line-height:50px;
} 
ul li a:hover { 
background: #3b3b3b; 
} 
li:hover ul { 
    display: block; 
    position: absolute; 
} 
li:hover li { 
    float: none; 
    font-size: 11px; 
} 
li:hover a { background: #3b3b3b; } 
li:hover li a:hover { 
    background: #1e7c9a; 
}
.btn:after {
	content: '';
	position: absolute;
	z-index: -1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.btn-1d {
	overflow: hidden;
}

.btn-1d:after {
	width: 100%;
	height: 0;
	top: 50%;
	left: 50%;
	background: #fff;
	opacity: 0;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.btn-1d:hover,
.btn-1d:active {
	color: #0e83cd;
}

.btn-1d:hover:after {
	height: 100%;
	opacity: 1;
}

.btn-1d:active:after {
	height: 100%;
	opacity: 1;
}