<div class="container">
  <div class="card">
    <div class="card-header">
      <h4>🎂 24 birthdays toady</h4>
    </div>
    <div class="card-body">
      <ul class="list-unstyled pl-0">
        <li class="birthday-item">
          <img src="https://randomuser.me/api/portraits/women/78.jpg" height="36" class="rounded-circle border shadow">
          <p class="d-inline-block pl-1">Sylvia Black<br><small class="text-grey">29 Years</small></p>
        </li>
        <li class="birthday-item">
          <img src="https://randomuser.me/api/portraits/men/8.jpg" height="36" class="rounded-circle border shadow">
          <p class="d-inline-block pl-1">Roger Armstrong<br><small class="text-grey">32 Years</small></p>
        </li>
        <li class="birthday-item">
          <img src="https://randomuser.me/api/portraits/women/39.jpg" height="36" class="rounded-circle border shadow">
          <p class="d-inline-block pl-1">Florence Barnett<br><small class="text-grey">36 Years</small></p>
        </li>
        <li class="birthday-item">
          <img src="https://randomuser.me/api/portraits/men/53.jpg" height="36" class="rounded-circle border shadow">
          <p class="d-inline-block pl-1">Dwayne Peck<br><small class="text-grey">34 Years</small></p>
        </li>
        <li class="birthday-item">
          <img src="https://randomuser.me/api/portraits/women/57.jpg" height="36" class="rounded-circle border shadow">
          <p class="d-inline-block pl-1">Ethel Hale<br><small class="text-grey">29 Years</small></p>
        </li>
      </ul>
    </div>
    <div class="card-button">
      <button>View All</button>
    </div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body{
  height: 100%;
  background-color: #F48FB1;
  font-family: 'Poppins', sans-serif;
}

p {
  font-size: 14px;
  margin-top: 4px;
  margin-bottom: 4px;
}

h4 {
  margin-top: 6px;
  margin-bottom: 6px;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500px;
}

.card {
  background-color: #FFFFFF;
  border-radius: 4px;
  box-shadow: 40px 40px 15px 0 rgba(0,0,0,0.125);
  padding: 16px 32px;
  min-width: 250px;
  transition: box-shadow 0.25s ease-in-out;
  
  &:hover {
    box-shadow: 10px 10px 10px 0 rgba(0,0,0,0.125);
  }
}

.list-unstyled {
  list-style: none;
}

.rounded-circle {
  border-radius: 50%;
}

.border {
  border: 1px solid #ccc;
}

.shadow {
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

.pl-0 {
  padding-left: 0;
}

.d-inline-block {
  display: inline-block;
}

.pl-1 {
  padding-left: 4px;
}

.text-grey {
  color: #8f8f8f;
}

.card-button{
  button {
    width: 100%;
    padding: 10px;
    color: #FFFFFF;
    background-image: linear-gradient(135deg, #C51162, #FF4081);
    border: none;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    border-radius: 4px;
    box-shadow: 0 4px 5px 0 #F06292;
    cursor: pointer;
    transition: box-shadow 0.125s ease-in-out;
    &:hover {
      box-shadow: 0 0 5px 0 #F06292;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.