JSFiddle - React, Tailwind, and code Playground

by DeadByElpy

HTML

<div class="page">
  <div class="header">
    <div class="groupListContainer">
      <div class="groupList">
        <div class="groupList-item">
          <div class="groupList-item-body">
            <div class="groupList-item-icon"></div>
            <div class="groupList-item-title">Media</div>
          </div>
        </div>
        <div class="groupList-item">
          <div class="groupList-item-body">
            <div class="groupList-item-icon"></div>
            <div class="groupList-item-title">Apps</div>
          </div>
        </div>
        <div class="groupList-item">
          <div class="groupList-item-body">
            <div class="groupList-item-icon"></div>
            <div class="groupList-item-title">Games</div>
          </div>
        </div>
      </div>
    </div>
    <div id="clock" class="timer">04:22</div>
  </div>
  <div class="body">
    <div class="arrow left">
      <span>&lt;</span>
    </div>
    <div class="gc">
      <div class="grid">
        <table>
          <tbody>
            <tr>
              <td>1</td>
              <td>2</td>
              <td>3</td>
              <td>4</td>
              <td>5</td>
              <td>6</td>
            </tr>
            <tr>
              <td>7</td>
              <td>8</td>
              <td>9</td>
              <td>10</td>
              <td>11</td>
              <td>12</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="arrow right">
      <span>&gt;</span>
    </div>
  </div>
  <div class="footer">
    <span>App description qwe qw eqw eqw eqw eqweqw qwe</span>
  </div>
</div>

CSS

.page {
  width: 1280px;
  height: 720px;
  position: absolute;
  left: 0;
  top: 0;
  visibility: visible;
  overflow: hidden;
}

.header,
.footer {
  width: 100%;
  height: 96px;
  line-height: 96px;
  text-align: center;
}

.body {
  width: 100%;
height: 528px;
line-height: 100%;
background-color: #0fc;
position: relative;
}

.footer {
  background-color: rgba(0, 255, 204, 0.3);
}

.footer > span {
  vertical-align: middle;
  color: #000;
}

.groupListContainer {
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
}

.groupList {
  width: 48px;
  width: auto;
  display: table;
  table-layout: fixed;
  margin: 0 auto;
  border-spacing: 30px 0;
  border-collapse: separate;
}

.groupList-item {
  height: 48px;
  width: 48px;
  background-color: rgba(23, 23, 23, 0.3);
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.groupList-item-body {
  width: 100%;
  height: 100%;
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
}

.groupList-item-icon {
  position: absolute;
  width: 100%;
  height: 100%;
}

.groupList-item-title {
  position: absolute;
  top: 10px;
  text-align: center;
  width: 48px;
  font-weight: bold;
}

.timer {
  background-color: rgba(23, 23, 23, 0.3);
  height: 48px;
  width: 84px;
  top: 24px;
  right: 24px;
  position: absolute;
  color: #fff;
  text-align: center;
  line-height: 48px;
  font-size: 28px;
  font-weight: bold;
}


.arrow {
  width: 52px;
font-size: 36px;
color: green;
position: absolute;
text-align: center;
}

.arrow.left {
  left: 0;
  top: 256px;
}
.arrow.right {
  right: 0;
  top: 256px;
}

.gc {
position: relative;
height: 100%;
line-height: 100%;
}

.grid {
  padding: 18px 42px;
}

.grid table {
  border-collapse: separate;
  border-spacing: 13px 47px;
}

.grid td {
  width: 182px;
  height: 174px;
  background-color: rgba(23, 23, 23, 0.3);
  text-align: center;
}

JavaScript

(function() {
  setInterval(function() {
    window.clock.innerHTML = (new Date()).getSeconds();
  }, 500);
})();