JSFiddle - React, Tailwind, and code Playground

by tree85

HTML

<div id="header" class="noUnd">
    <!-- first logo -->
    <a href="/" class="logo-img">
        <img src="../css/images/logo-img.png" />
    </a>
    <!-- second logo -->
    <a href="/" class="logo-text">
        <img src="../css/images/logo-text.png" />
    </a>
    <!-- under logo text -->
    <a href="#" class="logo-undertext">Студия дизайна и рекламы</a>
    <!-- bread crumbs -->
    <ul class="breadCrumbs hor">
        <li class="link"><a href="#">Обложка</a></li>
        <li class="gt"><span>&gt;</span></li>
        <li class="link"><a href="#">Изготовление</a></li>
        <li class="gt"><span>&gt;</span></li>
        <li class="link"><a href="#">Печатная продукция</a></li>
    </ul>
    <!-- slogan -->
    <a href="#" class="slogan">
        <div class="slogan-part3">?</div>
        <div class="slogan-part1">Нужен дизайн</div>
        <div class="slogan-part2">и изготовление</div>
    </a>
    <!-- fast message -->
    <ul class="fm hor">
        <li class="fm-1"><a href="#"></a></li>
        <li class="fm-2"><a href="#"></a></li>
        <li class="fm-3"><a href="#"></a></li>
        <li class="fm-4"><a href="#"></a></li>
        <li class="fm-5"><a href="#"></a></li>
    </ul>
    <!-- get cost button -->
    <div class="getCost">
        <a href="#">Узнать стоимость проекта</a>
    </div>
    <!-- contact phone -->
    <div class="contactPhone">+ 7</div>
</div>
<!-- page wrappers -->
<div id="pageWrapper">
    <div id="pageLayout">
        <!-- header -->
            <?include './blocks/header.php';?>
        <!-- end of header -->
        <!-- content -->
        <div id="content" class="">
            <!-- left column -->
            <div id="leftColumn" class="left noUnd">
                <!-- left navigation -->
                <ul id="navigation">
                    <li><a href="/">Главная</a></li>
                    <li><a href="#">Косплексное портфолио</a></li>
                    <li><a href="#">Клиенты</a></li>
                    <li><a...

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(css/images/background.gif) repeat center 202px;
}

#pageWrapper {
    background: url(css/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;}
.caps {text-transform: uppercase;}

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

#header {
    position: relative;
    min-height: 147px;
}

#header a.logo-img {
    position:...