JSFiddle - React, Tailwind, and code Playground

by turnosaurus

HTML

<div class='green-main-grd'>
    <span class='mask'>
        <ul id='scrollList1' class='yellow-list-grd curved'>
            <li><a href='#'>1</a></li>
            <li><a href='#'>2</a></li>
            <li><a href='#'>3</a></li>
            <li><a href='#'>4</a></li>
            <li><a href='#'>5</a></li>
        </ul>
    </span>
</div>

CSS

/* Mask I'm trying to apply */
.mask {   
    content:"";
   -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 20%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 80%);

    display:block;
    width:100%;
    height:100%;
}

/* gradient I'm trying to fade into background */
.yellow-list-grd {
	
	background: 
		linear-gradient(to right,  rgba(30,90,45,1) 0%,rgba(250,235,115,0.5) 50%,rgba(30,90,45,1) 100%), 
		linear-gradient(to top,  rgba(240,175,30,1) 0%,rgba(240,175,30,0) 2px),
		linear-gradient(to bottom,  rgba(250,250,115,1) 0%,rgba(250,235,115,0) 2px) ; /* W3C */
		
}

/* background gradient */
.green-main-grd {
	background: -moz-linear-gradient(top,   0%, rgba(30,90,45,1) 3px, rgba(30,90,45,1) 50%, rgba(50,150,70,1) 89%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(130,200,130,1)), color-stop(3px,rgba(30,90,45,1)), color-stop(50%,rgba(30,90,45,1)), color-stop(89%,rgba(50,150,70,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(130,200,130,1) 0%,rgba(30,90,45,1) 3px,rgba(30,90,45,1) 50%,rgba(50,150,70,1) 89%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(130,200,130,1) 0%,rgba(30,90,45,1) 3px,rgba(30,90,45,1) 50%,rgba(50,150,70,1) 89%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(130,200,130,1) 0%,rgba(30,90,45,1) 3px,rgba(30,90,45,1) 50%,rgba(50,150,70,1) 89%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(130,200,130,1) 0%,rgba(30,90,45,1) 3px,rgba(30,90,45,1) 50%,rgba(50,150,70,1) 89%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82c782', endColorstr='#001e5a2d',GradientType=0 ); /* IE6-9 */
}

.curved
{
  	position:relative;
}

.curved:after{
	content:"";
    position:absolute;
    z-index:1;
    top:100%;
    bottom:0;
	width:120%;
	height:15px;
	left:-10%;
	right:-10%;
    background:-webkit-radial-gradient(50% -3%, ellipse cover, rgba(00, 00, 00, 0.5), rgba(97, 97, 97,...