JSFiddle - React, Tailwind, and code Playground

JavaScript

var SlideBullet = React.createClass({
  openSlide: function(){  
    this.props.certainSlide(this.props.slideNumber);
  },
  render: function(){
    return <span onClick={this.openSlide} className={this.props.classer}>•</span>
  }
})
var Slider = React.createClass({
  getInitialState: function(){
    return {
      curslide: 0
    }
  },
  clearIntervals: function () {
      this.intervals.map(clearInterval);
      this.intervals = [];
  },
  componentWillMount: function() {
    this.intervals = [];
  },
  setInterval: function() {
    this.intervals.push(setInterval.apply(null, arguments));
  },
  componentWillUnmount: function() {
    this.clearIntervals();
  },
  componentDidMount: function() {
    var slideInterval = this.setInterval(this.nextSlide, 10000);
  },
  nextSlide: function(){
    var cs = this.state.curslide;
    cs += 1;
    if (cs>=Slides.length) {
      cs = 0
    }
    this.setState({curslide:cs});
  },
  certainSlide: function(number){
      this.clearIntervals();
    this.setState({curslide:number});
  },
  render: function(){
    var classTag = cx({
      'dark-text': this.props.dark
    });
    var marginleft = this.props.style.width*this.state.curslide*-1;
    var newstyle = merge(this.props.style,{'marginLeft':marginleft});

    var slides = Slides.map(function(s,i){
      return <Slide link={s} key={'slider-slide-key'+i} style={this.props.style}/>
    }.bind(this));

    var labels = Slides.map(function(s,i){
      return <SlideBullet classer={i===this.state.curslide?'current-slide':''} slideNumber={i} certainSlide={this.certainSlide}/>
    }.bind(this))
    return <div className='slider-holder' style={this.props.style}>
            <ul className='ux-at-slider' style={newstyle}>
              {slides}
            </ul>
            <div className='slider-labels'>
              {labels}
            </div>
          </div>
  }
})