JSFiddle - React, Tailwind, and code Playground

by switch74

HTML

<div class="page">
    <div class="menu">
        <a class="home_tv_chat active" href="#">Главная ТВ ЧАТ</a><!--
        --><a class="question-answer" href="#">Вопрос - ответ</a><!--
        --><a class="contacts_and_details" href="#">Контакты и реквизиты</a><!--
        --><a class="private_office" href="#">Личный кабинет</a><!--
        --><a class="logout" href="#">Выйти</a>
    </div>
    <div class="header">
        <div class="logo">
            <img src="" title="VideoStroka" alt="VideoStroka"/>
            <div>НАДО ФРАЗА КОРОТКАЯ ЧЕМ СЕРВИС ЗАНИМАЕТСЯ</div>
        </div>
        <div class="contacts">
            Контакты
        </div>
    </div>
    <div class="admin">
        
    </div>
    <div class="content">
        
    </div>
    <div class="partners">
        
    </div>
    <div class="footer">
        
    </div>
</div>

CSS

html,body{
    margin:0px;
    padding:0px;
    height:100%;
}

.page{
    width:800px;
    min-height:100%;
    margin: 0px auto;
    font:14px tahoma;
}
    
    .menu{
        display:table;
        width:100%;
        background:#4286c3;
    }
        .menu a{
            display:table-cell;
            padding:15px 15px 15px 40px;
            text-decoration:none;
            color:#fff;
        }
        .menu a:hover{
            background:#2272ad;
        }
        .menu a.active{
            box-shadow: 0 0 5px rgba(0, 0, 0, 1.0) inset;
            background:#2272ad;
        }
        .menu a.home_tv_chat:before{
            content:'';
            position:absolute;
            display:inline-block;
            margin:0px 0px 0px -25px;
            width:20px;
            height:20px;
            background:#000;
        }
        .menu a.question-answer:before{
            content:'';
            position:absolute;
            display:inline-block;
            margin:0px 0px 0px -25px;
            width:20px;
            height:20px;
            background:#000;
        }
        .menu a.contacts_and_details:before{
            content:'';
            position:absolute;
            display:inline-block;
            margin:0px 0px 0px -25px;
            width:20px;
            height:20px;
            background:#000;
        }
        .menu a.private_office:before{
            content:'';
            position:absolute;
            display:inline-block;
            margin:0px 0px 0px -25px;
            width:20px;
            height:20px;
            background:#000;
        }
        .menu a.logout:before{
            content:'';
            position:absolute;
            display:inline-block;
            margin:0px 0px 0px -25px;
            width:20px;
            height:20px;
            background:#000;
        }

    .header{
        display:table;
        background:#f3f3f3;
    }
        .header .logo{
            display:table-cell;
         ...