<div class="phone">
  <div class="phone__header">
      <div class="phone__menu"></div>
      <div class="phone__profile">
        <i class="fas fa-user"></i>
      </div>
  </div>
  <div class="phone__body">
    <div class="phone__time">OCT, 2020</div>
    <div class="phone__task"></div>
  </div>
  <div class="phone__footer">
    <div class="phone__footer-icons">
      <a href="#" class="phone__footer-link">
        <i class="fas fa-home"></i>
      </a>
      <a href="#" class="phone__footer-link">
        <i class="fas fa-sliders-h"></i>
      </a>
      <a href="#" class="phone__footer-link">
         <i class="fas fa-search"></i>
       </a>
    </div>
  </div>
</div>

body {
  background: #ced9f5;
  font-family: 'Poppins', sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.phone {
  background-color: #FFF;
  border-radius: 30px;
  box-shadow: 2px 14px 40px -20px rgba(0, 0, 0, 0.2);
  height: 550px;
  width: 300px;

  &__header {
    border-radius: 30px 30px 0 0;
    display: flex;
    align-items: center;
    height: 100px;
    padding: 0 30px;
    position: relative;
  }
  
  &__menu {
    background: #000;
    height: 2px;
    width: 30px;
    position: relative;
   
    &:before {
      content: '';
      background: #000;
      position: absolute;
      left: 0;
      top: 8px;
      height: 2px;
      width: 20px;
    }
  }
  
  &__profile {
    background: #5f3fff;
    border-radius: 50%;
    color: #FFF;
    font-size: 12px;
    line-height: 40px;
    height: 40px;
    width: 40px;
    position: absolute;
    right: 30px;
    text-align: center;
  }
  
  &__body {
    background: #f2f6ff;
    height: calc(100% - 150px);
    padding: 0 20px;
    
    .phone__time {
      font-size: 24px;
      font-weight: 700;
    }
  }
  
  &__footer {
    border-radius: 0 0 30px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 50px;
    width: 100%;
  }
}