JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<head>
<title>TranceLife</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/css/style.css"/>
<link rel="stylesheet" type="text/css" href="/js/search/search.css"/>
<link rel="stylesheet" type="text/css" href="/js/sliderman/sliderman.css"/>
<link rel="stylesheet" type="text/css" href="/skin.css"/>

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/java.js"></script>
<script type="text/javascript" src="/js/jquery.color.js"></script>
<script type="text/javascript" src="/js/search/search.js"></script>
<script type="text/javascript" src="/js/sliderman/sliderman.1.3.0.js"></script>
<script type="text/javascript" src="/js/jcarousel.min.js"></script>
<script type="text/javascript">
function mycarousel_initCallback(carousel){carousel.buttonNext.bind('click', function() {carousel.startAuto(0);});
carousel.buttonPrev.bind('click', function() {carousel.startAuto(0);});
carousel.clip.hover(function() {carousel.stopAuto();}, function() {carousel.startAuto();});};
jQuery(document).ready(function() {jQuery('#mycarousel').jcarousel({auto: 2,wrap: 'last',initCallback: mycarousel_initCallback});});
</script>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/uk_UA/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="upMenu">
    <div class="logo">
        <a href="/"><div class="miniMenu" style="padding: 0 !important; height: 24px;"><img src="/css/images/miniLogo.png"/></div></a>
        <div class="logoMenu">
            <a href="/"><div class="miniMenu">Новости</div></a>
            <a href="/"><div class="miniMenu">TOP10</div></a>
            <a href="/"><div class="miniMenu">DJ's</div></a>
            <a...

CSS

* { margin: 0; padding: 0; outline: 0 }

.upMenu {
    background-color: #333;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 500;
    height: 28px;
    width: 100%;
    border: 1px #444 solid;
    display: block;
    position: fixed;
    top: 0px;
    z-index: 1000;
}

.upMenu .logo {
    height: 24px !important;
    width: auto;
    margin: 1px auto 1px 5px;
    float: left;
}

.upMenu .up {
    height: 24px;
    width: 24px;
    margin: 2px auto 2px 7px;
    float: left;
}

.upMenu .message {
    height: auto;
    width: auto;
    margin: 1px 5px 1px auto;
    float: right;
    background-color: white;
}

.message .box {
    padding: 2px 0 0 0;
    border: 1px solid #777;
    height: 22px;
    width: 24px;
    background: #021221 url('/css/images/miniMessage.png') no-repeat;
}

.message .color0 {
    color: #6B6B6B;
}

.message .color1 {
    color: #E14D4D;
}

.message .menu {
    display: none;
    opacity: 0;
    text-align: center;
    border: solid #777;
    border-width: 0 1px 0 1px;
    width: 350px;
    height: auto;
    position: fixed;
    background-color: #dfdfdf;
    z-index: 1000;
}

.message .menu .info {
    text-align: left;
    margin: 6px 5px 2px 10px;
}

.message .menu .info a{
    color: #6B6B6B;
}

.message .menu .info .nickMess {
    display: inline;
    font-family: arial, verdana, tahoma, sans-serif;
    font-weight: 500;
    font-size: 16px;
    background: url('/css/images/miniMess.png') no-repeat;
    width: 147px;
    height: 20px;
    padding: 0 0 0 23px;
}

.message .menu .info .nickSide {
    display: inline;
    font-family: arial, verdana, tahoma, sans-serif;
    font-weight: 500;
    font-size: 16px;
    background: url('/css/images/miniSide.png') no-repeat;
    width: 147px;
    height: 20px;
    padding: 0 0 0 23px;
}


.message .menu .info .date {
    margin: 0 0 0 95px;
    display: inline;
    text-align: right;
    font-size: 13px;
    width: 160px;
}

.message .menu .info .close {
    cursor:...

JavaScript

function navigation(){
var width = $(window).width();
var height = $(window).height();
    if($(window).width()>=1201){
        if($(window).height()>=352){
            if($('.chatMSM1').attr('id')==0){
                $('.chatDown').hide(50);
                $('.chatMini').hide(50);
                $('.chat').height(height-2).show(50);
                $('.chat .chatPost').height(height-56);
                $('.upMenu').width(width-207);
                $('.onlineMenu').css('right',207+'px');
                $('.message .menu').css('right',315+'px');
                $('.fav .menu').css('right',345+'px');
                $('#wrap').css('marginLeft',(width-1201)/2+'px');
            }
        }else{
            $('.chatDown').show(50);
            $('.chatMini').hide(50);
            $('.chat').hide(50);
            $('.upMenu').width(width);
            $('.onlineMenu').css('right',0+'px');
            $('.message .menu').css('right',108+'px');
            $('.fav .menu').css('right',139+'px');
            $('#wrap').css('marginLeft',(width-1201)/2+'px');
        }
        if($('.chatMSM1').attr('id')==1){
            $('.chatDown').show(50);
            $('.chatMini').hide(50);
            $('.chat').hide(50);
            $('.upMenu').width(width);
            $('.onlineMenu').css('right',0+'px');
            $('.message .menu').css('right',108+'px');
            $('.fav .menu').css('right',139+'px');
            $('#wrap').css('marginLeft',(width-995)/2+'px');
        }
    
    }else{
        if($('.chatMSM1').attr('id')==0){
            if($(window).height()>=352){
                $('.chatDown').hide(50);
                $('.chatMini').show(50);
                $('.chat').hide(50);
                $('.upMenu').width(width);
                $('.onlineMenu').css('right',0+'px');
                $('.message .menu').css('right',108+'px');
                $('.fav .menu').css('right',139+'px');
                $('#wrap').css('marginLeft',(width-995)/2+'px');
       ...