JSFiddle - React, Tailwind, and code Playground

HTML

<div id="home">

    <div id="biosepticjs">
        <div class="biosepticover"></div>
        <div class="biosepticlight"></div>
    </div>
    
    <div id="waterpolejs">
        <div class="waterpoleover"></div>
        <div class="waterpolelight"></div>
    </div>
    
    <div id="popup">
        <div id="popclose"></div>
        <h1></h1>
        <div id="popinfo">кликните чтобы получить информацию</div>
    </div>
</div>

CSS

#home{
    height: 528px;
    background-image: url(http://k-geo.ru/sites/all/modules/kgeohome/smarthome.jpg);    
    background-repeat: no-repeat;
    background-color: #FFFFFF;
    border-radius: 1px;
    box-shadow: 1px 1px 4px rgba(100, 100, 100, 0.196);
    width: 605px;
    margin: 0 auto;
    position: relative;
}

#popclose{
    background-image: url(http://k-geo.ru/sites/all/modules/kgeohome/close.png);
    background-repeat: no-repeat;
    height: 50px;
    width: 50px;
    position: absolute;
    right: 10px;
    top: 10px;
    display: none;
}

#popup{
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid #888888;
    border-radius: 2px 2px 2px 2px;
    box-shadow: 1px 0 3px #999999;
    color: #FFFFFF;
    margin: 0;
    padding: 10px 15px;
    position: absolute;
    width: 190px;
    height: 90px;
    display: none;
}

#biosepticjs{
    position: absolute;    
}
    
.biosepticover{
    background-image: url(http://k-geo.ru/sites/all/modules/kgeohome/biosepticover.png);
    background-repeat: no-repeat;    
    height: 217px;
    left: 13px; 
    top: 310px;
    width: 149px;
    display: none;
    position: absolute;    
}

.biosepticlight{
    background-image: url(http://k-geo.ru/sites/all/modules/kgeohome/biosepticlight.png);
    background-repeat: no-repeat;    
    height: 197px;
    left: 23px;
    top: 320px;
    width: 129px;
    display: none;
    position: absolute;    
}

#waterpolejs{
    position: absolute;    
}

.waterpolelight{
    background-image: url(http://k-geo.ru/sites/all/modules/kgeohome/waterpolelight.png);
    background-repeat: no-repeat;    
    height: 120px;
    left: 444px;
    top: 270px;
    width: 151px;
    display: none;
    position: absolute;    
}

.waterpoleover{
    background-image: url(http://k-geo.ru/sites/all/modules/kgeohome/waterpoleover.png);
    background-repeat: no-repeat;    
    height: 120px;
    left: 444px;
    top: 270px;
    width: 151px;
    display: none;
    position:...

JavaScript

$.allshow = function(){
        $("#home").show();
        $("#biosepticjs").show();
        $("#waterpolejs").show();
        $(".biosepticlight").fadeIn(500);
        $(".waterpolelight").fadeIn(500);
        return;
        };
    $.fastshow = function(){
        $("#home").show();
        $("#biosepticjs").show();
        $("#waterpolejs").show();
        $("#biosepticjs .biosepticlight").show();
        $("#waterpolejs .waterpolelight").show();
        return;
        };
    $.allhide = function(){
        $(".biosepticlight").fadeOut(100);
        $(".waterpolelight").fadeOut(100);
        return;
        };    
    $.thehide = function(){
        $("#home > div").hide();
        $("#biosepticjs").show();
        $("#waterpolejs").show();
        return;
        };    
        
    $("#home").hide();
    $.thehide();
    $("#home").fadeIn("slow");
    // init
    
    $("#home").mouseenter($.allshow).mouseleave($.allhide);
    
    $("#biosepticjs").mouseenter(function(){
        $(".biosepticlight").hide();
        $("#waterpolejs").hide();
        $("#popup > h1").text("Биосептик");
        $(".biosepticover").fadeIn(200);
        $("#popup").fadeIn(200);
        });
    
    $(".biosepticover").mouseout(function(){$("#popup").fadeOut(100);
        $.fastshow();
        $(".biosepticover").hide();
        $(".biosepticlight").fadeIn(100);});

    $(".biosepticover").mousemove(function(e){
        var parentOffset = $(this).parent().offset(); 
        var relX = e.pageX - parentOffset.left+15;
        var relY = e.pageY - parentOffset.top+15;
        $("#popup").css({"top" : relY, "left": relX});
        });
    
    $(".biosepticover").click(function(){
        $(this).unbind();
        $(this).hide();
        $("#popup").animate({top:0, left:0, width:"575px", height:"528px"});
        $("#popup").css({backgroundColor: "#fff", color: "#444",zIndex: 1}); 
        $("#popclose").show();    
        });
    
    $("#popclose").click(function(){
       ...