JSFiddle - React, Tailwind, and code Playground

by Alexander Startsev

HTML

<ul class="first-list">
    <li>яблоко</li>
    <li>арбуз</li>
    <li>дыня</li>
    <li>камень</li>
</ul>
<ul class="second-list">
    <li>яблоко</li>
    <li>арбуз</li>
    <li>дыня</li>
    <li>камень</li>
</ul>

CSS

ul.first-list,
ul.second-list{
    width: 150px;
    margin: 0 0 20px 0;
    padding: 0 0 0 20px;
    font: 300 12px/12px Arial, sans-serif;
}

li{
    padding: 10px 0;
    position: relative;
}

ul.first-list li+li{
    border-top: 2px #CCC solid;
}

ul.second-list li+li:before{
    height: 2px;
    width: 150px;
    content: "";
    left: 0;
    top: 0;
    position: absolute;
    background: #DEDEDE;
    background-image: -webkit-gradient(
	linear,
	left top,
	right top,
	color-stop(0, #DEDEDE),
	color-stop(1, #FFFFFF)
);
background-image: -o-linear-gradient(right, #DEDEDE 0%, #FFFFFF 100%);
background-image: -moz-linear-gradient(right, #DEDEDE 0%, #FFFFFF 100%);
background-image: -webkit-linear-gradient(right, #DEDEDE 0%, #FFFFFF 100%);
background-image: -ms-linear-gradient(right, #DEDEDE 0%, #FFFFFF 100%);
background-image: linear-gradient(to right, #DEDEDE 0%, #FFFFFF 100%);
}