JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<h1>ZorNet.Ru: Создание сайта uCoz</h1>

<header>
<section>
<a href="http://zornet.ru" id="kardasen" target="_blank">ZORNET.RU</a>

<label for="toggle-1" class="tukilosa-narvegis"><ul><li></li> <li></li> <li></li></ul></label>
<input type="checkbox" id="toggle-1">

<nav>
<ul>
<li><a href="#kardasen"><i class="icon-home"></i>Главная</a></li>
<li><a href="#about"><i class="icon-user"></i>Шаблоны</a></li>
<li><a href="#portfolio"><i class="icon-thumbs-up-alt"></i>Стили</a></li>
<li><a href="#services"><i class="icon-gear"></i>Дизайн</a></li>
<li><a href="#gallery"><i class="icon-picture"></i>CSS</a></li>
<li><a href="#contact"><i class="icon-phone"></i>SEO</a></li>
</ul>
</nav>
</header>
</section>

CSS

*{text-decoration:none; list-style:none; margin:0px; padding:0px; outline:none;}
body{margin:0px; padding:0px; font-family: 'Open Sans', sans-serif;}
section{width:100%; max-width:1200px; margin:0px auto; display:table; position:relative;}
h1{margin:0px auto; display:table; font-size:26px; padding:40px 0px; color:#002e5b; text-align:center;}
h1 span{font-weight:500;}





header {
    width: 100%;
    display: table;
    background-color: #2e57c1;
    margin-bottom: 50px;
}
#kardasen {
    float: left;
    font-size: 24px;
    text-transform: uppercase;
    color: #f7f1f1;
    font-weight: 600;
    padding: 20px 0px;
    text-shadow: 0 1px 0 #272424;
}
nav{width:auto; float:right;}
nav ul{display:table; float:right;}
nav ul li{float:left;}
nav ul li:last-child{padding-right:0px;}
nav ul li a{color:#f0f3f7; font-size:18px; padding: 25px 20px; display:inline-block; transition: all 0.5s ease 0s;text-shadow: 0 1px 0 #272525;}
nav ul li a:hover {
    background-color: #002e5b;
    color: #efe598;
    transition: all 0.5s ease 0s;
}
nav ul li a:hover i {
    color: #e2da98;
    transition: all 0.5s ease 0s;
}
nav ul li a i {
    padding-right: 10px;
    color: #f5f7f9;
    transition: all 0.5s ease 0s;
    text-shadow: 0 1px 0 #231f1f;
}

.tukilosa-narvegis ul{display:table; width:25px;}
.tukilosa-narvegis ul li{width:100%; height:3px; background-color:#002e5b; margin-bottom:4px;}
.tukilosa-narvegis ul li:last-child{margin-bottom:0px;}

input[type=checkbox], label{display:none;}

.content{display:table; margin-bottom:59.7px; width:900px;}
.content h2{font-size:17px; font-weight:500; color:#124271; border-bottom:1px solid #2f91ef; display:table; padding-bottom:9.8px; margin-bottom:10px;}
.content p{font-size:14px; line-height:21px; color:#949090; text-align:justify;}

footer{display:table; padding-bottom:30px; width:100%;}
.social{margin:0px auto; display:table; display:table;}
.social li{float:left; padding:0px 10px;}
.social li a{color:#002e5b; transition: all 0.5s...