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="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>
        <script src="http://www.emocool.com/work/js/responsiveslides.min.js"></script>
       <script>
  $(function() {
    $(".rslides").responsiveSlides({
	speed: 1000,
	maxwidth: 1200
	  });
  });
</script>
  

<div id="menu">
<nav class="clearfix">
<ul class="clearfix">
<li><a href="#home_button" class="home_button">Home</a></li>
<li><a href="#clients_button" id="clients_button">Clients</a></li>
</ul>
</nav>
<div id="clients">gfgdgfdgdfgd</div>
<div id="services">ds</div>
<div id="portfolio">dsa</div>
<div id="contact">dsa</div>
<div id="logo"></div>

CSS

#clients {
	height:auto;
	background:#333;
	float:left;
	width:100%
	overflow:hidden;
	position:relative;
	font-family:12px/23px "HelvBold", Helvetica, Arial, sans-serif;

	
}
#services {
	height:auto;
	background:#333;
	float:left;
	width:100%
	overflow:hidden;
		position:relative;
	
	
}
#portfolio {
	height:auto;
	background:#333;
	float:left;
	width:100%
	position:relative;
	overflow:hidden;
	
	
}
nav {  
    height: 50px;  
    width: 100%;  
    ;  
    font: 15px/3px "HelvBold", Helvetica, Arial, sans-serif; 
    font-weight: bold;  
    position: relative;  
   
}  
nav ul {  
    padding: 0;  
    margin: 0 auto;  
    width: 500px;  
    height: 50px;  
}  
nav li {  
    display: inline;  
    float: left;  
}  
.clearfix:before,  
.clearfix:after {  
    content: " ";  
    display: table;  
}  
.clearfix:after {  
    clear: both;  
}  
.clearfix {  
    *zoom: 1;  
} 

nav a {  
    color: #444; 
    display: inline-block;  
    width: 100px;  
    text-align: center;  
    text-decoration: none;  
    line-height: 60px; 
	text-transform: uppercase;
	letter-spacing:-1px;
  
}  

nav li a {  
     
    box-sizing:border-box;  
    -moz-box-sizing:border-box;  
    -webkit-box-sizing:border-box;  
}  
nav li:last-child a {  
    border-right: 0;  
}  

nav a:hover, nav a:active {  
    color:#f7914a; 
}  

nav a#pull {  
    display: none;  
}      

  
#index_slider
{
  width:100%;
  position: relative;
  overflow:hidden;
  float: left;  
  height:100%;
 
  
}
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  height:100%;
  
  

}

.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;
  
 
  }

JavaScript

$(document).ready(function(){
	$("#clients").css("display","none"); 
	$("#services").css("display","none"); 
	$("#portfolio").css("display","none"); 
	$("#contact").css("display","none");
	            
    $("#clients_button").click(function(){
    	
        	$("#clients").slideDown(1000); //Slide Down Effect  
			$("#index_slider").slideUp(1000); 			
	
     });            
});