JSFiddle - React, Tailwind, and code Playground

by Zer00ne Null

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table borderless table-condensed">
<tr class="text-danger"><td colspan='3'>1 laptop was not added because there were no unique identifiers (hostname, asset tag or serial).</td></tr>  <tr class="text-danger"><td colspan='3'>6 laptops were not added because of duplicated input: </td></tr></table>

  <table class="table table-bordered table-condensed no-bottom-pad" style="width:100%;">
	<thead class="bg-danger">
  <tr><th>Hostname</th><th>Asset Tag</th><th>Serial</th></tr></thead>
	<tbody>
      <tr>
      <td>TCN-L-W7P-467</td>
      <td>467</td>
      <td></td>
    </tr>
      <tr>
      <td>TCN-L-W7P-467</td>
      <td>468</td>
      <td></td>
    </tr>
      <tr>
      <td>TCN-L-W7P-480</td>
      <td>480</td>
      <td>46778978</td>
    </tr>
      <tr>
      <td>TCN-L-W7P-480</td>
      <td>480</td>
      <td>46778978</td>
    </tr>
      <tr>
      <td>TCN-L-W7P-469</td>
      <td>468</td>
      <td></td>
    </tr>
      <tr>
      <td>TCN-L-W7P-</td>
      <td></td>
      <td>46778978</td>
    </tr>
</tbody>
<tbody>
  <tr class="text-danger"><td colspan='3'>1 laptop was not added because it is  already in the database: </td></tr>
 
    <tr><th>Hostname</th><th>Asset Tag</th><th>Serial</th></tr>
      <tr>
      <td>TCN-L-W7P-466</td>
      <td>466</td>
      <td>46857421LKJ</td>
    </tr>
  </tbody>
	<tbody>
  <tr class="text-success"><td colspan='3'>1 laptop was added to the database: </td></tr>
<tr>
    <th>Hostname</th><th>Asset Tag</th><th>Serial</th></tr>
      <tr>
      <td>TCN-L-W7P-470</td>
      <td>470</td>
      <td></td>
    </tr>
</tbody>
</table>