JSFiddle - React, Tailwind, and code Playground

by glendon philipp baculio

HTML

<div class="slider">
        <div id="img1"></div>
        <div id="img2"></div>
        <div id="img3"></div>
        <div id="img4"></div>
    </div>

    <a href="#">Previous</a>
    <a href="#">Next</a>

CSS

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.slider {
  width: 600px;
  height: 400px;
  margin: 0 auto;
  border: solid;
}
/* demo test purpose*/
.slider>div {/* see me */
  box-shadow:0 0 0 1px ;
  }
    .slider #img1  {
	background: url('https://s31.postimg.org/hxrherccb/sprites.png') no-repeat 0 0;
	background-size: cover;
 width: 600px;
	height:400px;
}
.slider #img2 {
	background: url('https://s31.postimg.org/hxrherccb/sprites.png') no-repeat 0 25.026%;
	background-size: cover;
width: 100%;
	height:100%;
}
.slider #img3 {
	background: url('https://s31.postimg.org/hxrherccb/sprites.png') no-repeat  0 12.87%;
	background-size: cover;
width: 100%;
	height:100%;
}
.slider #img4 {
  background: url('https://s31.postimg.org/hxrherccb/sprites.png') no-repeat 0 33.65%;
  background-size: cover;
width: 100%;
	height:100%;
}