JSFiddle - React, Tailwind, and code Playground

by Vikash Kumar Gupta

HTML

<span class="glowquote">&raquo; &raquo; &raquo;</span>
<br>
<br>
<span class="glowquote show-background">&raquo; &raquo; &raquo;</span>

CSS

.glowquote.show-background {
    -webkit-background-clip: border-box;
    -moz-background-clip: border-box;
}

.glowquote {
    font-size: 50px;
    transform: rotate(90deg);
    background: -webkit-linear-gradient(left, black 0%, green 40%, green 60%, black 100%);
    background: -moz-linear-gradient(left, black 0%, green 40%, green 60%, black 100%);
    background-size: 150px 50px;
    
    padding: 0 100px;
    
    /* -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
     */
    -webkit-animation: gradient-animation infinite 1s linear;
    -moz-animation: gradient-animation infinite 1s linear;
}
@-webkit-keyframes gradient-animation {
    0% {background-position: left top;    transform: rotate(90deg);
}
    100% {background-position: right top;    transform: rotate(90deg);
}
}

@-moz-keyframes gradient-animation {
    0% {background-position: left top;}
    100% {background-position: right top;}
}