JSFiddle - React, Tailwind, and code Playground

Animated Gradient Background

by Jennifer Perrin

HTML

<h1 class='text_fade '>Animated Gradient Background</h1>
<div></div>
<div></div>
<div></div>

CSS

@import url(http://fonts.googleapis.com/css?family=Montserrat:700);

body { 
    background-color:#000; 
    overflow:hidden;
}

h1 {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 48vh;
    color:hsla(360, 45%, 95%, .9);
    font-family: 'Montserrat', sans-serif;
    letter-spacing: .8em;
    font-size:2vw;
    font-weight: normal;
    opacity: .2;
    text-transform: uppercase;
    text-shadow: hsla(0, 45%, 5%, .3) 0 0 1px, hsla(360, 55%, 95%, .3) 0 -1px 2px,  hsla(0, 45%, 5%, .3) 0 -1px 2px, hsla(360, 55%, 95%, .3) 0 20px 15px;
}
h3 {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom:2em;
    color:hsla(360, 45%, 95%, .9);
    font-family: 'Montserrat', sans-serif;
    letter-spacing: .8em;
    font-size:1vw;
    font-weight: normal;
    opacity: .2;
    text-transform: uppercase;
    text-shadow: hsla(0, 45%, 5%, .3) 0 0 1px, hsla(360, 55%, 95%, .3) 0 -1px 2px,  hsla(0, 45%, 5%, .3) 0 -1px 2px, hsla(360, 55%, 95%, .3) 0 20px 15px;
}
a{
    text-decoration:none;
}
@keyframes fade_text {
    0%  { opacity:1;}
    10%  { opacity:.8; }
    25%  { opacity .5; }
    50%  { opacity:.3; }
    65%  { opacity:.5; }
    90%  { opacity: .8; }
    100% { opacity:1; }
}
@-o-keyframes fade_text{
    0%  { opacity:1;}
    10%  { opacity:.8; }
    25%  { opacity .5; }
    50%  { opacity:.3; }
    65%  { opacity:.5; }
    90%  { opacity: .8; }
    100% { opacity:1; }
}
@-moz-keyframes fade_text{
    0%  { opacity:1;}
    10%  { opacity:.8; }
    25%  { opacity .5; }
    50%  { opacity:.3; }
    65%  { opacity:.5; }
    90%  { opacity: .8; }
    100% { opacity:1; }
}
@-webkit-keyframes fade_text{
    0%  { opacity:1;}
    10%  { opacity:.8; }
    25%  { opacity .5; }
    50%  { opacity:.3; }
    65%  { opacity:.5; }
    90%  { opacity: .8; }
    100% { opacity:1; }
}
.text_fade{
    -webkit-animation: fade_text 8s infinite ease-in;
    -moz-animation: fade_text 8s infinite ease-in;
    -o-animation: fade_text 8s infinite...