JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="js/script.js"></script>    
</head>
<body>
    <div id="wrapper">
        <div id="headar"></div>
        <div id="nav">
        
        <ul class="mainMenu">
                <li style="border-left:none;" class="Diablo1">Diablo</li>
                <li class="warCraft2">WarCraft</li>
                <li class="wow3">World of WarCraft</li>
                <li class="starcraft4">StarCraft</li>        
                <li style="border-right:none;">Войти или зарегистрировать</li> 
            
            </ul>

               <div class="blockNavUp">
                <div id="blockNav1"></div>
    
                <div id="blockNav2"></div>
                
                <div id="blockNav3"></div>
                
                <div id="blockNav4"></div>
        </div>
        </div>
         
        <div id="wrconnten">
            <div id="galeri"></div>
            <div id="contend"></div>
        </div>
        
        <div id="fuutar"></div>
    </div>  
</body>
</html>

CSS

body {
    margin:0;
    padding:0;
    font:20px Taxoma, Arial, sans-serif;
    background:url(../imagess/bg.jpg)
}

div#wrapper{
    outline:1px solid #cc0000;
    width:1300px;
    height:1500px;
    margin:0 auto;
}   

ul{
    margin:0;
    padding:0;
    list-style:none;
}

div#headar{
    outline:0px solid #cc0000; 
    height:300px;
    background:url(../imagess/heder.jpg)
}

/*Основное меню*/

div#nav{
    outline:0px solid #cc0000; 
    height:50px;
    margin-bottom:33px;
    background:url(../imagess/meny.jpg) ;
    position:relative;
}
  
ul.mainMenu{
    outline:0px solid #cc0000;
    position: relative;
    left:1px;
    top:12px;
    color:#fff;
    margin: 0 auto;
}

ul.mainMenu li{
    cursor:pointer;
    text-shadow:0px 1px 0px #000;
    text-transform:uppercase;
    font-size:19px;
    float:left;
    text-align:center;
    padding:1px 37px;
    /*outline:1px solid #cc0000;*/
    border-right:1px solid #19191B;
    border-left:1px solid #76767A;
}

div#blockNav1{
    width:145px;
    height:200px;
    background-image:url(..//imagess/BgBlockNav.png) ;
    outline:1px solid #cc0000;
    margin-top:5px;
display: inline-block;
} 



div#blockNav2{
    width:181px;
    height:200px;
    background-image:url(..//imagess/BgBlockNav.png) ;
    outline:1px solid #cc0000;
    margin-top:36px;
    margin-left:5px;
display: inline-block;
} 

div#blockNav3{
    width:292px;
    height:200px;
    background-image:url(..//imagess/BgBlockNav.png) ;
    outline:1px solid #cc0000;
    margin-top:36px;
 margin-left:5px;
display: inline-block;
}

div#blockNav4{
    width:187px;
    height:200px;
    background-image:url(..//imagess/BgBlockNav.png) ;
    outline:1px solid #cc0000;
    margin-top:36px;
   margin-left:5px;
     display: inline-block;
}   
   
.blockNavUp{
display: table;
    margin: 0 auto;
}
/*Основное меню*/

div#galeri{
    outline:1px solid #cc0000;
    width:277px;
    margin:33px 13px;
    height:592px;
}

div#contend{
    outline:1px solid...

JavaScript

$(document).ready(function() {



$('div[id^=blockNav]').hide();

$('li.Diablo1').click (function() {
    $('div#blockNav1').fadeIn();
    $('div[id^=blockNav]:not(div#blockNav1)').fadeOut();    
});
    
$('li.warCraft2').click (function() {
    $('div#blockNav2').fadeIn();
    $('div[id^=blockNav]:not(div#blockNav2)').fadeOut();    
});

$('li.wow3').click (function() {
    $('div#blockNav3').fadeIn();
    $('div[id^=blockNav]:not(div#blockNav3)').fadeOut();    
});

$('li.starcraft4').click (function() {
    $('div#blockNav4').fadeIn();
    $('div[id^=blockNav]:not(div#blockNav4)').fadeOut();    
});

});