JSFiddle - React, Tailwind, and code Playground

by meetravi

HTML

<p id="twinkle">Hello YOU!</p>

CSS

#twinkle {
    width: 100px;
    height: 100px;
    background: #6C5;
    color: white;
    text-align: center;
    line-height: 100px;
    border: 1px solid #7C9;
    border-radius: 50%;
    margin: 10px;
    border: 2px green solid;
}

@-webkit-keyframes twinkly {
    0%   { box-shadow: 0 0 10px #6c9; }
    100% { box-shadow: 0 0 10px red; }
}
@-moz-keyframes twinkly  {
     0%   { box-shadow: 0 0 10px #6c9; }
    100% { box-shadow: 0 0 10px red; }
}
@-ms-keyframes twinkly  {
     0%   { box-shadow: 0 0 10px #6c9; }
    100% { box-shadow: 0 0 10px red; }
}

#twinkle{
    -webkit-animation: twinkly 1s alternate infinite;
    -moz-animation: twinkly 1s alternate infinite;
    -ms-animation: twinkly 1s alternate infinite;
}