.notch {
  position: absolute;
  width: 144px;
  height: 27px;
  top: 0px;
  bottom: 30px;
  left: 73px;
  z-index: 4;
  background: black;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}

.camera {
  width: 6px;
  height: 6px;
  top: 9px;
  border-radius: 100%;
  position: absolute;
  left: 119px;
  background: #0d4d71;
}

.speaker {
  height: 6px;
  width: 60px;
  left: 50%;
  position: absolute;
  top: 9px;
  margin-left: -30px;
  background: #171818;
  border-radius: 6px;
}

<div class="container disableSelection">
  <img src="https://via.placeholder.com/300" class="phone-frame">
  
  <div class="phone-container phone-background">
    <div id="notch" class="notch">
      <div class="camera"></div>
      <div class="speaker"></div>
    </div>