JSFiddle - React, Tailwind, and code Playground

HTML

<ul>	
    <li>翩若驚鴻</li>	
    <li>婉若游龍</li>
    <li>榮曜秋菊</li>
    <li>華茂春松</li>
    <li>髣髴兮若輕雲之蔽月</li>	
    <li>飄颻兮若流風之迴雪</li>
    <li>遠而望之</li>
    <li>皎若太陽升朝霞</li>	
    <li>迫而察之</li>
    <li>灼若芙蕖出淥波</li>
</ul>

SCSS

ul {
	position: relative;
    width: 10em;
	height: 6.3em;
	border: 1px solid silver;
	padding: .3em 0 .3em .5em;
	list-style: none;
    font-size: 2em;
    line-height: 1.6;
	overflow: auto;
    background:
        radial-gradient(at top, rgba(0, 0, 0, .2), transparent 70%) no-repeat,
        radial-gradient(at bottom, rgba(0, 0, 0, .2), transparent 70%) bottom no-repeat;
    background-size: 100% 15px, 100% 15px;
}

ul::before,
ul::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    background-color: red;
}
ul::before {
    top: 0;
    height: 25px;
    background: linear-gradient(to bottom, #fff 20%, transparent) bottom no-repeat;
}
ul::after {
    height: 20px;
    background: linear-gradient(to top, #fff 30%, transparent) bottom no-repeat;
}

body {
    background-color: #fff;
}