JSFiddle - React, Tailwind, and code Playground
by Victor
HTML
<table style="border:1px solid #e3e3e3;
border-left:5px solid #2F7ED8;
border-collapse:collapse;
width:100%;
font-size:18px;
font-family: sans-serif;mso-table-lspace:0pt; mso-table-rspace:0pt;">
<thead>
<tr style="background:#222;color:white;">
<td style="font-size:23px;text-transform: uppercase;font-weight: bolder; color:white;padding:3px 5px;text-align: center;background:#2F7ED8;" colspan="1"> <h2>Alert!</h2></td>
<td style="text-align:center;" colspan="1">AN ALARM HAS BEGUN AT <br/>10:30am</td>
</tr>
</thead>
<tbody >
<tr style="background:#222;color:white;border-left:3px;border-bottom:3px solid white;">
<td style="font-size:14px;text-transform: uppercase;font-weight: bolder; color:white;padding:3px 5px;text-align: center;background:#222;"> <h2>Machine</h2></td>
<td style="text-align:center;font-size:18px;">Press 4</td>
</tr>
<tr style="background:#222;color:white;border-left:3px;border-bottom:3px solid white;">
<td style="font-size:14px;text-transform: uppercase;font-weight: bolder; color:white;padding:3px 5px;text-align: center;background:#222;"> <h2>Start Time</h2></td>
<td style="text-align:center;font-size:18px;">10:34am</td>
</tr>
<tr style="background:#222;color:white;border-left:3px;border-bottom:3px solid white;">
<td style="font-size:14px;text-transform: uppercase;font-weight: bolder; color:white;padding:3px 5px;text-align: center;background:#222;"> <h2>End Time</h2></td>
<td style="text-align:center;font-size:18px;">11:24</td>
</tr>
<tr style="background:#222;color:white;border-left:3px;border-bottom:3px solid white;">
<td style="font-size:14px;text-transform: uppercase;font-weight: bolder; color:white;padding:3px 5px;text-align: center;background:#222;"> <h2>Condition</h2></td>
<td style="text-align:center;font-size:18px;"><</td>
</tr>
<tr style="background:#222;color:white;border-left:3px;border-bottom:3px solid white;">
<td style="font-size:14px;text-transform:...
CSS
td, tr {
text-align:center; }