JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<table>
  <tr>
    <td>
      <div class="td-container">
        <a href="#">click</a>
      </div>
    </td>
     <td>
       <div class="td-container">
        <a href="#">click</a>
      </div>
    </td>
     <td>
        <div class="td-container">
        <a href="#">click</a>
      </div>
    </td>
        <td>
           <div class="td-container">
        <a href="#">click</a>
      </div>
    </td>
        <td>
         <div class="td-container">
        <a href="#">click</a>
      </div>
    </td>
        <td>
           <div class="td-container">
        <a href="#">click</a>
      </div>
    </td>
        <td>
           <div class="td-container">
        <a href="#">click</a>
      </div>
    </td>
  </tr>
</table>
</div>

CSS

table {
    width: 100%;
    background-color: red;
}
td {
     min-width: 75px;
     max-width: 150px;
     height: 40px;
     background-color: lightgreen;
}

.container{
  width: 100%;
}

.td-container{
  width: 100%;
  height: 100%;
}

a{
  display: block;
}