JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="app"></div>

Babel + JSX

class Slider extends React.Component {
  state = {
    active: 0,
  }

  nextSlideHandler = ({ target: { dataset: { step } } }) => {
    const len = this.props.images.length;

    this.setState(({ active }) => ({
      active: (active + len + +step) % len,
    }));
  }

  render() {
    const { active } = this.state;
    const { images } = this.props;

    return (
      <div>
        <div>{active + 1} / {images.length}</div>
        <div>
          <button
            data-step="-1"
            onClick={this.nextSlideHandler}
            className="prev"
          >
            prev
          </button>
        </div>
        <div>
          <img src={images[active]} />
        </div>
        <div>
          <button
            data-step="1"
            onClick={this.nextSlideHandler}
            className="next"
          >
            next
          </button>
        </div>
      </div>
    );
  }
}

const Product = (props) => (
  <div className="product">
    <div className="product__image">
      <Slider images={props.images} />
    </div>
    <div className="product__name">{props.name}</div>
    <div className="product__price">{props.price} грн</div>
  </div>
);

const App = ({ data }) => (
  <div className="App">
    <div>
      <h3>Товары</h3>
      <div className="collection">
        {data.map(n => <Product key={n.id} {...n} />)}
      </div>
    </div>
  </div>
);


const DATA = [
  {
    id: 1,
    name: "Product 1",
    price: 50,
    category: "Sporting Goods",
    images: [
      "https://ihatetomatoes.net/demos/_rw/01-real-estate/tn_property04.jpg",
      "https://ihatetomatoes.net/demos/_rw/01-real-estate/tn_property02.jpg",
      "https://ihatetomatoes.net/demos/_rw/01-real-estate/tn_property01.jpg",
      "https://ihatetomatoes.net/demos/_rw/01-real-estate/tn_property03.jpg"
    ],
  },
  {
    id: 2,
    name: "Product 2",
    price: 70,
    category: "Sporting Goods",
    images: [
     ...