JSFiddle - React, Tailwind, and code Playground

by George Samaras

HTML

<div class="sonar-wrapper">
  <div class="sonar-emitter">
    <div class="sonar-wave"></div>
  </div>
  <img src="https://sdl-stickershop.line.naver.jp/products/0/0/1/1034784/android/stickers/1469060.png" height="72 " width="72 " class="sooperIdea ">
</div>

CSS

.sooperIdea {
  position: absolute;
  left: 44.5%;
  top: 29%;
}


/* Prevent scrollbars to appear when waves go out of bound */

.sonar-wrapper {
  position: relative;
  z-index: 0;
  //overflow: hidden;
}


/* The circle */

.sonar-emitter {
  position: relative;
  margin: 32px auto;
  width: 160px;
  height: 160px;
  border-radius: 9999px;
  background-color: HSL(45, 100%, 50%);
}