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>

CSS

.separator {
  background: red;
  color: white;
  margin: 20px 0;
}

Babel + JSX

const data = [
  {
    id: 1,
    title: 'item1',
    round: [
      {id: 1, total: 1000},
      {id: 2, total: 2000}
    ]
  },
  {
    id: 2,
    title: 'item2',
    round: [
      {id: 1, total: 3000},
      {id: 2, total: 4000}
    ]
  },
  {
    id: 3,
    title: 'item3',
    round: [
      {id: 1, total: 5000},
      {id: 2, total: 6000}
    ]
  },
  {
    id: 4,
    title: 'item4',
    round: [
      {id: 1, total: 7000},
      {id: 2, total: 8000}
    ]
  },
  {
    id: 5,
    title: 'item5',
    round: [
      {id: 1, total: 9000},
      {id: 2, total: 10000}
    ]
  },
  {
    id: 6,
    title: 'item6',
    round: [
      {id: 1, total: 11000},
      {id: 2, total: 12000}
    ]
  },
  {
    id: 7,
    title: 'item7',
    round: [
      {id: 1, total: 13000},
      {id: 2, total: 14000}
    ]
  },
  {
    id: 8,
    title: 'item8',
    round: [
      {id: 1, total: 15000},
      {id: 2, total: 16000}
    ]
  }
]

const DataList = (props) => (
  <div>
    {props.data.map((item) => (
      <div key={item.id}>
        {item.title}
        {item.round.map((r) => <div key={r.id}>{r.total}</div>)}
      </div>
    ))}
  </div>
);

const Separator = () => <div className="separator">=========== разделитель ===========</div>;

const App = (props) => {
  const
    firstThree = props.data.slice(0, 3),
    rest = props.data.slice(3);

  return (
    <div>
      <DataList data={firstThree} />
      <Separator />
      <DataList data={rest} />
    </div>
  )
};


ReactDOM.render(<App data={data} />, document.getElementById('app'));