JSFiddle - React, Tailwind, and code Playground

by artgas_pro

HTML

<div class="container">
  <span class="phone">
  </span>
  <span class="circle">
  </span>
</div>

CSS

.container{
  background-color: #FFF2CB;
  width: 1130px;
  height: 200px;
  position: relative;
}

.phone{
  display: inline-block;
  width: 168px;
  height: 168px;
  background-color: #FFFFFF;
  border-radius: 50%;
  position: relative;
  top: 50%;
  
  z-index: 10;
}
.phone::after {
  content: '';
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background-color: #FFDF7D;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
  border-radius: 50%;
}

.phone::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 552px;
  height: 552px;
  background-color: #FFE597;
  z-index: 8;
  border-radius: 50%;
}