JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ad</title>
<link rel="stylesheet" href="{THEME}/data/css/reset.css" type="text/css" />
<link rel="stylesheet" href="{THEME}/data/css/grid.css" type="text/css" />
<link rel="stylesheet" href="{THEME}/data/css/style.css" type="text/css" />


<body>
    <div id="main" class="container_12">
<!-- Body Wrapper Begin -->
        <div id="header"><!-- Header Begin -->
<div class="grid_3"><a href="/" id="logo" class="float_left">Ad</a></div>
            <div class="grid_4 push_5">

            </div>
        </div><!-- Header End -->
        <div class="clear"></div>
        <div id="userbar"><!-- Userbar Begin -->
            <div id="profile"><!-- Profile Begin -->
                <div id="avatar">
                    <img src="{THEME}/img/test_avatar.png" alt="Avatar" height="44" />
                    <a href="#" id="unreadcount">12</a>
                </div>
                <div id="profileinfo">
                    <h3 id="username">Administrator</h3>

                </div>
            </div><!-- Userbar End -->
            <ul id="navigation"><!-- Main Navigation Begin -->
                <li class="activepage"><a href="{THEME}/cp_main.html" class="icon_stats">Statistics</a></li>

            </ul><!-- Main Navigation End -->
        </div><!-- Userbar End -->
        <div class="clear"></div>

<div id="body">
                
<!-- Центр блок -->
<div class="block rgh">
<div class="titlebar"><h3>5644645</h3></div>
<div class="block_cont"><div id="mainpageTabs"><div id="tabs-2">5464545</div></div>
</div></div><br>
<!-- Центр блок -->


<!-- Слева блок -->
<div class="block new">
<div class="titlebar"><h3>Главное меню</h3></div>
<div class="block_cont">23121312312121</div></div>
<!-- Слева блок -->


</body>
</html>

CSS

/*
    Variable Grid System.
    Learn more ~ http://www.spry-soft.com/grids/
    Based on 960 Grid System - http://960.gs/

    Licensed under GPL and MIT.
*/


/* Containers
----------------------------------------------------------------------------------------------------*/
.container_12 {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
}

/* Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.small,
.medium,
.big {
    display:inline;
    float: left;
    position: relative;
      margin-left: 5px;
    margin-right: 5px;
}
.block{margin-bottom:10px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:1px 2px 2px #323a43;-moz-box-shadow:1px 2px 2px #323a43;box-shadow:1px 2px 2px #323a43}.block .titlebar{background:url('../images/block_title_bg.png') repeat-x;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;border-top-left-radius:5px;border-top-right-radius:5px;border:1px solid #2b323b;position:relative}


.new {
float:left
        display:table;
        position: relative;
        margin-left: 5px;
        margin-right: 660px;
}

.rgh {
        width: 630px;
        float: right;
}


/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
    margin-left: 0;
}

.omega {
    margin-right: 0;
}

/* Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .grid_1 {
    width:70px;
}

.container_12 .grid_2 {
    width:150px;
}

.container_12 .grid_3 {
    width:230px;
}

.container_12 .grid_4, .container_12 .small {
    width:310px;
}

.container_12 .grid_5 {
   ...