JSFiddle - React, Tailwind, and code Playground

by ashishsingh

HTML

<div class="def">
    <p>hello slow</p>
</div>

<div class="med">
    <p>hello medium</p>
</div>

<div class="fast">
    <p>hello fast</p>
</div>

CSS

div { margin: 20px; padding: 30px; text-align: center; border: 1px solid #EEE; color:#FFF; font-weight: bold; display: inline-block;}

    @-webkit-keyframes pulse {
        0% { background: lime; }
        100% { background: green; }
    }
    @-moz-keyframes pulse {
        0% { background: lime; }
        100% { background: green; }
    }
    @-ms-keyframes pulse {
        0% { background: lime; }
        100% { background: green; }
    }
    @-o-keyframes pulse {
        0% { background: lime; }
        100% { background: green; }
    }
    @keyframes pulse {
        0% { background: lime; }
        100% { background: green; }
    }

div.def {
    -webkit-animation: pulse 2s ease infinite alternate;
       -moz-animation: pulse 2s ease infinite alternate;
        -ms-animation: pulse 2s ease infinite alternate;
         -o-animation: pulse 2s ease infinite alternate;
            animation: pulse 2s ease infinite alternate;
}
div.med {
    -webkit-animation: pulse 1s ease infinite alternate;
       -moz-animation: pulse 1s ease infinite alternate;
        -ms-animation: pulse 1s ease infinite alternate;
         -o-animation: pulse 1s ease infinite alternate;
            animation: pulse 1s ease infinite alternate;
}
div.fast {
    -webkit-animation: pulse 0.5s ease infinite alternate;
       -moz-animation: pulse 0.5s ease infinite alternate;
        -ms-animation: pulse 0.5s ease infinite alternate;
         -o-animation: pulse 0.5s ease infinite alternate;
            animation: pulse 0.5s ease infinite alternate;
}