JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id="root">

</div>

CSS

body {
  background: #ccc;
}

ul {
  list-style: none;
  padding: 0;
}

ul li {
  float: left;
  padding: 0 10px;
}

ul li a {
  cursor: pointer;
  font-weight: 700;
  color: blue;
}

ul li a:hover {
  cursor: pointer;
  text-decoration: underline;
}

Babel + JSX

class Cars extends React.Component{
	constructor(){
  	super()
    
    this.state = {
    	limit: 5,
      cars: ["Audi", "Alfa Romeo", "BMW", "Citroen", "Dacia", "Ford", "Mercedes", "Peugeot", "Porsche", "VW"]
    }
    
    
  }
  
  showPreviousCars() {
  	// show previous 5 items
  }
  
  showNextCars(){
  	this.setState({
    	limit: this.state.limit + 5
    })
  }
  
  
  render(){
  	let cars = this.state.cars.slice(0,this.state.limit);
  	return(
    	<div className="car-wrapper">
        <ul>
          <li><a onClick={this.showPreviousCars.bind(this)}>Previous 5</a></li>
       	  {cars.map((car, i) => {
        	return(
          	<li key={i}>{car}</li>
          )
        	
        })}
        <li><a onClick={this.showNextCars.bind(this)}>Next 5</a></li>
        </ul>

    	</div>
    )
  }
}

ReactDOM.render(<Cars />, document.getElementById('root'))