JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
</ul>

CSS

ul{
    display: table;
    width: 100%;
    table-layout: fixed;
    background: #ccc;
    height: 50px;
    max-width: 600px;
    margin: 35px auto;
    overflow: hidden;
    -webkit-transform: rotate(-5deg) skew(-5deg) translate3d( 0, 0, 0);
    transform: rotate(-5deg) skew(-5deg) translate3d( 0, 0, 0);
}
ul > li{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
ul > li a{
    display: block;
    color: #000;
    text-decoration: none;
    font-size: 18px;
    line-height: 50px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
ul > li:first-child{
    background: #FFA500;
}
ul > li:nth-child(2){
    background: #000;    
}
ul > li:nth-child(2) a{
    color: #fff;   
}
ul > li:nth-child(3){
    background: #00f;
}
ul > li:nth-child(4){
    background: #f00;
}
ul > li:nth-child(5){
    background: #228B22;
}
ul > li:nth-child(6){
    background: #A52A2A;
}

ul > li a:hover{
    background: #8B0000;
    color: #fff;
}