JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="world">

    <div id="dot"></div>
    <div class="way left"></div>

</div>

CSS

* {
        margin: 0;
        padding: 0;
        border: 0;
    }
    body {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    #world {
        width: 100%;
        height: 100%;
        position: fixed;
        background: #FF8000;
    }
    #dot {
        background-color: #0473F2;
        width: 50px;
        height: 50px;
        border-radius: 25px;
        position: fixed;
        top: calc(50% - 25px);
        left: 150px;
        z-index: 99999;
    }
    .way {
        position: relative;
        background: #FFFFE7;
        top: calc(50% - 50px);
        font-size: 0;
        float: left;
        vertical-align: top;
        display: inline-block !important;
    }
    .left {
        width: 225px;
        height: 100px;

    }
    .down {
        width: 100px;
        height: 225px;
    }
    .up {
        width: 100px;
        height: 225px;
        margin-top: -125px;
    }
    .game_over {
        background-color: #FF0000 !important;
    }
    #gameover_overview {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        display: none;
        background: #FF0000;
    }
    #gameover_content{
        width: 200px;
        margin-top: 3%;
    }
    #gameover_content li {
        list-style-type: none;
        background: #FFF;
        color: #FF0000;
        display: block;
        font-size: 20px;
        font-family: Arial;
        border-radius: 7px;
        padding: 10px;
        margin: 15px;
        font-weight: bold;
    }

JavaScript

$(document).ready(function () {
    $('#dot').draggable({
        //axis: "y",
        accept: '.way',
        containment: "#world"
    
    });


    

    function determine(){
    var way = Math.floor(Math.random() * 3) + 1;
        if (way == 1) {
            way = 'left';
        }
        if (way == 2) {
            way = 'up';
        }
        if (way == 3) {
            way = 'down';
        }
            $('#world').append('<div class="way ' + way + '"></div>');
            $('#world').append('<div class="way left"></div>');
            $('#world').append('<div class="way ' + way + '"></div>');

    }
    determine();
    if ($('div').hasClass('down')){
        $(this).next('.left').css('margin-top', '125px');
    }
    if ($('.up').next().is('.left')){
        $(this).next('div .left').css('margin-top', '-125px');
    }


});
function playAgain() {
        $('#gameover_overview').hide();
        $('#dot').css('top', 'calc(50% - 25px)');
        $('#dot').css('left', '150px');
        $('#world').removeClass('game_over');
    }