JSFiddle - React, Tailwind, and code Playground

HTML

<title> Сайт </title>
<link rel="stylesheet" href="main.css">
<script src="jquery.placeholder.min.js"></script>
<script src="jquery-1.7.2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>

<body>
        <div class="container">
        <div class="row">
                <div class="sidebar">
                    <nav> 
                    <ul> 
                        <li class="span2"> <a href="">Menu</a></li>
                            <ul class="dropdown"> 
                                <li> <a href="#"> Lorem ipsum </a></li>
                                <ul> <li> <a href=""> ASsdfsdf</a></li></ul> 
                                <li> <a href="#"> Lorem ipsum </a></li> 
                            </ul>
                        <li class="span2"> <a href="">About</a></li>
                        <li class="span2"> <a href="">News</a></li>
                        <li class="span2"> <a href="">Location</a></li>
                        <li class="span2"> <a href="">Inspiration</a></li>
                        <li class="span2"> <a href="">Contacts</a></li>
                     </ul>
                    </nav>
                </div>
<div id="slider-wrap">
	<div id="slider">
		<div class="slide"><img src="img/001.jpg" width="640" height="360"></div>
		<div class="slide"><img src="img/002.jpg" width="640" height="360"></div>
		<div class="slide"><img src="img/003.jpg" width="640" height="360"></div>
		<div class="slide"><img src="img/004.jpg" width="640" height="360"></div>
	</div>
</div>
<div class="search">
       <form action="" method="post" id="search-block-form">
        <div class="form-item">
        <input
 onblur="this.value=(this.value=='')?this.title:this.value;"
 onfocus="this.value=(this.value==this.title)?'':this.value;"
 value="Search"
 title="Search"
 type="text" size="25"...

CSS

* {
    transition: all .5s;
    box-sizing: border-box;
}

body {
        font: 1em "PT Sans", Arial, Helvetica;
        background: url(background.png);
        color: #332;
}
/*CSS GRID====================*/

.container {
    width: 940px;
    margin: 0 auto;
}
.row {
    margin-bottom: 20px;
}

.row:after {
    display: block;
    content: ".";
    height: 0;
    visibility: hidden;
    clear: both;
}

[class*="span"] {
    float: left;
    display: inline;
    margin-right: 20px;
}


[class*="span"]:last-child {
    margin-right: 0;
    float: right;
}

.span1 	{	width:  60px }
.span2 	{	width: 140px }
.span3 	{	width: 220px }
.span4 	{	width: 300px }
.span5 	{	width: 380px }
.span6 	{	width: 460px }
.span7 	{	width: 540px }
.span8 	{	width: 620px }
.span9 	{	width: 700px }
.span10 {	width: 780px }
.span11 {	width: 860px }
.span12 {	width: 940px }

.offset1 	{	margin-left:  60px }
.offset2 	{	margin-left: 140px }
.offset3 	{	margin-left: 220px }
.offset4 	{	margin-left: 300px }
.offset5 	{	margin-left: 380px }
.offset6 	{	margin-left: 460px }
.offset7 	{	margin-left: 540px }
.offset8 	{	margin-left: 620px }
.offset9 	{	margin-left: 700px }
.offset10 {	margin-left: 780px }
.offset11 {	margin-left: 860px }
.offset12 {	margin-left: 940px }

/*CSS GRID====================*/
/*MENU====================*/

.sidebar nav ul {
    padding: 0;
    margin: 0;
    box-shadow: 0 6px 7px rgba(0,0,0,.5);
    list-style: none;
    margin-right: 0px;
}

.dropdown {
    display: none;
}

.sidebar nav ul li:hover .dropdown {
    display: block;
}
.sidebar nav ul li a {
    text-decoration: none;
    color: #27dced;
    background: #060622;
    opacity: 0.6;
    display: block;
    width: 140px;
    height: 45;
    text-align: center;
    line-height: 45px;
    margin-bottom: 10px;
     margin-right: 20px;
}

.sidebar nav ul li a:hover {
    background: rgba(52, 68, 103, 0.08);
}



/*SLIDER====================*/
#slider-wrap { /* Оболочка слайдера и кнопок */
	width:640px; 
   ...