JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box"></div>

CSS

div.box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left:0; 
  background: linear-gradient(271deg, #000000, #852cdb);
  background-size: 400% 400%;

-webkit-animation: AnimationName 10s ease infinite reverse;
-moz-animation: AnimationName 10s ease infinite reverse;
-o-animation: AnimationName 10s ease infinite reverse;
animation: AnimationName 10s ease infinite reverse;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
@-o-keyframes AnimationName {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
@keyframes AnimationName { 
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}