JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button-group-navigation">
    <div class="btn"><i class="icon-heart"></i></div>
    <div class="btn"><i class="icon-heart"></i></div>
    <div class="btn"><i class="icon-heart"></i></div>
    <div class="btn"><i class="icon-heart"></i></div>
    <div class="btn"><i class="icon-heart"></i></div>
    <div class="btn"><i class="icon-heart"></i></div>
</div>

CSS

.btn {
padding: 40px 40px 30px 40px;
margin: 0 1px 0 0;
text-decoration: none;
text-align: center;
color: #fff;
cursor: pointer;
background: #34495e;
border-bottom: 10px solid #000;
}
.btn:hover{
	border-bottom:10px solid #fff;
	transition-property:border-bottom .3s linear 0s;
	-moz-transition:border-bottom .3s linear 0s;
	-webkit-transition:border-bottom .3s linear 0s;
	-o-transition:border-bottom .3s linear 0s;	
}
.button-group-navigation {
display: inline-block;
list-style: none;
padding: 0;
margin: 0;
zoom: 1;
background: #fff;
}

.button-group-navigation .btn {
    float: left;
    margin-left:0;
}

.button-group-navigation > .btn:not(:first-child):not(:last-child),
.button-group-navigation li:not(:first-child):not(:last-child) .btn {
    border-radius: 0;
}

.button-group-navigation > .btn:first-child,
.button-group-navigation li:first-child .btn {
    margin-left: 0;
}

.button-group-navigation > .btn:last-child,
.button-group-navigation li:last-child > .btn {
    border-right:none;

}