JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav one">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

<ul class="nav two">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

CSS

.nav {
    margin-top: 120px;
    text-align: center;
}

li {
    padding: 10px 5px;
    vertical-align: middle;
    display: inline-block
}

li:hover {
    background-color: #FFF;
    cursor: pointer
}

.nav.one {
    transform: rotate(-2deg);
    background-color: lightblue
}

.nav.two {
    transform: rotate(20deg);
    background-color: red
}