JSFiddle - React, Tailwind, and code Playground

by aprudencio

HTML

<div class="cielo">
    <div class="edificio" style="background: #660000;"></div>
    <div class="edificio" ></div>
    <div class="edificio" style="background: #45476d;"></div>
    <div class="edificio" style="background: #45476d;"></div>
    <div class="edificio" style="background: #45476d;"></div>
    <div class="edificio" style="background: #264f30;"></div>
    <div class="edificio" style="background: #45476d;"></div>
    <div class="avenida">- - - - - - - - - - - - - - - - - - - - - - - - - - - - </div>
    <div class="auto"></div>
</div>

CSS

.cielo{
background-color:#4592e0;/* #84c9ff;/*#131b5b;*/
}
.avenida{
background-color: #353535;
    color: white;
}
.edificio{
    display:inline-block;
    background: #a1b0b3;
    padding: 6px 3px 0px 3px;
}
.piso{
   /*border-bottom: 1px solid black;*/
    
    text-align: center;
}
.piso.pb{
    text-align: center;
    position: relative;
    top: 7px;
}
.ventana {
    width: 20px;
    height: 20px;
    background-color: black;
    display:inline-block;
    margin: 2px;
}
.puerta{
       width: 30px;
    height: 20px;
    background-color: black;
    display:inline-block;
    margin: 2px;
}
.encendida{
    background-color: #7f7f00; /*yellow;*/
}
.auto{
        width: 30px;
    height: 20px;
    background-color: red;
    position: relative;
    top: -30px;
    left:-30px;
}

JavaScript

var paginaPrincipal = {
    tiempoLuces: 2500,
    intervaloLuces: null,
    atardecer: false,
    configurar: function() {
        paginaPrincipal.crearEdificios();
        paginaPrincipal.intervaloLuces = setInterval(paginaPrincipal.luces, paginaPrincipal.tiempoLuces);
        
        var int1 =  setInterval(paginaPrincipal.luces, paginaPrincipal.tiempoLuces+3300);
        var int2 =  setInterval(paginaPrincipal.luces, paginaPrincipal.tiempoLuces+6000);
        $(".cielo").animate({backgroundColor: "#000430"},20000,function(){
        
        $(".cielo").animate({backgroundColor: "#000000"},40000);
        });
    },
    luces: function() {
        var ventanas = $(".ventana");
        var indexV = Math.floor(Math.random() * ventanas.size());

        var ventana = ventanas[indexV];

        if ($(ventana).hasClass("encendida")) $(ventana).removeClass("encendida");
        else $(ventana).addClass("encendida");


    },
    crearEdificios: function() {

        $(".edificio").each(function() {

            var ventanas = paginaPrincipal.random(2, 4);
            var pisos = paginaPrincipal.random(5, 12);
            $("#console").html(pisos);
            paginaPrincipal.crearEdificio(this, pisos, ventanas);
        });
        //paginaPrincipal.moverAutos();
    },
    crearEdificio: function(obj, pisos, ventanas) {
        var anchoVentana = paginaPrincipal.random(5, 15);
        for (var i = 0; pisos > i; i++) {
            var piso = $("<div />").addClass("piso");

            for (var j = 0; ventanas > j; j++) {
                var ventana = $("<div />").addClass("ventana");
                if (paginaPrincipal.atardecer) if (paginaPrincipal.random(0, 1) == 1) ventana.addClass("encendida");
                ventana.click(function() {
                    $(this).toggleClass("encendida");
                });
                ventana.css("width", anchoVentana + "px");

                piso.append(ventana);
            }

            $(obj).prepend(piso);
      ...