JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="my-div"></div>
</body>
CSS
#my-div{
position:absolute;
top: 50px;
left: 50px;
height: 100px;
width: 100px;
background-color: #eee;
animation: shadowThrob 0.9s infinite;
animation-direction: alternate;
-webkit-animation: shadowThrob 0.9s ease-out infinite;
-webkit-animation-direction: alternate;
}
@keyframes shadowThrob {
from {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.9);}
to {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.2);}
}
@-webkit-keyframes shadowThrob {
from {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.9);}
to {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.2);}
}