JSFiddle - React, Tailwind, and code Playground

by Mr_Vasu

HTML

<div class="content">
    <div></div>
     

</div>
    <div class="slide"></div>

CSS

.content{
    width:100px;
    height:30px;
    background:green;
    padding:30px;
    position:relative;
}
.content>div{
    width:50px;
    height:2px;
    
    background:#fff;
}
.content>div:after,.content>div:before {
    content:"";
    width:50px;
    background:#fff;
    height:2px;
    position:absolute;
    transition:all 1s;

}
.content>div.active:after{
    transform:rotate(45deg);
    top:30px;
}
.content>div.active:before{
    transform:rotate(-45deg);
    top:30px
}
.content>div:after{
       top:35px; 
}
div:before {
    top:25px;
}
.slide{
    height:100px;
    width:80px;
    background:red;
    position:absolute;
    top:0;
    display:none;
}

JavaScript

var div = document.querySelector('.content');
div.onclick = function (e){
    var child = e.currentTarget.children[0];
    child.classList.toggle("active");
    
}