JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div class="header">
</div>

CSS

.header {
    height:100px;
    background: #073047;
    background: -moz-linear-gradient(-45deg, #073047 0%, #225f81 24%, #4d8aae 50%, #225f81 78%, #4d8aae 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#073047), color-stop(24%,#225f81), color-stop(50%,#4d8aae), color-stop(78%,#225f81), color-stop(100%,#4d8aae));
    background: -webkit-linear-gradient(-45deg, #073047 0%,#225f81 24%,#4d8aae 50%,#225f81 78%,#4d8aae 100%);
    background: -o-linear-gradient(-45deg, #073047 0%,#225f81 24%,#4d8aae 50%,#225f81 78%,#4d8aae 100%);
    background: -ms-linear-gradient(-45deg, #073047 0%,#225f81 24%,#4d8aae 50%,#225f81 78%,#4d8aae 100%);
    background: linear-gradient(135deg, #073047 0%,#225f81 24%,#4d8aae 50%,#225f81 78%,#4d8aae 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#073047', endColorstr='#4d8aae',GradientType=1 );
    -webkit-animation: animateheader 6s ease 1;
    -moz-animation: animateheader 6s ease 1;
    animation: animateheader 6s ease 1;
    background-size: 200% 200%;
}

@-webkit-keyframes animateheader {
		    0%{background-position:0% 50%}
		    50%{background-position:100% 50%}
		    100%{background-position:0% 50%}
		}
		@-moz-keyframes animateheader {
		    0%{background-position:0% 50%}
		    50%{background-position:100% 50%}
		    100%{background-position:0% 50%}
		}
		@keyframes animateheader { 
		    0%{background-position:0% 50%}
		    50%{background-position:100% 50%}
		    100%{background-position:0% 50%}
		}