JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
<table class="table table-v3">
		<thead>
			<tr>
				<th colspan="2" style="width: 33%;" class="table-align-center"><span class="ip-label">Бесплатно!</span><div class="lead">InstallPack</div></th>
				<th colspan="2" style="width: 33%;"></th>
				<th colspan="2" style="width: 33%;" class="table-align-center">Стандартный<br>установщик</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td colspan="2" class="table-align-center"><i class="material-icons table-value-on">check</i></td>
				<td colspan="2" class="col-md-4 row-desc">Официальный дистрибутив </td>
				<td colspan="2" class="table-align-center"><i class="material-icons table-value-on">check</i></td>
			</tr>
			<tr>
				<td colspan="2" class="table-align-center"><i class="material-icons table-value-on">check</i></td>
				<td colspan="2" class="col-md-4 row-desc">Тихая установка без диалоговых окон</td>
				<td colspan="2" class="table-align-center"><i class="material-icons table-value-off">close</i></td>
			</tr>
			<tr>
				<td colspan="2" class="table-align-center"><i class="material-icons table-value-on">check</i></td>
				<td colspan="2" class="col-md-4 row-desc">Рекомендации по установке необходимых программ</td>
				<td colspan="2" class="table-align-center"><i class="material-icons table-value-off">close</i></td>
			</tr>
			<tr>
				<td colspan="2" class="table-align-center"><i class="material-icons table-value-on">check</i></td>
				<td colspan="2" class="col-md-4 row-desc">Пакетная установка нескольких программ</td>
				<td colspan="2" class="table-align-center"><i class="material-icons table-value-off">close</i></td>
			</tr>	<tr>
		<td colspan="3" class="table-align-center table-align-top">
			<div class="table-download-btn">
				<a class="btn btn-raised btn-success dyn-link" href="https://installpack.net/InstallPack.exe?preselecteditems={SLUG}" data-cn="direct_download" data-cs="{YOUR_SITE}" data-cm="{SLUG}"...

CSS

/* Features table */
.table {
	border: none;
	border-collapse: collapse;
	font-size: 14px;
	margin-bottom: 20px;
	text-align: left;
	width: 100%;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
	padding: 8px;
	line-height: 1.42857143;
	vertical-align: top;
	border-top: 1px solid #ddd;
	border-bottom: 0px;
    border-right: 0px;
}
.table th {
	padding: 8px;
	line-height: 1.42857143;
}
.table th,
.table th:hover,
.table td:hover {
	background: none;
}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
	border-top: 0;
}
.table > thead > tr > th {
	vertical-align: bottom;
	border-bottom: 2px solid #ddd;
	font-size: 16px;
}
.table-align-center {
	vertical-align: middle !important;
	text-align: center;
}
.table-align-top {
	vertical-align: top !important;
}
.material-icons.table-value-on {
	color: #4caf50;
	font-weight: bold;
	font-size: 30px;
}
.material-icons.table-value-off {
	color: #F00;
	font-weight: bold;
	font-size: 30px;
}
.btn.btn-raised:not(.btn-link), .input-group-btn .btn.btn-raised:not(.btn-link), .btn-group-raised .btn:not(.btn-link), .btn-group-raised .input-group-btn .btn:not(.btn-link) {
	-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.btn.btn-raised.btn-success, .input-group-btn .btn.btn-raised.btn-success, .btn.btn-fab.btn-success, .input-group-btn .btn.btn-fab.btn-success, .btn-group-raised .btn.btn-success, .btn-group-raised .input-group-btn .btn.btn-success {
	background-color: #4caf50;
	color: rgba(255,255,255,...