JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>(&TITLE&)</title>
    </head>
    <body>
        <!-- // HEADER // -->
        <div id="Header">
            <div class="content">
                <span class="left">КИЕВ УКРАИНА</span>
                <span class="right">Курс: <span class="exchangeRate">1$ = 8.00грн. б/н</span> <a class="changeExchange" href="#">смена валюты</a></span>
            </div>
        </div>
        
        <!-- // SUB HEADER // -->
        <div id="SubHeader">
            <div class="content">
                <div class="left"><a id="mv" href="javascript:createWindow('Mobile');">Мобильная версия</a><a class="icon" href="./home" title="Главная"><img src="./Resources/Images/Design/fi_home.png" alt="Главная" /></a><a class="icon" href="./feedback" title="Обратная связь"><img src="./Resources/Images/Design/fi_contact.png" alt="Написать нам" /></a><a class="icon" href="./Site.map" target="_blank" title="Карта сайта"><img src="./Resources/Images/Design/fi_sitemap.png" alt="Карта сайта" /></a><a class="icon" href="javascript:addBookmark();" title="В закладки"><img src="./Resources/Images/Design/fi_bookmark.png" alt="В закладки" /></a></div>
                <div class="right"><!--<%CodeFire.LoginForm%>-->LOGIN FORM</div>
            </div>
        </div>

        <!-- // CONTAINER // -->
        <div id="Container">
            <div class="content">
                <div class="shadowLeft"></div>
                <div class="cornerLeft"></div>
                <div class="content">
                    <!-- // CONTENT TOP // -->
                    <div id="ContentTop">
                        <a id="Logotype" href="#"><img src="../Images/Design/Logotype.png" /></a>
                    </div>
                    
                    <!-- // MENU // -->
                    <div id="Menu"></div>
                    
                    <!-- // SEPARATE BLOCK // -->
                    <div id="SeparateBlock">
 ...

CSS

body
{
    padding: 0px;
    margin: 0px;
    
    font-family: "Tahoma";
    font-size: 11px;
    color: #636363;
    
    background-color: #F4F4F4;
    background-image: url(../Images/Design/Background.jpg);
    background-position: center 27px;
    background-repeat: repeat-x;
}

/* ALL LINKS */
a
{
    margin: 0px;
    padding: 0px;
    
    border: none;
    outline: none;
    
    color: #2F81C8;
}
a:hover { text-decoration: none; }
/* ALL LINKS */

/* ALL IMAGES */
img
{
    margin: 0px;
    padding: 0px;
    
    border: none;
    outline: none;
}
/* /ALL IMAGES */

/* HEADER */
div#Header
{
    min-width: 1177px;
    width: 100%;
    height: 26px;
    
    border-bottom: 1px solid #F4F4F4;
    
    line-height: 26px;
    vertical-align: middle;
    
    background-color: #3D659F;
    
    float:left;
}
div#Header>div.content
{
    margin: 0px auto;
    padding: 0px 81px;
    
    min-width: 1015px;
    width: 1015px;
}

div#Header>div.content>span.left
{
    padding-left: 27px;
    
    float: left;
    
    color: #E2E8F1;
}
div#Header>div.content>span.right
{
    padding-right: 26px;
    
    float: right;
    
    color: #FFFFFF;
}
div#Header>div.content>span.right>span.exchangeRate { color: #FFEB68; }
div#Header>div.content>span.right>a.changeExchange { color: #FFFFFF; }
div#Header>div.content>span.right>a.changeExchange:hover { text-decoration: none; }
/* HEADER */

/* SUB HEADER */
div#SubHeader
{
    min-width: 1177px;
    width: 100%;
    height: 46px;
    
    line-height: 46px;
    vertical-align: middle;
    
    float: left;
}
div#SubHeader>div.content
{
    margin: 0px auto;
    padding: 0px 81px;
    
    min-width: 1015px;
    width: 1015px;
}

div#SubHeader>div.content>div.left
{
    padding-left: 51px;
    
    float: left;
    
    color: #E2E8F1;
}
div#SubHeader>div.content>div.right
{
    padding-right: 26px;
    
    float: right;
    
    color: #FFFFFF;
}
/* SUB HEADER */

/* // CONTENT // */

/* CONTENT */
div#Container
{
   ...