JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div class="slide_container">
    <p id="slide1" class="slide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p id="slide2" class="slide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p id="slide3" class="slide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <button id="prev">←</button>
    <button id="next">→</button>
  </div>
</body>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

.slide_container {
  width: 960px;
  margin: 0 auto;
  font-family: 'Open Sans';
}

#prev, #next {
  border: none;
  padding: 10px 20px;
  background-color: #efefef;
  color: #c2c2c2;
  transition: background .2s ease-in-out;
}

#prev:hover, #next:hover {
  background: #dedede;
  cursor: pointer;
}

#prev:focus, #next:focus {
  outline: none;
}

#prev {
  float: left;
  margin-left: 400px;
}

#next {
  float: right;
  margin-right: 400px;
}

JavaScript

var prev = document.getElementById('prev');
var next = document.getElementById('next');

prev.addEventListener('click', function() {
  // Somehow to go to the previous slide
});

next.addEventListener('click', function() {
  // Somehow to go to the next slide
});