JSFiddle - React, Tailwind, and code Playground

by Nikolai

HTML

<div class="content">
    <div class="top">
        Top
    </div>
    <div class="main">
        Main
    </div>
</div>

CSS

.main{
    width:20%;
    height: 10%;
    background-color: rgba(100,100,100,0.7);
    text-align: center;
    position: fixed;
    top: 12%;
    transition:all 1.0s
}
.top{
    width: 20%;
    height: 10%;
    text-align: center;
    background-color: rgba(300,50,50,0.7);
    position: absolute;
}
.toggle{
    transform: translateY(100px);
    transition:all 1.0s
}

JavaScript

$('.main').click(function(){
    $('.main').toggleClass('toggle');
})