JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="maket">
    <div class="content about">О НАС</div>
    <div class="content works">РАБОТЫ</div>
    <div class="content services">УСЛУГИ</div>
    <div class="content contacts">КОНТАКТЫ</div>
</div>

CSS

.maket {
    width: 500px;
}

.content {
    width: 500px;
    height: 50px;
}

.about {
   background-color: red;
}

.works {
   background-color: green;
}

.services {
    background-color: lightblue;
}

.contacts {
    background-color: yellow;
}

JavaScript

$('.content').click(function() {
    $(this).data('clicked', !$(this).data('clicked'));
    
    if ($(this).data('clicked')) {
        $(this).animate({'margin-top':'-50px', 'margin-bottom':'300px'},300)
    }
    else {
        $(this).animate({'margin-top':'0px', 'margin-bottom':'0px'},300)
    }  
});