JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="list">
  <li class="list__item">
    <a href="#" class="list__item-link">
      <span class="list__item-col">111111</span>
      <span class="list__item-col">222222</span>
      <span class="list__item-col">333333</span>
    </a>
  </li>
  <li class="list__item">
    <a href="#" class="list__item-link">
      <span class="list__item-col">111111</span>
      <span class="list__item-col">222222</span>
      <span class="list__item-col">333333</span>
    </a>
  </li>
  <li class="list__item">
    <a href="#" class="list__item-link">
      <span class="list__item-col">111111</span>
      <span class="list__item-col">222222</span>
      <span class="list__item-col">333333</span>
    </a>
  </li>
</ul>

CSS

ul {
  list-style: none;
  padding: 0;
}

.list {
  
}

.list__item {
  background-color: #eee;
}

.list__item + .list__item {
  border-top: 1px solid #ddd;
}

.list__item-link {
  padding: 1em;
  color: #333;
  text-decoration: none;
  display: flex;
  justify-content: space-between;
}

.list__item-link:hover {
  background: #999;
}

.list__item-col {
  
}