JSFiddle - React, Tailwind, and code Playground

by Dru Dro

HTML

<div class="tables">
<table class="table">
<tr>
  <td>igor</td>
  <td>gleb</td>
</tr>
<tr>
  <td>igor</td>
  <td>gleb</td>
</tr>
<tr>
  <td>igor</td>
  <td>gleb</td>
</tr>
<tr>
  <td>igor</td>
  <td>gleb</td>
</tr>
<tr>
  <td>igor</td>
  <td>gleb</td>
</tr>
<tr>
  <td>igor</td>
  <td>gleb</td>
</tr>
<tr>
  <td>igor</td>
  <td>gleb</td>
</tr>
<tr>
  <td>igor</td>
  <td>gleb</td>
</tr>
<tr>
  <td>igor</td>
  <td>gleb</td>
</tr>
<tr>
  <td>igor</td>
  <td>gleb</td>
</tr>
</table><table class="table">
<tr>
  <td>igor</td>
  <td>gleb</td>
</tr>
<tr>
  <td>igor</td>
  <td>gleb</td>
</tr>
<tr>
  <td>igor</td>
  <td>gleb</td>
</tr>
<tr>
  <td>igor</td>
  <td>gleb</td>
</tr>
<tr>
  <td>igor</td>
  <td>gleb</td>
</tr>
<tr>
  <td>igor</td>
  <td>gleb</td>
</tr>
<tr>
  <td>igor</td>
  <td>gleb</td>
</tr>
<tr>
  <td>igor</td>
  <td>gleb</td>
</tr>
<tr>
  <td>igor</td>
  <td>gleb</td>
</tr>
<tr>
  <td>igor</td>
  <td>gleb</td>
</tr>
</table></div>

SCSS

html, body {
  overflow-x:hidden;
}
.tables {
  display:flex;
  flex-flow:row wrap;
  align-items:flex-start;
  justify-content: stretch;
  margin: -15px;
}
.table {
  flex: 1 1 calc(50% - 30px);
  background: #aaa;
  border-collapse:collapse;
  margin:0 15px;
  td {
    padding: 20px; // use this value to calc arrow size
    overflow: visible;
    line-height: 1.2em; // use this value to calc arrow size
    border:0;
  }
  td:last-child {
    position: relative;
    z-index: 1;
    &:after {
      position: absolute;
      content: "";
      display: block;
      background: black;
      width: calc(1.2em + 22px); // td line-height + td padding ( + 2px???) 
      height: calc(1.2em + 22px);// td line-height + td padding ( + 2px???) 
      transform: rotate(45deg);
      transform-origin: center;
      top: 9px; //???
      right: calc(-1.2em - 2px); // don't know why. it just works)))
      opacity: 0;
      visibility: hidden;
    }
  }
  tr:hover {
    td {
      background: #000;
      color: #fff;
    }
    td:last-child:after {
      opacity: 1;
      visibility: visible;
    }
  }
}