JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="profile-pic center" style="background-image: url(https://specials-images.forbesimg.com/imageserve/59d5062131358e542c034eb7/416x416.jpg?background=000000&cropX1=419&cropX2=1409&cropY1=53&cropY2=1044)"></div>
  <p class="center">There's no one new around you.</p>
  <div class="sonar-container">
    <div class="sonar center"></div>
    <div class="sonar center delay"></div>
  </div>
</div>

CSS

html,
body {
  height: 100%;
}
.container {
  background-color: #fafcfd;
  width: 100%;
  overflow: hidden;
  height: 100%;
  margin: 0 auto;
  position: relative;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

p {
  color: #c0c0c0;
  line-height: 1;
  margin-top: 95px;
  font-family: arial;
  width: 100%;
  text-align: center;
}

.profile-pic {
  z-index: 2;
  border: 3px solid #fff;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-image: url(https://scontent.ftlv1-1.fna.fbcdn.net/v/t1.0-9/10689795_10204657677987549_3300926850207479564_n.jpg?oh=40d2eae9fc0c40ad0a7ee163d027ce0f&oe=59725C93);
  background-size: 100px;
}

.sonar {
  z-index: 1;
  background-color: #ffdddd;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: inset 0px 0px 0px 3px #ffdddd, inset 0px 0px 0px 6px #fdcacb;
  opacity: 0.7;
  transition: all 3.5s ease-in-out;
  animation: grow 3.5s infinite forwards;
}

.delay {
  animation-delay: 0.5s;
}

@keyframes grow {
  0% {
    width: 100px;
    height: 100px;
    opacity: 0.7;
  }

  100% {
    width: 450px;
    height: 450px;
    opacity: 0;
  }
}