JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

CSS

.body{
 background:#ECEFF4;   
}
.item {
    float:left;
    background: #ccc;
    width: 100px;
    height: 100px;
    border:1px #fff solid;
    border-top: 1px #BCC0C3 solid;
    border-bottom: 1px #BCC0C3 solid;
    border-right-width: 0;
    margin-top:20px;
}

.item:last-child {
    border-right-width: 1px;
}

.item:hover {
    border: 1px #f00 solid;
    background:#ECEFF4;
    border:1px #BDC0C5 solid;
    border-bottom:1px #EDF0F5 solid;
}

.item:hover + .item {
    border-left-width: 0;
}