JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content-parent">
  <div class="content_wrap">
      <div class="content-box box-1"><i></i><span>Признание</span></div>
      <div class="content-box box-2"><i></i><span>Признание-2</span></div>
      <div class="content-box box-3"><i></i><span>Признание-3</span></div>
      <div class="content-box box-4"><i></i><span>Признание-4</span></div>
  </div>
  <div class="content-siblings"></div>
</div>

CSS

body{
  background:#FFDB8B;
}

.content_wrap{
  width:100%;
  height:100%;
  position:absolute;
}
.content-parent{
  width:500px;
  height: 500px;
  border-radius:500px;
  background: linear-gradient(to bottom, #ED878B, #FFDB8B);
  box-shadow: 1px 7px 10px 1px rgba(0, 0, 0, 0.31);
  position:relative;
}

.content-siblings{
  width:300px;
  height:300px;
  background:#FFCFAB;
  position:absolute;
  bottom:45px;
  left: 20%;
  box-shadow: 1px 7px 10px 1px rgba(0, 0, 0, 0.31);
  border-radius: 250px;
}
.content-box{
  position:absolute;
}
.content-box i{
  display:block;
  width:50px;
  height:50px;
  background:#fff;
  opacity:0.7;
  border-radius:50px;
}

 .box-1{
    bottom: 129px;
    left: 31px;
 }
 
 .box-2{
    bottom: 225px;
    left: 16px;
 }
  .box-3{
    left: 82px;
    bottom: 322px;
 }
  .box-4{
    left: 206px;
    bottom: 394px;
 }
  .box-5{
    bottom: 225px;
    left: 16px;
 }