JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">123</div>

CSS

.item {
  background: #fcc;
  margin-bottom: 10px;
}
p {
  margin: 0;
}

Babel + JSX

const Bold = function(props) {
	return <b>{props.children}</b>
}

const PBlock = function(props) {
	return (<div className="p-block" children={props.children} />)
}

const Item = function(props) {
	return(
  	<div className="item">
    	<span className="identity"><Bold>id: {props.identity}</Bold></span>
    	<div className="someDivClass">This is div text</div>
    	<div className="someDivClass2">This is div text2</div>
    	<PBlock>
      	<p>Line1</p>
      	<p>Line2</p>
      	<p>Line3</p>
      </PBlock>
  	</div>
  );
}

const List = function(props) {
	return(
    	<div className="list">{props.items}</div>
	);
}

const items = [];
console.time('for');
for(var i = 0; i < 1000; i++) {
  items.push(<Item identity={i} key={'key-'+i} />);
}
console.timeEnd('for');

console.time('render-1');
React.render(<List items={items.slice(0,30)} />, document.getElementById('test'));
console.timeEnd('render-1');

setTimeout(()=>{
  console.time('render-2');
  React.render(<List items={items} />, document.getElementById('test'));
  console.timeEnd('render-2');
}, 0)