JSFiddle - React, Tailwind, and code Playground

by bluey

HTML

<div class='obstacles'>
    <div class='ob ob1a'></div>
    <div class='ob ob1b'></div>
</div>

CSS

/* Obstacle 1 */
 .ob1a {
    /* Top */
    background-color:#68f;
    position:absolute;
    width:100px;
    height:30%;
    margin-top:-5px;
    top: 0;
    right:10px;
    z-index: 1000;
}
.ob1b {
    /* Bottom */
    background-color:#68f;
    position:absolute;
    width:100px;
    height: 30%;
    margin-bottom:-5px;
    bottom: 0;
    right:10px;
    z-index: 1000;
}
/* Obstacle 2 */
 .ob2a {
    /* Top */
    background-color:#68f;
    position:absolute;
    width:100px;
    height:20%;
    padding:3px;
    margin-top:5px;
    top:0;
    right:-450px;
    z-index: 1000;
}
.ob2b {
    /* Bottom */
    background-color:#68f;
    position:absolute;
    width:100px;
    height:40%;
    padding:3px;
    margin-top:5px;
    bottom:0;
    right:-450px;
    z-index: 1000;
}
/* Obstacle 3 */
 .ob3a {
    /* Top */
    background-color:#68f;
    position:absolute;
    width:100px;
    height:40%;
    padding:3px;
    margin-top:5px;
    top:0;
    right:-450px;
    z-index: 1000;
}
.ob3b {
    /* Bottom */
    background-color:#68f;
    position:absolute;
    width:100px;
    height:20%;
    padding:3px;
    margin-top:5px;
    bottom:0;
    right:-450px;
    z-index: 1000;
}
/* Obstacle 4 */
 .ob4a {
    /* Top */
    background-color:#68f;
    position:absolute;
    width:100px;
    height:10%;
    padding:3px;
    margin-top:5px;
    top:0;
    right:-450px;
    z-index: 1000;
}
.ob4b {
    /* Bottom */
    background-color:#68f;
    position:absolute;
    width:100px;
    height:50%;
    padding:3px;
    margin-top:5px;
    bottom:0;
    right:-450px;
    z-index: 1000;
}
/* Obstacle 5 */
 .ob5a {
    /* Top */
    background-color:#68f;
    position:absolute;
    width:100px;
    height:50%;
    padding:3px;
    margin-top:5px;
    top:0;
    right:-450px;
    z-index: 1000;
}
.ob5b {
    /* Bottom */
    background-color:#68f;
    position:absolute;
    width:100px;
    height:10%;
    padding:3px;
    margin-top:5px;
    bottom:0;
    right:-450px;
   ...

JavaScript

cycleCount = 1;

function newObstacle() {
    if (cycleCount <= 5) {
        ranNum = ranGen(1, 5);

        $(".obstacles").append("<div class='ob" + ranNum + "a ob'></div><div class='ob" + ranNum + "b ob'></div>");
        cycleCount += 1;
    } else {
        cycleCount = 1;
        newObstacle();
    }
 
}

function forward() {
    $(".ob").animate({
        "right": "+=2000px"
    }, 4000);
}

$(function(){
          forward();

});