JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slides">
    <div id="slides-holder">
        <div class="slide">1</div>
        <div class="slide">2</div>
        <div class="slide">3</div>
    </div>
</div>

CSS

#slides {
  overflow: hidden; height: 200px; width: 500px; margin: 0 auto;
}
#slides-holder {
  width: 999em; position: relative;
}
#slides .slide {
  position: relative; height: 200px; width: 200px; background: red;
  float: left; margin: 0 150px; white-space: nowrap; text-align: center;
  line-height: 200px;
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
}

JavaScript

jQuery(function ($) {
    var slides = $('#slides .slide');
    slides.click(function () {
        slides.animate({left: '-=500'});
    });
})