Preview

HTML

SCSS

*, ::after, ::before {
  box-sizing: border-box;
}

/* css element */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

ul.cloud-storage {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 350px;

  li {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 20px;
    margin: 20px 0;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    
    .icon {
      width: 68px;
      height: 68px;
      border-radius: 15px;
      text-align: center;
      line-height: 68px;
      
      svg {
        width: 40px;
        vertical-align: middle;
      }
      
      &.dropbox {
        background-color: #0061FF;
      }
      
      &.google-drive {
        background-color: #EDF0F5;
      }
    }
    
    .info {
      font-family: 'Montserrat', sans-serif;
      margin-left: 20px;
      padding-top: 10px;
      width: calc(100% - 90px);
      
      h3 {
        color: #162B39;
        font-size: 22px;
        font-weight: 800;
        margin: 0 0 7px 0;
      }
      
      .last-update {
        color: #8492A6;
        font-size: 12px;
        font-weight: 400;
        display: block;
      }
      
      .progress-block {
        margin-top: 25px;
        
        .storage {
          color: #627288;
          font-size: 14px;
          font-weight: 500;
          display: block;
          margin-bottom: 10px;
        }
        
        .progress-bar {
          background-color: #EDF0F5;
          width: 100%;
          height: 8px;
          border-radius: 10px;
        }
        
        .progress {
          background-color: #108AF9;
          height: 8px;
          border-radius: 10px;
        }
      }
    }
  }
}