JSFiddle - React, Tailwind, and code Playground

by tree85

HTML

<!DOCTYPE html>
<html lang="ru-RU">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
    <!--[if IE]>
        <link rel="stylesheet" type="text/css" href="css/style.ie.css" media="all" />
    <![endif]-->
    <title>AS</title>
</head>
<body>

<div id="pageWrapper">
    <div id="pageLayout">
     
        <!-- content -->
        <div id="content" class="">
        
            <!-- end of right column -->
            <div class="centerWrapper">
                <!-- main menu -->
                <ul id="mainMenu" class="hor noUnd">
                    <li class="mainMenuLi-1">
                        <a href="#">Лого / Фирменный стиль</a>
                        <div class="secondMenuWrapper">
                            <ul class="secondMenu hor">
                                <li><a href="#">Дизайн логотипов</a></li>
                                <li><a href="#">Дизайн </a></li>
                                <li><a href="#">Дизайн</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="mainMenuLi-2">
                        <a href="#">Дизайн</a>
                        <div class="secondMenuWrapper">
                            <ul class="secondMenu hor">
                                <li><a href="#">Дизайн логотипов</a></li>
                                <li><a href="#">Дизайн</a></li>
                                <li><a href="#">Дизайн</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="mainMenuLi-3">
                        <a href="#">Упаковка / Брэндинг</a>
                        <div class="secondMenuWrapper">
                            <ul class="secondMenu hor">
                                <li><a href="#">ДДизайн</a></li>
                                <li><a href="#">Дизайн</a></li>
                               ...

CSS

/*font*/
@font-face {
    font-family: PragmaticaCondCTT; /* имя шрифта для CSS правил */
    src: local("PragmaticaCondCTT"), /* проверяем наличие шрифта в ОС пользователя */
    url(fonts/prg57__c.ttf); /* если шрифт не установлен, тогда загружаем его по указанному пути */
}

/*clear style*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
    font-family: arial, tahoma, verdana, sans-serif; 
    font-size: 14px;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* clear style end*/

body {
    background: url(images/background.gif) repeat center 202px;
}

#pageWrapper {
    background: url(images/background-top.gif) repeat-x center top;
    min-height: 202px;
}

#pageLayout {
    width: 1178px;
    margin: 0 auto;
}

.right {float: right;}
.left {float: left;}
.clear-both {clear: both;}
.clear-left {clear: left;}
.clear-right {clear: right;}
.hor li, li.hor {display: inline-block;}
.ver li, li.ver, .ver {display: block;}
.noUnd a, a.noUnd {text-decoration: none;}
.caps {text-transform: uppercase;}

/***** header *****/



/*** main menu ***/

#mainMenu {
    margin: 0 31px 0 148px;
  ...