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="slider">
    	<div id="index_slider">
        <div id="mask">
						 <ul class="rslides" id="rslides" >
   						 <li><img src="img/index_design_01.jpg"></li>
                         <li><img src="img/index_design_02.jpg"></li>                     
                       
						 </ul></div></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="#rslides">clients</a></div>
            <div id="second_slider"></div>
    	
        </div>

CSS

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

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

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

}

#mask {
	
	
}

/* menu styles */ 

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