JSFiddle - React, Tailwind, and code Playground

by Douglas Santos

HTML

<div class="table">
  <div class="row-table-head">
    <div class="col-table">A</div>
    <div class="col-table">B</div>
    <div class="col-table">C</div>
  </div>
  <div class="row-table">
    <a href="http://www.google.com.br" target="_blank">
      <div class="col-table">Conteudo2</div>
      <div class="col-table">#fff</div>
      <div class="col-table">#fff</div>
    </a>
  </div>
  <div class="row-table">
    <a href="http://www.bing.com.br" target="_blank">
      <div class="col-table">Conteudo</div>
      <div class="col-table">#fff</div>
      <div class="col-table">#fff</div>
    </a>
  </div>
</div>

CSS

.row-table-head, .row-table a{
  display: grid;
  grid-template-columns: 100px 100px 100px;
}

.row-table a{
  text-decoration: none;
  color: #000;
}

.row-table a:hover .col-table{
  background-color: #d4ebff;
}

.row-table-head .col-table{
  padding: 2px 12px;
  border: 1px solid #ccc;
  background-color: #eee;
}

.row-table .col-table{
 padding: 4px 12px;
 border: 1px solid #ccc;
}

.row-table .col-table:nth-child(2){}