JSFiddle - React, Tailwind, and code Playground

by andrei

HTML

<div id="bar"></div>

CSS

body {
    background: #333;
    position: relative;
}
#bar {
    background: #F6F6F6;
    position: absolute;
    width: 300px;
    height: 400px;
    left: 50%;
    top: 20px;
    margin-left: -100px;
    border: 10px solid #222;
    border-radius: 5px;
}
#bar:before {
    display: block;
    width: 100%;
    position: absolute;
    left:0;
    top: 0;
    height: 0px;
    background: #A30D16;
    content:' ';
    -webkit-animation: fightA 20s 1;
}
#bar:after {
    display: block;
    width: 100%;
    position: absolute;
    left:0;
    bottom: 0;
    height: 0px;
    background: green;
    content:' ';
    -webkit-animation: fightB 20s 1;
}
@-webkit-keyframes fightA {
    0% {
        height: 0
    }
    2% {
        height: 25%;
    }
    4% {
        height: 50%;
    }
    6% {
        height: 75%
    }
    8% {
        height: 0
    }
    10% {
        height: 0;
    }
    12% {
        height: 25%;
    }
    14% {
        height: 0%;
    }
    16% {
        height: 0%
    }
    100% {
        height: 0%;
    }
}
@-webkit-keyframes fightB {
    0% {
        height: 0
    }
    2% {
        height: 0;
    }
    4% {
        height: 0;
    }
    6% {
        height: 0
    }
    8% {
        height: 25%
    }
    10% {
        height: 50%;
    }
    12% {
        height: 0%;
    }
    14% {
        height: 25%;
    }
    16% {
        height: 50%;
    }
    18% {
        height: 75%;
    }
    20% {
        height: 100%;
    }
    100% {
        height: 100%;
    }
}