JSFiddle - React, Tailwind, and code Playground

by secondfre

HTML

<div id="box">
    <p>Some Text</p>
</div>

CSS

#box {
    height: 250px;
    width: 250px;
    background: red;
    border-radius: 125px;
}

#box p {
    font: 25px/250px Helvetica, sans-serif;
    color: white;
    text-align: center;
}

@-webkit-keyframes pulse {
      0% {background-color: red;}
     15% {background-color: blue;}
     30% {background-color: green;}
     45% {background-color: yellow;}
     60% {background-color: orange;}
     75% {background-color: gray;}
     90% {background-color: black;}
    100% {background-color: orange;}
}

#box:hover {
    -webkit-animation-name: pulse;
    -webkit-animation-duration: 20s;
    -webkit-animation-iteration-count: 10;
    -webkit-animation-direction: alternate;

}