JSFiddle - React, Tailwind, and code Playground

HTML

<div class="icon-menu">
        <div class="first-line"></div>
        <div class="second-line"></div>
</div>

CSS

.icon-menu {
    width: 100px;
    height: 100px;
    background-color: #777;
    box-sizing: border-box;
    position: relative;
}

.first-line, .second-line {
    background-color: #fff;
    height: 10px;
    border-radius: 5px;
    width: 90px;
    margin: 0 auto;
    transition: all 0.3s;
}

.first-line {
    position: relative;
    top: 15px;
}

.second-line {
    position: relative;
    top: 60px;
}
.icon-menu.act .first-line{
    transform: rotate(45deg);
    top: 45px;
}
.icon-menu.act .second-line{
    transform: rotate(-45deg);
    top: 35px;
}

JavaScript

$('.icon-menu').click(function(){
    $(this).toggleClass('act');
});

/*
$('.icon-menu').toggle(
    function() {
        console.log('func1');
        $('first-line').css({"transform":"rotate(15deg)"}); 
        $('second-line').css({"transform":"rotate(15deg)"});
    },
    function() {
        console.log('func2');
        $('first-line').css({"transform":"rotate(-15deg)"});
        $('second-line').css({"transform":"rotate(-15deg)"});
    }
);
*/