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" />
<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 href="/"><div class="miniMenu">Видео</div></a>
            <a href="/"><div class="miniMenu">Треки</div></a>
            <a href="/"><div class="miniMenu">Шоу</div></a>
            <a href="/"><div class="miniMenu">Радио</div></a>
            <a href="/"><div class="miniMenu">Форум</div></a>
        </div>
    </div>
    
    <div class="up" onclick="$('html, body').animate({'scrollTop':0},100);"><img src="/css/images/up.png"/></div>
    
    <div class="online">
        <div class="miniMenu" style="cursor: pointer; background-image: url('/css/images/miniKab.png') !important; padding: 4px 10px 0 3px !important;">Кабинет</div>
        <div class="onlineMenu">
            <div class="userIS">
                <div class="userImg"><img src="user.gif" alt=""/></div>
                <div class="userStat">
                    <div class="online"></div>
                    <div class="busy"></div>
                    <div class="offline"></div>
                </div>
            </div>
            <div class="userInfo">
                <div class="nick">Tankist</div>
                <div class="stat" id="stat" stat="Lange – Live at Ministry of So..." stat2="Lange – Live at Ministry of Sound in London, UK (01-03-2012)">Lange – Live at Ministry of So...</div>
                <div class="link">
                    <a href="/">Профиль</a>
                    <a href="/">Настройки</a>
                    <a href="/">Друзья</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:...