JSFiddle - React, Tailwind, and code Playground

by Arturo Gallegos

HTML

<div id="ejemplo1">
	<div class="row">
		<div class="cell">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, nulla.
		</div>
		<div class="cell">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, nulla.
		</div>
		<div class="cell">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, nulla.
		</div>
	</div>
	<div class="row">
		<div class="cell">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, nulla.
		</div>
		<div class="cell">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, nulla.
		</div>
		<div class="cell">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, nulla.
		</div>
	</div>
</div>


<div id="ejemplo2">
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, dolorum!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, dolorum!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, dolorum!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, dolorum!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, dolorum!</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, dolorum!</div>
</div>

CSS

#ejemplo1{display: table;}
#ejemplo1 .row{display:table-row;}
#ejemplo1 .row .cell{display:table-cell;background:#f02;margin:20px;padding:20px;box-sizing:border-box;}

#ejemplo2{display:flex;flex-wrap: wrap;}
#ejemplo2>div{width: calc(33% - 40px);margin:20px;background:#ddd;padding:20px;box-sizing:border-box;}