<h1>Markup using BEM</h1>

<section class="contact">
  <h2 class='contact__header'>Contacts</h2>
  <div>
    <ul class='contact__lists'>
      <li class='contact__list'>
        <a class='contact__list-user' href="">
          <div class='contact__avatar'>
            <img class='contact__img' src="https://images.unsplash.com/photo-1600267185393-e158a98703de?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85" alt="">
            <span class='contact__is-login'>23時間前</span>
          </div>
          <p class='contact__name'>Yoko Ono</p>
        </a>
      </li>
      <li class='contact__list'>
        <a class='contact__list-user' href="">
          <div><img class='contact__img' src="https://images.unsplash.com/photo-1558898479-33c0057a5d12?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85" alt=""></div>
          <p class='contact__name'>John Lenon</p>
        </a>
      </li>
      <li class='contact__list'>
        <a class='contact__list-user' href="">
          <div class='contact__avatar'>
            <img class='contact__img' src="https://images.unsplash.com/photo-1600267185296-f7dc4efe939c?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85" alt="">
            <div class='contact__is-login'>
              <span>4時間前</span>
            </div>
          </div>
          <p class='contact__name'>Michael Jackson</p>
        </a>
      </li>
    </ul>
  </div>
</section>

* {
  box-sizing: border-box;
}
body {
  background-color: #f0f2f5;
  color: #050505;
  font-weight: 600;
}
a {
  color: inherit;
  text-decoration: none;
}

.contact {
  background-color: #f0f2f5;
  width: 400px;
  margin: 0 auto;
  padding: 15px;
  
  &__lists {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  
  &__list-user {
    display: flex;
    align-items: center;
    padding: 0 8px;
    
    &:hover {
      background-color: #dcdcdc;
      border-radius: 8px;
    }
  }
  
  &__avatar {
    position: relative;
  }
  
  &__img {
    width: 40px;
    height: 40px;
    margin-right: 16px;
    vertical-align: bottom;
    object-fit: cover;
    border-radius: 50%;
  }
  &__is-login {
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    color: #1ca121;
    background-color: #dcffe0;
    font-size: 0.6em;
  }
}