JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
    <div class="box-width">
        <a class="box-link" href="#">Content</a>
    </div>
    <div class="box-width">
        <a class="box-link" href="#">Content</a>
    </div>
    <div class="box-width">
        <a class="box-link" href="#">Content</a>
    </div>
</div>
<div class="row">
    <div class="box-width">
        <a class="box-link" href="#">Content</a>
    </div>
    <div class="box-width">
        <a class="box-link" href="#">Content</a>
    </div>
    <div class="box-width">
        <a class="box-link" href="#">Content</a>
    </div>
</div>
<div class="row">
    <div class="box-width">
        <a class="box-link" href="#">Content</a>
    </div>
    <div class="box-width">
        <a class="box-link" href="#">Content</a>
    </div>
    <div class="box-width">
        <a class="box-link" href="#">Content</a>
    </div>
</div>
<div class="row">
    <div class="box-width">
        <a class="box-link" href="#">Content</a>
    </div>
    <div class="box-width">
        <a class="box-link" href="#">Content</a>
    </div>
    <div class="box-width">
        <a class="box-link" href="#">Content</a>
    </div>
</div>

CSS

.row {
    width: 100%;
    border-top: 1px solid #ccc;
}

.row:hover {
    background: red;
}

.row:last-child {
    border-bottom: 1px solid #ccc;    
}

.box-width {
    width: 33%;
    display: inline-block;  
    text-align: center;
}

.box-link {
    display: block;
    width: 100%;
    padding: 1em;
}