JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table">
    <div class="row">asdfsdaf</div>
     <div class="row">asdfsdaf</div>
     <div class="row">asdfsdaf</div>
     <div class="row">asdfsdaf</div>
     <div class="row">asdfsdaf</div>
     <div class="row">asdfsdaf</div>
</div>

CSS

body {background-color:#222; font-family: Helvetica, Arial, Sans-Serif;}
.table {
border-top: solid 1px #050505;
border-bottom: solid 1px #414141;
}
.table > .row {
border-bottom: solid 1px #000000;
border-top: solid 1px #414141;
padding: 7px 10px;
cursor: pointer;
color:#DADADA;
}

.table > .row:hover {
background-color:#252525;
color:#fff;
}

.table:hover > .row:not(:hover) {
color:#646464;
}