JSFiddle - React, Tailwind, and code Playground

HTML

<div id='footer'>
		<table id='headerBar'>
		    <tr>
			<td class='headerBarActualTd'><a href='/' class='headerBarIconLink'></a><a href='/' id='homeIcon'></a></td>
			<td class='headerBarSpacingTd'></td>
			<td class='headerBarActualTd'><a href='/{{ user.username }}/' class='headerBarIconLink'></a><a href='/{{ user.username }}/' id='myProfileIcon'></a></td>
			<td class='headerBarSpacingTd'></td>
			<td class='headerBarActualTd'><a href='/settings/settingsPage/' class='headerBarIconLink'></a><a href='/' id='settingsIcon'></a></td>
		    </tr>
		</table>
	    </div>

CSS

#footer table {
    position: fixed;
    bottom: 0px;
    margin: 0px auto;
}

#headerBar {
    border-collapse: separate;
    margin: 0px auto;
    width: 100%;
    max-width: 1080px;
    padding-left: 3px;
    padding-right: 2px;
}
#headerBar .headerBarActualTd {
    text-align: center;
    vertical-align: middle;
    width: 33%;
    position: relative;
    border: 1px solid black; 
    border-radius: 3px;
    padding: 2px;
}

#headerBar .headerBarSpacingTd {
    padding: 10px;
}
.headerBarIconLink {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}

.headerBarIconLink:hover {
    border: 1px solid #5f9f9f; 
    border-radius: 3px;
    z-index: 1;
}