JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>ONE</li>
    <li>TWO</li>
    <li>THREE</li>
    <li>FOUR</li>
    <li>FIVE</li>
    <li>SIX</li>
</ul>

CSS

body {
    background: blue;
}

ul {
    font-family: sans-serif;
    list-style:none;
    
    background: -webkit-linear-gradient(bottom, rgba(255,0,0,0), rgba(255, 255, 255, 1)); 
    background: -o-linear-gradient(bottom, rgba(255,0,0,0), rgba(255, 255, 255, 1)); 
    background: -moz-linear-gradient(bottom, rgba(255,0,0,0), rgba(255, 255, 255, 1)); 
    background: linear-gradient(to bottom, rgba(255,0,0,0), rgba(255, 255, 255, 1));  
}

li {
    text-align: center;
    padding-bottom: 20px;
    
     
}

JavaScript

// Im trying to get the text to be faded as its gets further down the page.. ie. the word "SIX" would be barley visable, FIVE would be slightly more visable, FOUR would be slightly more visable that THREE... etc

// It could be done by targetting each LI and giving them there own opactiy but id like the opactiy to gradient throughout the word ie. the bottom of the word SIX would be less visable than the top of the word SIX.

// It could also be done by placing a div above the <ul> but this wouldnt allow the <ul> to be clickable and there is an image background on this page so the div would effect the look of this..