JSFiddle - React, Tailwind, and code Playground

by Vladimir Vasilev

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="container">
<div id="sections">
	<div id="slider">
    	<div id="index_slider">
						 <ul class="rslides" >
                             <li><img src="http://www.emocool.com/work/slide2.jpg"></li>
                         <li><img src="http://www.emocool.com/work/slide2.jpg"></li>                      
						 </ul></div></div>
<script src="http://www.emocool.com/work/js/responsiveslides.min.js"></script>
<script>
  $(function() {
    $(".rslides").responsiveSlides({
	speed: 1000,
	maxwidth: 1200
	  });
  });
</script>

<div id="menu"><a href="#sections">clients</a>  </div>

<div id="clients">gfgd</div>
<div id="services"></div>
<div id="portfolio"></div>
<div id="contacts"></div>
    	</div></div>

CSS

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background:#fff;
}
@media (min-width: 1200px)  {
#container {
	width:1200px;
	height:100%;
	margin: 0 auto;
	z-index:40;
	position:relative;
		
}}
@media (max-width: 1200px)  {
#container {
	width:100%;
	height:100%;
	margin: 0 auto;
	z-index:40;
	position:relative;
}}

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;  
  transition:all 1s ease;	
  
  
}

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
  
#index_slider
{
  width:100%;
  position: relative;
  float: left;  
 
  
}
#slider {
margin: 0 auto;


}

a {
	color:#fff;
	
}

/* menu styles */ 

#menu {
	background:#181818;
	color:#6e7166;
	height:63px;
	width:100%;
	float:left;
	position:relative;
		
}

/* sections */ 

#sections {
	transition:all 1s ease;	
}

#clients {
	height:44px;
	background:#333;
	position:relative;
	float:left;
    
}


#sections:target #clients {
	height:90px;
	background:#333;
	transition:all 1s ease;
}

#sections:target .rslides {
	height:0px;
	transition:all 1s ease;
}