JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider-block">
	<div class="viewport">
		<ul class='slidewrapper' data-current=0>
			<li class='slide'>
				<img src="https://pp.vk.me/c608027/v608027149/7566/4_wKErMzzqA.jpg" alt="">
			</li>
			<li class='slide second'>
				<img src="https://pp.vk.me/c608027/v608027149/756f/4dR0Y5Co-so.jpg" alt="">
			</li>
			<li class='slide third'>
				<img src="https://pp.vk.me/c608027/v608027149/7578/drdahiB-Ees.jpg" alt="">
			</li>
		</ul>
	</div>
	<div class="arrows-block">
		<a href='javascript: void(0)' id='prev_slide' class='arrows'111></a>
		<a href='javascript: void(0)' id='next_slide' class='arrows'>333</a>
	</div>
</div>

CSS

.slider-block {
  height: 585px;
  outline:1px solid red;
}

.slider-block .viewport{
    width: 1180px;
    height: 575px;
    margin:0 auto;
    overflow: hidden;
    position: relative;
    outline:1px solid ;
}

.viewport .slidewrapper{
    position: absolute;
    left: 0;
    top: 0;
    height: 575px;
}

.slidewrapper .slide{
    width: 1180px;
    height: 575px;
    float: left;
    list-style: none;
    background: #ff0000;
}

.arrows-block {
  position: relative;
  width:1180px;
  height: 100px;
  margin:0 auto;
  z-index: 9;
  outline:1px solid green;
}

.arrows-block .arrows {
  position: absolute;
  width: 42px;
  height: 52px;
  top:0;
  background:url(../images/slidebuttons.png);
}

.arrows-block #prev-slide {
  left:0px;
  background-position: 0 0;
  outline:1px solid green;
}

.arrows-block #next-slide {
  right:0px;
  background-position: -42px 0;
  outline:1px solid green;
}