JSFiddle - React, Tailwind, and code Playground

by lasha

HTML

<div style="position: relative;">
    <img src="https://si0.twimg.com/profile_images/2580276541/mbtlerlmndc98xxy48gn.jpeg" />
    <div class="bubble"></div>
</div>

CSS

.bubble {
    display: block;
    position: absolute;
    width: 50px;
    top: 330px;
    left: 33%;
    margin-left: -25px;
    border-radius: 25px;
    background: transparent;
    border: 5px solid rgba(255,255,255,.4);
    height: 50px;
    box-sizing: border-box;
    box-shadow: 0px 0px 15px rgba(0,0,0,.4), 0px 0px 5px rgba(0,0,0,.4), inset 0px 0px 3px rgba(0,0,0,.4), inset 0px 0px 10px rgba(0,0,0,.4);
    -webkit-animation-duration: .8s;
    -webkit-animation-name: pulsate;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
}

@-webkit-keyframes pulsate {
  from {
    -webkit-transform: scale(1,1);
  }
 
  to {
    -webkit-transform: scale(1.2,1.2);
  }
}