JSFiddle - React, Tailwind, and code Playground

by brunomuller

HTML

<div class="wrapper">
    <div class="box video3"></div>
    <div class="box video4"></div>
    <div class="box video1"></div>
    <div class="box video2"></div>
</div>

CSS

.wrapper {
    width: 100%;
    height: 300px;
    background: #c3c3c3;
}

.box {
    float: left;
    height: 100%;
    width: 100%;
    -webkit-transition: all 1s ease-in-out;
}

.video1 {
    background-color: yellow;
}

.video2 {
    background-color: red;
    width: 0%;
}
.video3 {
    background-color: blue;
    width: 50%;
    height: 0%
}
.video4 {
    background-color: green;
    width: 50%;
    height: 0%
}

JavaScript

setTimeout(function(){
    $('.video1, .video2').css('width','50%');
    
    setTimeout(function(){
        $('.box').css('height','50%');
    },1000);
    
}, 500);