JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="container">
<div id="section_clients">
<div id="section_services">
	<div id="slider">
    	<div id="index_slider">
						 <ul class="rslides" >
                             <li><img src="http://www.emocool.com/work/slide1.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="#home">clients</a>  <a href="#section_clients">clients</a> <a href="#section_services">services</a>   portfolio contacts</div>
<div id="clients">gfgd</div>
<div id="services">ds</div>
<div id="portfolio">dsa</div>
<div id="contact">dsa</div>
<div id="logo"></div>
    	</div></div></div>

CSS

@charset "utf-8";
/* CSS Document */

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

  

}

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  height:auto;
  

}

.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;
  overflow:hidden;
  float: left; 
  transition:all 1s ease;
  height:430px;
  
}
#slider {
margin: 0 auto;


}


/* menu styles */ 

#menu {
	background:#181818;
	color:#6e7166;
	height:63px;
	width:100%;
	float:left;
	position:relative;
	margin: 0 auto;
	overflow:hidden;
	padding-top:0px;
	margin:0px;
	
		
}

/* sections */ 

#section_services {
	transition:all 1s ease;	

}
#section_clients {
	transition:all 1s ease;	
}

#clients {
	height:0px;
	background:#333;
	float:left;
	width:100%

	
}
#services {
	height:0px;
	background:#333;
	float:left;
	width:100%
	
	
}
#portfolio {
	height:0px;
	background:#333;
	float:left;
	width:100%
	
	
}
#contact {
	height:0px;
	background:#333;
	float:left;
	width:100%;

	
	
}


#section_clients:target #clients {
	height:90px;
	background:#333;
	transition:all 1s ease;
	position:relative;
	float:left;
	transition:all 1s ease;
	
}

#section_clients:target #index_slider {
	height:0px;
	transition:all 1s ease;
	
}

#section_services:target #services {
	height:90px;
	background:#333;
	transition:all 1s ease;
	position:relative;
	float:left;
	transition:all 1s...