JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<ul>
    <li class="top active">
        <div class="left"></div>
        <div class="right"></div>
    </li>
    <li class="bottom">
        <div class="left"></div>
        <div class="right"></div>
    </li>
</ul>

CSS

ul li {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0; left: 0;
   z-index: 1;
}

ul li.active {
    z-index: 2;
}

.left,
.right {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
}

.left {
    left: 0;
}

.right {
    right: 0;
}

.top .left,
.top .right {
   background: #34495e;
}

.bottom .left,
.bottom .right {
   background: #ff0000;
}

JavaScript

var dlina = $('.left').width();
$('.left, .right').animate({'width': "-="+dlina}, 1000);