JSFiddle - React, Tailwind, and code Playground

by ronnykroy

HTML

<div id="cc_section3_main_container">
    <div id="computerFarm">
        <img id="serverfarm"  src='10.4.0.104:82/images/choosing_a_computer/cloud_computing/cc_section3/serverFarmw.png'/>
    </div>
    <div id="mask">
        <img id="computer_room" src="10.4.0.104:82/images/choosing_a_computer/cloud_computing/cc_section3/homeComputerw.png"/>
        <img id="svg" src="10.4.0.104:82/images/choosing_a_computer/cloud_computing/cc_section3/shape12.svg"/>
    </div>
    <img id="lightingBolt" class="animationToPause" src="10.4.0.104:82/images/choosing_a_computer/cloud_computing/cc_section3/lightningBoltI.png">
</div>

CSS

#lightingBolt {
    width: 179px;
    height: 0px;
    position: absolute;
    left:545px;
    top:-620px;
    z-index: 5;
}
#mask {
    width: 782px;
    height: 752px;
    position: absolute;
    overflow: hidden;
    /*background-repeat: no-repeat;*/
    mask: url("#maskid");
    background-image: url('../../../images/choosing_a_computer/cloud_computing/cc_section3/shape12.svg');
    z-index: 5;
}
#svg {
    width: 782px;
    height: 752px;
    position: absolute;
    overflow: hidden;
    z-index: 5;
}

#computer_room {
    /*display: none;*/
    width: 782px;
    height: 752px;
    position: absolute;
    /*background-repeat: no-repeat;*/

    /*background-image: url('../../../images/choosing_a_computer/cloud_computing/cc_section3/homeComputer.png');*/
    /*overflow: hidden;*/
    top:40px;
    left:800px;
    z-index: 4;
}

 #computerFarm {
     width: 1280px;
     height: 752px;
     position: absolute;
 }