JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.3.1/cerulean/bootstrap.min.css">
<div class="search">
  <input type="text" class="input">

  <input type="checkbox" name="" id="">
  <input type="checkbox" name="" id="">
  <input type="checkbox" name="" id="">

</div>

<table class="table table-striped">
  <thead>
    <th>
      Name
    </th>
    <th>
      Active
    </th>
    <th>
      Test
    </th>
  </thead>

  <tbody>
    <tr>
      <td>
        Thing 00001
      </td>
      <td class="active">Active</td>
      <td>
        <div class="btn btn-secondary">Test</div>
      </td>
    </tr>
    <tr>
      <td>
        Thing 00001
      </td>
      <td class="inactive">Inactive</td>
      <td>
        <div class="btn btn-secondary">Test</div>
      </td>
    </tr>

    <tr>
      <td>
        Thing 00001
      </td>
      <td class="inactive">Inactive</td>
      <td>
        <div class="btn btn-secondary">Test</div>
      </td>
    </tr>

    <tr>
      <td>
        Thing 00001
      </td>
      <td class="active">Active</td>
      <td>
        <div class="btn btn-secondary">Test</div>
      </td>
    </tr>

    <tr>
      <td>
        Thing 00001
      </td>
      <td class="active">Active</td>
      <td>
        <div class="btn btn-secondary">Test</div>
      </td>
    </tr>

    <tr>
      <td>
        Thing 00001
      </td>
      <td class="active">Active</td>
      <td>
        <div class="btn btn-secondary">Test</div>
      </td>
    </tr>

    <tr>
      <td>
        Thing 00001
      </td>
      <td class="active">Active</td>
      <td>
        <div class="btn btn-secondary">Test</div>
      </td>
    </tr>

    <tr>
      <td>
        Thing 00001
      </td>
      <td class="active">Active</td>
      <td>
        <div class="btn btn-secondary">Test</div>
      </td>
    </tr>

    <tr>
      <td>
        Thing...

CSS

.search {
  position: fixed;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  height: 3em;
  background: white;
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
  padding: 0.6em;
  display: flex;
  box-sizing: border-box;
}

.search+* {
  margin-top: 3.5em;
}

table {
  width: 100%;
}

td.active {
  color: #449955;
}

td.inactive {
  color: #a23333;
}