JSFiddle - React, Tailwind, and code Playground

by massimilianos

HTML

<div class="content">
   <div class="tablediv"></div>
      <div class="onecolumn center"><h3>TITLE</h3></div>
   </div>
   <div class="tablediv">
      <div class="threecolumns left">ONE:</div>
      <div class="threecolumns center">&nbsp;</div>
      <div class="threecolumns center">- - -</div>
   </div>
   <div class="tablediv">
      <div class="threecolumns left">TWO:</div>
      <div class="threecolumns center">&nbsp;</div>
      <div class="threecolumns center">- - -</div>
   </div>
   <div class="tablediv">
      <div class="threecolumns left">THREE:</div>
      <div class="threecolumns center">&nbsp;</div>
      <div class="threecolumns center"><img class="imageseason" src="http://www.videcom.com/Portals/0/linux_u2.png"></div>
   </div>
</div

CSS

.center {
	text-align: center;
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

.imageseason {
	width: 50%;
	height: 50%;
}

.divtable {
	position: relative;
	clear: left; 
	width: 90%;
	padding-top: 10px;
	padding-left: 15px;
	padding-right: 15px;
}

.onecolumn {
	float: left;
	width: 100%;
	padding-top: 10px;
}

.twocolumns {
	float: left;
	width: 50%;
	padding-top: 10px;
}

.threecolumns {
	float: left;
	width: 33.333333333%;
	padding-top: 10px;
}

.fourcolumns {
	float: left;
	width: 25%;
	padding-top: 10px;
}

.fivecolumns {
	float: left;
	width: 20%;
	padding-top: 10px;
}