JSFiddle - React, Tailwind, and code Playground

HTML

<table class="buttons width-25">
    <tr>
        <td><a href="http://www.google.com">Link1 goes here</a>

        </td>
        <td><a href="http://www.google.com">Link2<br>goes<br>here</a>

        </td>
        <td><a href="http://www.google.com">Link3<br>goes<br>here</a>

        </td>
        <td><a href="http://www.google.com">Link4<br>goes<br>here</a>

        </td>
    </tr>
</table>
<table class="buttons width-20">
    <tr>
        <td><a href="http://www.google.com">Link1 goes here</a>

        </td>
        <td><a href="http://www.google.com">Link2<br>goes<br>here</a>

        </td>
        <td><a href="http://www.google.com">Link3<br>goes<br>here</a>

        </td>
        <td><a href="http://www.google.com">Link4<br>goes<br>here</a>

        </td>
        <td><a href="http://www.google.com">Link5<br>goes<br>here</a>

        </td>
</table>

CSS

table {
    width: 100%;
}

.width-20 td {
    width: 20%;
}

.width-25 td {
    width: 25%;
}

.buttons {
    text-align: center;
    font-size: 1.0em;
    font-weight: bold;
    line-height: 200%;
}
.buttons a {
    display: inline-block;
    height: 100%;
    width: 100%;
    margin-bottom: 0.5em;
    padding-top: .6em;
    padding-bottom: .6em;
    color: #fff;
    background-color: #aaabbb;
    border-radius: 5px;
    border: solid #cccccc 1px;
    box-shadow: 2px 2px 1px #888888;
}
.buttons a:active {
    box-shadow: 1px 1px 0px #888888;
}