JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<head>

<title>TranceLife</title>

<meta http-equiv="content-type" content="application/xhtml+xml; charset=" />
<link rel="stylesheet" href="images/style.css" type="text/css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="java.js"></script>
<div class="upMenu">
    <div class="logo">
    <li>
        <a href="/"><img src="images/miniLogo.png" alt="" onmouseover="mLogo1()" onmouseout="mLogo2()"/></a>
        <ul>
            <li><a href="/"><img src="images/miniNews.png" alt="" onmouseover="mNews1()" onmouseout="mNews2()"/></a></li>
        </ul>
    </li>
    </div>
    <div class="up"><img src="images/up.png"/></div>
    <div class="Offline">Вход | Регистрация</div>
</div>
<div class="chat">
    <div class="chatName">
        Чат
    </div>
    <div class="chatPost">
        <b>Thermite:</b> проблема с руками ))).....от меня "злая прога" сугубо моё мнение<br />
        <b>Чак Норис:</b> а у тебя есть с ним проблемы?
    </div>
    <div class="chatMenu">
        <div class="chatMText">
            <input type="image" src="images/chatSend.png"/>
            <input type="text" class="chatMTE" placeholder="Сообщение..."/>
        </div>
            <div class="chatMSMenu">
                <div class="chatMSM6" title="Обновить"><input type="image" src="images/chatMRefresh.png"/></div>
                <div class="chatMSM5" title="Входящие"><input type="image" src="images/chatMMail.png"/></div>
                <div class="chatMSM4" title="Online"><input type="image" src="images/chatMOnline.png"/></div>
                <div class="chatMSM3" title="Смайлы"><input type="image" src="images/chatMSmile.png"/></div>
                <div class="chatMSM2" title="Теги"><input type="image" src="images/chatMTegs.png"/></div>
                <div class="chatMSM1" id="0" title="Свернуть"><input type="image" src="images/chatMDown.png"/></div>
            </div>
        <div...

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: 50;
}

.upMenu .Offline {
    height: 24px;
    margin: 2px 10px 2px auto;
    float: right;
}

.upMenu .logo {
    height: 26px;
    width: 109px;
    margin: 1px auto 1px 5px;
    float: left;
}

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

.chat {
    border: solid #777 1px;
    background-color: white;
    float: right;
    width: 205px;
    position: fixed;
    top: 0px;
    right: 0px;
    z-index: 1000;
}

.chat .chatName {
    border: solid #888;
    border-width: 0 0 1px 0;
    background-color: #33334d;
    height: 24px;
    font-weight: 700;
    padding: 4px 0 0 0;
}

.chat .chatPost {
    margin: 0 4px 0 4px;
    width: 195px;
    text-align: left;
    float: left;
    font-family: Verdana, sans-serif;
    font-size: 11px;
}

.chat .chatMenu {
    background-color: white;
    border: solid #888;
    border-width: 1px 0 0 0;
    display: inline;
    margin: auto;
    text-align: left;
    float: left;
    font-family: Verdana, sans-serif;
    font-size: 11px;
    height: 24px;
    width: 100%;
}


.chat .chatMenu .chatMText {
    margin: 6px 0 6px 5px;
    border: 0;
    padding: 0px 0 0px 0px;
    height: auto;
    width: 150px;
    display: inline;
}

.chat .chatMenu .chatMText input[type="image"]{
    top:6px;
    left: 0px;
    bottom: 6px;
    position: relative;
    padding: 0;
    border: 0;
    margin: 0px 0 0px 0px;
    height: 15px;
    width: 15px;
}

.chat .chatMenu .chatMText input[type="text"]{
    top:3px;
    left:0px;
    position: relative;
    margin: 0px 0 0px 0;
    border: 0;
    height: 16px;
    padding: 0;
    width: 150px;
}

.chat .chatMenu .chatMSetting {
    border: solid #888;
   ...

JavaScript

function navigation(){
    if($(window).width()>=1157){
        var height = $(window).height(); $('.chat').height(height-2);
        
        if($('.chatMSM1').attr('id')=='0'){$('.chat').show(100); $('.chatPost').height(height-56); var width = $(window).width(); var width2 = width - 207; $('.upMenu').width(width2); var width3 = width2 - 952; var width3 = width3/2; $('#wrap').css('marginLeft',width3);}else{
            var width = $(window).width(); var width2 = width; $('.upMenu').width(width2); var width3 = width2 - 952; var width3 = width3/2; $('#wrap').css('marginLeft',width3);
        }
        
}else{
    $('.chat').hide(100); $('.chatDown').show(100); var width = $(window).width(); var width2 = width; $('.upMenu').width(width2);
    var width3 = width2 - 952; var width3 = width3/2; $('#wrap').css('marginLeft',width3);
}}

$(window).load(function(){navigation();})
$(window).resize(function(){navigation();})
function mLogo1(){$('img[src="images/miniLogo.png"]').attr('src','images/miniLogo2.png');}
function mLogo2(){$('img[src="images/miniLogo2.png"]').attr('src','images/miniLogo.png');}
function mNews1(){$('img[src="images/miniNews.png"]').attr('src','images/miniNews2.png');}
function mNews2(){$('img[src="images/miniNews2.png"]').attr('src','images/miniNews.png');}
$(document).ready(function(){$('.chatMSetting').toggle(function(){$('.chatMSMenu').show(3);},function(){$('.chatMSMenu').hide(3);});


$('.chatMSM1').click(function(){
$('.chatMSM1').attr('id','1');
$('.chat').hide(100); $('.chatDown').show(100); var width = $(window).width(); var width2 = width; $('.upMenu').width(width2);
var width3 = width2 - 952; var width3 = width3/2; $('#wrap').css('marginLeft',width3);
});
$('.chatDM1').click(function(){if($(window).width()>=1157){
$('.chatMSM1').attr('id','0'); $('.chat').show(100); $('.chatDown').hide(100); var height = $(window).height(); $('.chat').height(height-2);
var width = $(window).width(); var width = width - 207; $('.upMenu').width(width); var...