JSFiddle - React, Tailwind, and code Playground

by Cath_kb

HTML

<div id = "wrapper">
    <header>
        <div class = "header-bg">
            <div class = "logo">
                <a href = "#"><img src = "images/logo.png" alt = "Блог Курского Бомжа" /></a>
            </div>
            <nav class = "menu">
                <ul>
                    <li class = "current"><a href="#">Главная</a></li>
                    <li><a href="#">Карта блога</a></li>
                    <li><a href="#">Мои цели</a></li>
                    <li><a href="#">Мои услуги</a></li>
                    <li><a href="#">Об авторе</a></li>
                </ul>
            </nav>
            <div class = "h-social">
                <ul>
                    <li><a href="#"><img class = "rss" src = "images/soc-b.png" alt = "RSS"/></a></li>
                    <li><a href="#"><img class = "twitter" src = "images/soc-b.png" alt = "TWITTER"/></a></li>
                    <li><a href="#"><img class = "plus" src = "images/soc-b.png"/></a></li>
                    <li><a href="#"><img class = "facebook" src = "images/soc-b.png" alt = "facebook"/></a></li>
                </ul>
            </div>
        </div>
    </header>
    <div id = "main">
        <div class = "content"></div>
        <aside class = "right"></aside>
    </div>
</div>
<footer></footer>

CSS

/**General**/
* {
        margin: 0;
        padding: 0;
}
img {
        border: 0;
}
body {
        font-family: Arial;
        background: #f1f1f1;
        min-width: 960px;
}
header,nav,section,footer,aside {
        display: block;
        height: 1%;
}
*:first-child+html .nav.menu ul li {
        zoom:1;
        display: block;
        position: relative;
}
/**Main**/
#wrapper {
        width: 1118px;
        height: 1343px;
        margin: auto;
}
/**Header**/
header {
        height: 330px;
}
.header-bg {
        height: 330px;
        background: url(images/header-bg.jpg) no-repeat;
}
/**Logo**/
.logo img {
        position: relative;
        margin-left: 89px;
        margin-top: 26px;
}
/**Menu**/
nav.menu {
        font-family: Arial;
        margin-left: 400px;
        margin-top: -48px;
}
nav.menu ul li {
        display: inline-block;
        list-style-type: none;
        margin-right: -11px;
        padding: 9px 9px 8px;
}
nav.menu ul li a{
        font-weight: bold;
        font-size: 12px;
        color: #f1f1f1;
        text-decoration: none;
        text-transform: uppercase;
        padding: 9px 9px 8px;

}
nav.menu ul li a:hover {
        box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.75);
        border-bottom: 1px solid #313a44;
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        background: #14191f;
}
nav.menu ul li.current a {
        box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.75);
        border-bottom: 1px solid #313a44;
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        background: #14191f;
}
/**SocialButton**/
.h-social img.rss {
        background: url(images/rss-sprite.png) no-repeat;
}
.h-social img.rss:hover {
        background-position: 0 -26px;
}
.h-social img.twitter {
        background: url(images/tw-sprite.png) no-repeat;
}
.h-social img.twitter:hover {
        background-position: 0 -26px;
}
.h-social img.plus {
...