<div class="box">
   <div class="cherry"></div>
   <div class="layer1">
      <div class="cream">
        <div class="cream1"></div>
        <div class="cream2"></div>
        <div class="cream3"></div>
     </div>
      <div class="icing"></div>
      <div class="base"></div>
   </div>
   <div class="layer2">
      <div class="cream">
        <div class="cream1"></div>
        <div class="cream2"></div>
        <div class="cream3"></div>
        <div class="cream4"></div>
     </div>
      <div class="icing"></div>
      <div class="base"></div>
   </div>
   <div class="layer3">
      <div class="cream">
        <div class="cream1"></div>
        <div class="cream2"></div>
        <div class="cream3"></div>
        <div class="cream4"></div>
        <div class="cream5"></div>
     </div>
      <div class="icing"></div>
      <div class="base"></div>
   </div>
   <div class="cakestand">
      <div class="top"></div>
      <div class="middle"></div>
      <div class="bottom"></div>
   </div>
  <h1>HAPPY BIRTHDAY AKASH</h1>
</div>

$cherry-color: #FD522A;
$cream-bg: #0065ff;
$icing-bg: #fde480;
$base-bg: #fbc407;
$cream-width: 125px;
$icing-width: 125px;
$base-width: 125px;
$cakestand-top: #DFE8FB;
$cakestand-middle: #B2D3FE;
$cakestand-bottom: #DDEBFF;
$cake-size: 70px;
$cherry-size: 18px;

.box {
  max-width: 500px;
  width: 95%;
  position: relative;
  margin: 40px auto 0;
  text-align: center;
  h1 {
	margin-top: 20px;
    font-size: 35px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
	background: linear-gradient(to right, $cherry-color 0%, #330867 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
  }
}

.cherry {
  background: $cherry-color;
  height: $cherry-size;
  width: $cherry-size;
  border-radius: 100%;
  margin: 0 auto;
}

.base {
  height: 10px;
  background: $base-bg;
  margin: 0 auto;
}

.icing {
    height: 10px;
    background: $icing-bg;
    margin: 0 auto;
}

 .cream {
   position: absolute;
   margin: 0 auto;
   width: 100%;
   text-align: center;
   [class*="cream"] {
     background: $cream-bg;
     width: 30px;
     height: 30px;
     top: 0;
     margin: 0 -2px;
     border-radius: 2px 2px 18px 18px;
     display: inline-block;
   }
   .cream1{
     border-left-radius: 4px;
   }
 }

.layer1 {
  .cream {}
  .icing {
    width: 75px;
    height: 40px;
  }
  .base {
    width: calc( #{$base-width} - 50px );
  }
}

.layer2 {
  .cream {}
  .icing {
    width: 100px;
    height: 50px;
  }
  .base {
    width: calc( #{$base-width} - 25px );
  }
}

.layer3 {
  .cream {}
  .icing {
    width: $base-width;
    height: 60px;
  }
  .base {
    width: $base-width;
  }
}

.cakestand {
  .top {
    width: 190px;
    height: 10px;
    border-radius: 4px;
    background: $cakestand-top;
    margin: 0 auto;
  }
  .middle {
    width: 30px;
    height: 20px;
    background: $cakestand-middle;
    margin: 0 auto;
  }
  .bottom {
    width: $cake-size;
    height: 10px;
    margin: 0 auto;
    border-radius: 4px;
    background: $cakestand-bottom;
  }
}