JSFiddle - React, Tailwind, and code Playground

HTML

<span class="rainbow" data-text="Hello, World!">Hello, World!</span>

CSS

html, body {
    background: #d6daf0;
    font-family: arial, helvetica, sans-serif;
    font-size: 100px;
}

.rainbow {
    display: inline-block;
    color: white;
    filter: blur(0px);
}

.rainbow::after {
    content: attr(data-text);
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg,
        hsl(0, 100%, 50%),
        hsl(30, 100%, 50%),
        hsl(60, 100%, 50%),
        hsl(90, 100%, 50%),
        hsl(120, 100%, 50%),
        hsl(150, 100%, 50%),
        hsl(180, 100%, 50%),
        hsl(210, 100%, 50%),
        hsl(240, 100%, 50%),
        hsl(270, 100%, 50%),
        hsl(300, 100%, 50%),
        hsl(330, 100%, 50%),
        hsl(360, 100%, 50%))
        0 0 / 200% 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;        
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    filter: blur(10px);
    animation: scroll_background 2s linear infinite;
}

@keyframes scroll_background {
  to { background-position: -200% 0 }
}