JSFiddle - React, Tailwind, and code Playground

by mrnobody

HTML

<ul class="menu">
    <li class="menu-item"><a href="#1"></a>
    </li>
    <li class="menu-item"><a href="#2"></a>
    </li>
    <li class="menu-item"><a href="#3"></a>
    </li>
</ul>

CSS

.menu {
	    margin: 0 50px;
	    padding: 0;
	    list-style: none;
	}
	.menu-item {
	    float: left;
	    height: 200px;
	    width: 80px;
	    background-color: #B2B2B2;
	    margin-right: 20px;
	    -webkit-transform: skewX(-20deg);
	    transform: skewX(-20deg);
	    -webkit-transition: 0.4s;
	    transition: 0.4s;
	}
	.menu-item>a {
	    display: block;
	    height: 100%;
	}
	.menu-item:hover {
	    background-color: #e36;
	    -webkit-transform: skewX(-20deg) translateY(20px);
	    transform: skewX(-20deg) translateY(20px);
	}