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

.container {
  width: 240px;
  margin: 20px;
  border: 1px solid black;
}

.block {
  border: 1px solid silver;
  margin: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100px;
}

.block.row {
  width: 220px;
}

Babel + JSX

const Blocks = props => (
  <div className="container">
    {[...Array(props.num)].map((n, i) => (
      <div className={'block' + (i === props.num - 1 && !(i & 1) ? ' row' : '')}>
        {i + 1}
      </div>
    ))}
  </div>
);

ReactDOM.render(
  <div>
    <Blocks num={5} />
    <Blocks num={4} />
    <Blocks num={3} />
    <Blocks num={6} />
  </div>,
  document.getElementById('app')
);