JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>

CSS

div {
    width: 100px;
    height: 100px;
    background-color: red;
    padding-top:15px;
}

div .bar {
    border-bottom:5px solid #ffffff;
    height:10px;
    width:50px;
    display:block;
    margin:5px auto;
}

div .bar:first-child:hover {
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
}

div .bar:last-child:hover {
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    transform: rotate(-90deg);
}