JSFiddle - React, Tailwind, and code Playground

by rulin shyu

HTML

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

CSS

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

body {
    background-color: #fff;
}