JSFiddle - React, Tailwind, and code Playground

by Vicos

HTML

<body>
<section id="wrapper">
<section id="top">
<!-- Top -->
    <header id="logo">Izumina</header>
    <nav id="menu">
        <ul>
            <li>Конкурсы</li>
            <li>Выставки</li>
            <li>Работы</li>
            <li>Авторы</li>
            <li>Радио</li>
            <li>Мастер-класс</li>
            <li>Кейсы</li>
            <li class="special">Магазин</li>
        </ul>
    </nav>
    <nav id="user_panel">
    <input type="button" value="Добавить" id="add"/>
    <ul id="icon_info">
        <li id="users"><span>0</span></li>
        <li id="search"></li>
        <li id="info"></li>
    </ul>
    </nav>
</section>
<section id="top2">
<nav id="buttons">
    <form id="top2_buttons">
    <!-- Навигация -->
        <input type="button" value="Сообщения" class="b_double_l" />
        <input type="button" value="Комментарии" class="b_double_r" />
        <input type="button" value="Написать сообщение" class="b_alone" />
    </form>
</nav>
<header id="persona">
    <!-- Right, persona -->
    <div class="user_persona">
         <img src="img/ava.png" class="avatars" />
         <span class="login_user">Логин</span>
         <span class="from_user">Страна Город</span>
    </div>
</header>
</section>
<section id="head_body">
<aside id="list_user">
<!-- Left -->
    <div class="elem_users">
        <div class="users">
            <img src="img/ava.png" class="avatars" />
            <span class="login_users">Name</span>
            <span class="date_users">Data</span>
        </div>
    </div>
    <div class="elem_users">
        <div class="users">
            <img src="img/ava.png" class="avatars" />
            <span class="login_users">Логин</span>
            <span class="date_users">12 апреля 2013</span>
        </div>
    </div>
    <div class="elem_users">
        <div class="users">
            <img src="img/ava.png" class="avatars" />
            <span class="login_users">Логин</span>
            <span class="date_users">17 августа...

CSS

/*
цвет рамки #dfdfdf
*/
@import "elements.css";
html{
    padding: 0;
    margin: 0;
    height: 100%;
}
body{
    padding: 0;
    margin: 0 auto;
    min-width: 980px;
    max-width: 1440px;
    height: 100%;
    font-size: 14px;
    color: #9e9e9e;
    font-family: Arial;
    /*min-height: 100%;
    height: auto !important;
    height: 100%;
    position: relative;*/
}
/*footer{
    height: 100px;
    width: 100%;
    position: absolute;
    bottom: 0;
}*/
ul, p{
    margin: 0;
    padding: 0;
}
#wrapper{
    min-height: 100%;
    /*display: -moz-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flexbox;*/
    /*-moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    box-orient: vertical;*/
}
/*@font-face {TODO: Font
            font-family: heinrich;
            src: url('LigatureSymbols-2.07.ttf'),
            url('heinrich.eot');
}*/
/*top панель*/
#top{
    width: 100%;
    height: 38px;
    background-color: #323232;
    /*Тень*/
    /*-webkit-box-shadow: 0px 4px black;
    box-shadow: 0px 4px black;*/
    /*Тень конец*/
    /*Градиент верх 323232 низ 232323*/
    background-image: linear-gradient(to bottom, #323232, #232323);
    display: -moz-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flexbox;
}
#logo{
    width: 125px;
    margin-left: 17px;
    font-size: 28px;
    color: #fefefe;
}
#user_panel{
    width: 250px;
    height: 550px;
}
#menu{
    margin: 9px 0 0 0px;
    font-size: 16px;
    
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    -ms-box-flex: 1;
    box-flex: 1;
}
#menu ul li{
    display: inline;
    list-style: none;
    margin-right: 22px;
    color: #9e9e9e;
}
nav#menu ul li.special{
    color: #f26522;
}
/*top панель конец стилей*/
/*top2 панель*/
#top2{
    display: -moz-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flexbox;
    height: 56px;
    
    border-top: #d7d7d7 2px solid;
    /*border-bottom: #dfdfdf 2px solid;*/
}
/*buttons*/
#buttons{
   ...