JSFiddle - React, Tailwind, and code Playground

by bhupendra negi

HTML

<div class="rTable">
<div class="rTableRow">
<div class="rTableHead"><strong>Name</strong></div>
<div class="rTableHead"><span style="font-weight: bold;">Telephone</span></div>
<div class="rTableHead">&nbsp;</div>
</div>
<div class="rTableRow">
<div class="rTableCell">John</div>
<div class="rTableCell"><a href="tel:0123456785">0123 456 785</a></div>
<div class="rTableCell"><img src="images/check.gif" alt="checked" /></div>
</div>
<div class="rTableRow">
<div class="rTableCell">Cassie</div>
<div class="rTableCell"><a href="tel:9876532432">9876 532 432</a></div>
<div class="rTableCell"><img src="images/check.gif" alt="checked" /></div>
</div>
</div>

CSS

rTable {
  	display: table;
  	width: 100%;
}
.rTableRow {
  	display: table-row;
}
.rTableHeading {
  	display: table-header-group;
  	background-color: #ddd;
}
.rTableCell, .rTableHead {
  	display: table-cell;
  	padding: 3px 10px;
  	border: 1px solid #999999;
}
.rTableHeading {
  	display: table-header-group;
  	background-color: #ddd;
  	font-weight: bold;
}
.rTableFoot {
  	display: table-footer-group;
  	font-weight: bold;
  	background-color: #ddd;
}
.rTableBody {
  	display: table-row-group;
}