JSFiddle - React, Tailwind, and code Playground

by DeadByElpy

HTML

<div class="page">
  <div class="header">
    <span>LOGO</span>
    <span>10:31</span>
  </div>
  <div class="content">
    <div class="grid">
      <table>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
      </table>
    </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

.page {
  width: 640px;
  height: 360px;
  background: #0fc;
}

.header {
  width: 100%;
  height: 40px;
  background: #555;
  color: #f0f0f0;
}

.content {
  width: 640px;
  height: 320px;
  position: relative;
}

.grid {
  /* position: absolute; */
  position: inline-block;
}

/* .grid:after {
  content: "";
  display: table;
  clear: both;
} */

table {
  position: relative;
  top: 30px;
  margin: 0 auto;
}

td {
  width: 34px;
  height: 34px;
  border: 1px solid green;
}