JSFiddle - React, Tailwind, and code Playground

by vals

HTML

<ul class="container">
<li class="inner">one</li>
<li class="inner">two</li>
<li class="inner">three</li>
<li class="inner">four</li>
<li class="inner">five</li>
<li class="inner">six</li>
<li class="inner">seven</li>
</ul>

CSS

.container {
    left: 46px;
    top: 100px;
    width: 400px;
    height: 400px;
    position: absolute;
    border: 1px solid black;
    background-color: lemonchiffon;
}

.inner {
    background-color: lightsalmon;
    font-size: 20px;
    margin: 20px;
    width: 80px;
    float: left;
}

.container:hover,
.container:hover li {
    -webkit-transform: rotate(180deg);
    -webkit-transition: all 3s;
}