JSFiddle - React, Tailwind, and code Playground

by rodneyrehm

HTML

<p>BeeLine Reader is an exciting new technology that helps
people read faster on computers, smartphones, and
tablets. BeeLine Reader applies a color gradient to text that
helps reduce “line transition errors” (accidentally skipping a
line or re-reading the same line twice). The color gradient
generated by BeeLine Reader helps guide the reader’s
eyes from the end of one line to the beginning of the next,
which significantly reduces the chance of accidentally
    skipping or repeating lines.</p>

CSS

body {
    padding: 20px;
    font-size: 16px;
}

p {
    
    background: red;
    background: -webkit-linear-gradient(left, transparent, green) 0 1.5em no-repeat,
                -webkit-linear-gradient(left, blue, magenta) 0 0 no-repeat;
/*
    -webkit-background-clip: text;
       -moz-background-clip: text;
            background-clip: text;
*/
    background-size: 100% 1.5em, 100% 1.5em;
    color: transparent;
    width: 300px;
    margin: 0 auto;
    text-align: justify;
    line-height: 1.5em;
}