JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
    <div class="dotLine">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="dotLine">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="dotLine">
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>

CSS

#menu {
    display:table;
}

#menu .dotLine span {
    display:inline-block;
    background-color:#000;
    border-radius:50%;
    width:10px;
    height:10px;
    margin-left:5px;
    margin-right:5px;
    -o-transition:all .4s ease;
    -moz-transition:all .4s ease;
    -webkit-transition:all .4s ease;
    -ms-transition:all .4s ease;
    transition:all .4s ease;
}

.dotLine {
    display:table;
    margin-top:4px;
    margin-bottom:4px;
    -o-transition:all .4s ease;
    -moz-transition:all .4s ease;
    -webkit-transition:all .4s ease;
    -ms-transition:all .4s ease;
    transition:all .4s ease;
}

#menu:hover span {
    box-shadow:5px 5px 3px #ddd;
}

.active .dotLine:nth-child(1) {
    transform:rotate(45deg);
}

JavaScript

$(document).ready(function(){
    $('#menu').click(function(){
        $(this).toggleClass('active');
    });
});