JSFiddle - React, Tailwind, and code Playground
by Craig Martin
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#comtab {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
#comtab th, #comtab td {
text-align: center;
padding: 16px;
font-size:1.3em;
}
#comtab th:first-child, #comtab td:first-child {
text-align: center;
}
#comtab th {
font-size:1.6em;
font-family: var(--font-heading-family);
font-style: var(--font-heading-style);
font-weight: var(--font-heading-weight);
}
#comtab tr:nth-child(even) {
background-color: #f2f2f2 !important;
}
#comtab .fa-check {
color: green;
}
#comtab .fa-remove {
color: red;
}
</style>
<div style="padding-bottom:85px;">
<table id="comtab">
<tr>
<th style="min-width:250px;">FEATURES</th>
<th style="min-width:300px;">SHIGERU LASH SERUM</th>
<th style="min-width:100px;">OTHERS</th>
<th>EXPLANATION</th>
</tr>
<tr>
<td style="text-align:left;">5ml lasts longer than 30 days</td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-times" style="color:red;"></i></td>
<td style="text-align:left;">2ml (they claim is a 90 day supply)</td>
</tr>
<tr>
<td style="text-align:left;">No irritation</td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-times" style="color:red;"></i></td>
<td style="text-align:left;">Burns eyes</td>
</tr>
<tr>
<td style="text-align:left;">Safe for extensions</td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-times" style="color:red;"></i></td>
<td style="text-align:left;">Oils cause shorter extension life and breakdown lash extestion adhesives.</td>
</tr>
<tr>
<td style="text-align:left;">Contains prostaglandin analogues. AKA: Bimatoprost, Isopropyl Cloprostenate, Dechloro Dihydroxy, Difluoro Ethylcloprostenolamide</td>
<td><i class="fa fa-times"...