JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table_test">
    <tr class ="trstyle">
        <td>Text nr1</td>
        <td>Text nr2</td>
        <td>Text nr3</td>
    </tr>
</table>

CSS

.table_test {
    table-layout:fixed;
    width:800px;
}

.table_test td {
    height:32px;
}
.table_test tr:hover {
    outline: none;
    border-color: #29EC24;
    box-shadow: 0 0 10px #29EC24;
}

.trstyle {
    border-radius:5px;
	background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(51%,#ededed), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* IE10+ */
}
    
}