JSFiddle - React, Tailwind, and code Playground

by Anand Chowdhary

HTML

<div class="hello">&#8377;</div>

CSS

.hello {
    position: absolute;
    left: 10vw;
    right: 10vh;
    top: 10vw;
    height: 300px;
    line-height: 300px;
    background: #69e;
    color: #fff;
    text-align: center;
    font-size: 64px;
    
    -webkit-animation: hello 10s;
}

@-webkit-keyframes hello {
    0% { -webkit-filter: hue-rotate(0deg); }
    16% { -webkit-filter: hue-rotate(60deg); }
    32% { -webkit-filter: hue-rotate(120deg); }
    48% { -webkit-filter: hue-rotate(180deg); }
    64% { -webkit-filter: hue-rotate(240deg); }
    80% { -webkit-filter: hue-rotate(300deg); }
    100% { -webkit-filter: hue-rotate(360deg); }
}