JSFiddle - React, Tailwind, and code Playground

HTML

<div id="first-part">
      <div id="slider">
         <img src="http://im63.gulfup.com/PEisPL.jpg" class="slider_image" id="1"/>
<!--        <img src="http://im63.gulfup.com/7zd1My.jpg" class="slider_image" id="2"/>
        <img src="http://im63.gulfup.com/FWiTI0.jpg" class="slider_image" id="3"/> -->
<img src="http://im63.gulfup.com/wVopzU.png" id="next"/>
      </div>
    </div>

CSS

body,#first-part,#slider{
  padding:0px;
  margin:0px;
}

.slider_image{
  width:100%;
  z-index: 1;
}

#slider{
  height:660px;
  overflow:hidden;
  display:inline-block;
  white-space:nowrap;
  margin: auto;
}

#next{
  position: absolute;
  height: 6em;
  width:80px;
  z-index: 5;
  margin:auto;
  left:0;
  right:0;
  top:50%;
}