JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box"></div>

CSS

body {
    background: black;
}
.box {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) scale(1);
    animation: a cubic-bezier(0.02,-0.01, 0.07, 0.9) 1.8s infinite;
}
@keyframes a {
    0% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        -webkit-box-shadow: inset 0 0 2vw rgba(246,79,144,0.5);
        box-shadow: inset 0 0 2vw rgba(246,79,144,0.5);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) scale(3);
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
        -webkit-box-shadow: inset 0 0 0.5vw rgba(255,255,255,0.2);
        box-shadow: inset 0 0 0.5vw rgba(255,255,255,0.2);
    }
}