JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
        <ul>
            <li></li>
            <p>TEST</p>
            <li></li>
        </ul>
    </div>

CSS

body{background-color: #354052;}
    .main{height: 20px;width: 400px;margin: 100px auto;}
    .main ul li{padding:10px;border-top:1px solid #2b3544;border-bottom:1px solid #303a4a;list-style: none;min-height: 50px;position: relative;}
    .main ul li:after{border-bottom: 1px solid #293241;content: '';width: 100%;height: 1px;position: absolute;left:0px;top:-4px;}
    .main ul li:before{border-bottom: 1px solid #3d495d;content: '';width: 100%;height: 1px;position: absolute;left:0px;top:-1px;}
    .main ul li:first-child{border-top:none;}
    .main ul li:last-child{border-bottom:none;}
    .main ul li:first-child:after ,.main ul li:first-child:before{display: none;}