JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <title>CS:GO Only - сервера</title>
      <link href="css/update.css" rel="stylesheet" />
   </head>
   <body style="background: rgba(168, 181, 188, 0.28);">
      <header style="position:fixed">
         <div class="box nav">
            <a href="index.html" class="logo" onclick="location.hash = '#Главная'"></a>
            <a target="content" href="pages/cabinet.html" class="button auth">Личный кабинет</a>
            <ul class="navmenu">
               <li><a target="content" href="pages/news.html">Главная</a></li>
               <li><a target="content" href="pages/servers.html">Сервера</a></li>
               <li><a target="content" href="pages/banlist.html">Банлист</a></li>
               <li><a target="content" href="pages/donate.html">Привелегии</a></li>
            </ul>
         </div>
      </header>
      <div style="padding: 100px;"/>
      <div class="main-container">
         <div class="container">
            <iframe src="pages/news.html" width="100%" height="300px" name="content" allowtransparency></iframe>
         </div>
      </div>
      <div class="main-sidebar">
         <div class="sidebar">
            <div id="title"><span class="center">Мониторинг</span></div>
            <div id="box-sidebar">
               <!-- Код мониторинга -->
            </div>
         </div>
         <div class="sidebar">
            <div id="title"><span class="center">Баннеры</span></div>
            <div id="box-sidebar">
               <!-- Код баннеров -->
            </div>
         </div>
         <div class="sidebar">
            <div id="title"><span class="center">Группа ВК</span></div>
            <div id="box-sidebar">
               <!-- Код группы ВК -->
            </div>
         </div>
      </div>
      <div id="dt" class="box" style="background: #e2e2e2;"></div>
   </body>
</html>

CSS

/* Новый код [26.01.16] */
.none {
display: none;
}
.none.active {
display: block;
}
@font-face{
font-family: 'wf_SegoeUILight';
src:url('http://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.eot');
src:url('http://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.eot?#iefix') format('embedded-opentype'),
url('http://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.woff') format('woff'),
url('http://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.ttf') format('truetype'),
url('http://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.svg#web') format('svg');
font-weight: normal;
font-style: normal;
}
.center {
text-align: center;
}
.sidefix {
position: fixed;
right: 8%;
}
.main-container {
position:fixed;
left:0;
width: 80%;
float:left;
}
.main-sidebar {
width: 20%;
float:right;
right:0;
position:fixed;
}
.sidebar {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
text-align: center;
}
img {
width:180px;
height:180px;
}
#img-news {
float:left;
width:180px;
height:180px;
border:2px solid;
margin-top: 9px;
border-color:rgba(117, 117, 117, 0.38);
margin-right: 5px;
}
#date {
color: rgba(239, 251, 176, 0.33);
float:right;
}
#title {
padding: 10px;
background-color: rgb(64, 64, 64);
color: white;
font-size: 16pt;
}
#text-news {
}
#box-news {
background: #fafafa repeat-x 0% 0%;
padding: 9px 20px 120px 20px;
min-height: 100px;
font-size: 15pt;
}
#box-sidebar {
background: #fafafa repeat-x 0% 0%;
padding: 9px 20px 20px 20px;
margin-bottom: 35px;
font-size: 14.5pt;
}
.button:hover {
transition: 1s;
background-color: rgba(255, 255, 255, 0.22);
}
.button {
transition: 2s;
background: none;
background-color: rgba(48, 48, 48, 0.52);
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
}
/* End Update */
/* Старый код */
input { outline: none; }
a, a:hover { text-decoration: none; }
header {
width: 100%;
height: 60px;
position:...