JSFiddle - React, Tailwind, and code Playground

HTML

<title>AT-Kniga</title>
<link href="files/style.css" rel="stylesheet">
<script src="files/script.js"></script>
<link rel="icon" type="image/ico" href="favicon.ico">
<!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<body>
<div id="wrapper">
    <header>
        <div id="logo">

        </div>
    </header>
    <nav>
        
    </nav>
    <div id="wrContent">
        <section style="min-height: 940px;" class="height">
            <h1>об авторе</h1>
            
        <div class="text">
            <img src="http://atkniga.pythonanywhere.com/static/img/lorem-ipsum-logo.jpg" id="index" alt="logo">
           
            <div class="flatblock block-Об_Авторе">

				<div class="flatblock-content">
					Proin auctor tortor vulputate, 
					sollicitudin nisi et, imperdiet ligula. Etiam semper tristique lacus in 
					consequat. Morbi mattis feugiat varius. Duis enim ante, ultricies id mi 
					nec, blandit viverra augue. Maecenas sollicitudin elit purus, eget 
					iaculis sapien bibendum elementum. Etiam id sollicitudin leo, at 
					elementum dolor. In rhoncus blandit magna, quis placerat risus 
					sollicitudin id. In cras amet.
					Proin auctor tortor vulputate, sollicitudin nisi et, imperdiet ligula. 
					Etiam semper tristique lacus in consequat. Morbi mattis feugiat varius. 
					Duis enim ante, ultricies id mi nec, blandit viverra augue. Maecenas 
					sollicitudin elit purus, eget iaculis sapien bibendum elementum. Etiam 
					id sollicitudin leo, at elementum dolor. In rhoncus blandit magna, quis 
					placerat risus sollicitudin id. In cras amet.
					Proin auctor tortor vulputate, sollicitudin nisi et, imperdiet ligula. 
					Etiam semper tristique lacus in consequat. Morbi mattis feugiat varius. 
					Duis enim ante, ultricies id mi nec, blandit viverra augue. Maecenas 
					sollicitudin elit purus, eget iaculis sapien bibendum elementum. Etiam 
					id sollicitudin leo, at elementum dolor. In...

CSS

body {
    background-color: gray;
    font: 12px Tahoma, Arial, sans-serif;
    margin: 0;
    padding: 0;
}

div#wrapper {
    background-color: white;
    width: 1000px;
    margin: 0 auto;

/*
    opacity: 0.8;
    filter: alpha(Opacity=70);
 */
}

div.clear {
    clear: both;
}

header {
    height: 120px;
}

nav {
    margin:0;
    padding: 0;
    height: 38px;
    outline: 1px solid;
}

div#wrContent {
    padding: 10px 15px;
}

section {
    width: 760px;
    float: left;
    outline: 1px solid;
    color: #2f2f2e;
}

aside {
    width: 200px;
    float: right;
    outline: 1px solid;
}

footer {
    width: 1000px;
    height: 100px;
    outline: 1px solid;
    float: right;

}

div#logo {
    width: 400px;
    height: 120px;
}

div#logo {
    margin-left: -20px;
}

ul.navlist {
    margin:0;
    padding: 0;
}

ul.navlist li {
    padding: 12px;
    float: left;
    list-style: none;
}

ul.navlist li a {
    text-transform: uppercase;
    text-decoration: none;
    display: block;
    font-size: 12px;
    color: #2a2727;
    text-shadow: 0px 0px 0px white;
    -border: 5px solid #ccc;
    -webkit-transition: margin 0.1s ease-out;
    -moz-transition: margin 0.1s ease-out;
    -o-transition: margin 0.1s ease-out;
}

ul.navlist li a:hover {
    text-shadow: 0px 0px 0px #b3cfe2;
    margin-top: 2px;
}


section h1 {
    text-transform: uppercase;
    font-size: 20px;
    color: #3a3939;
    text-align: center;
}

section h2 {
    text-transform: uppercase;
    color: #3a3939;
}

.h1marg{
    margin-bottom: 20px;
}

#index{
    width: 233px;
    height: 354px;
    margin-right: 20px;
    float: left;
}

#index2 {
    width: 233px;
    height: 354px;
    margin-right: 20px;
    float: left;
    margin-bottom: 15px;
}


.book {
    width: 220px;
    height: 300px;
    margin-left: 15px;
    margin-right: 20px;
    margin-bottom: 20px;
    float: left;

}

.blog {
    width: 200px;
    height: 200px;
    margin-left: 15px;
    margin-right: 20px;
   ...