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

td {
  border: 1px solid silver;
  padding: 5px;
  font-family: monospace;
}

Babel + JSX

function transformData(data) {
  const rowsCount = Math.max(...data.map(n => n.length));

  return data.map(n => {
    const col = n.map(m => ({ data: m }));

    const rowspan = 1 + rowsCount - col.length;
    if (rowspan > 1) {
      col[col.length - 1].rowspan = rowspan;
    }

    return col;
  }).reduce((acc, n) => {
    n.forEach((m, i) => (acc[i] = acc[i] || []).push(m));

    return acc;
  }, []);
}

function App({ data }) {
  return (
    <table>
      <tbody>{transformData(data).map(n => (
        <tr>{n.map(m =>
          <td rowSpan={m.rowspan}>{m.data}</td>)}
        </tr>))}
      </tbody>
    </table>
  );
}

const data = [
  ['one'],
  [...'1234'],
  ['one', 'two'],
  ['one', 'two'],
  ['one'],
  ['one', 'two', 'three'],
  ['X'],
];

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