<!-- This will be our grid container -->
<div class="grid-container">
  <!-- These are our individual flex elements -->
  <div class="item-container">
    <div class="profile-details">
      <img class="profile-pic" src="https://images.unsplash.com/photo-1598587741472-cb50fcba42be?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjB8fHdvbWVuJTIwbGF1Z2hpbmd8ZW58MHx8MHx8fDI%3D" />

      <div>
        <p class="profile-name">Kitera Dent</p>
        <p>College Student</p>
      </div>
    </div>

    <p class="review">As a busy student, TaskMaster helps me balance my studies, part-time job, and social life</p>
  </div>

  <div class="item-container">
    <div class="profile-details">
      <img class="profile-pic" src="https://images.unsplash.com/photo-1557862921-37829c790f19?q=80&w=2942&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />

      <div>
        <p class="profile-name">Jamal Thompson</p>
        <p>Small Business Owner</p>
      </div>
    </div>

    <p class="review">This app streamlined our team's workflow. We've seen a 30% increase in productivity!</p>
  </div>

  <div class="item-container">
    <div class="profile-details">
      <img class="profile-pic" src="https://images.unsplash.com/photo-1664575602554-2087b04935a5?q=80&w=3087&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />

      <div>
        <p class="profile-name">Sophia
        </p>
        <p>Marketing Manager</p>
      </div>
    </div>

    <p class="review">TaskMaster's collaboration features are a game-changer for our remote team.</p>
  </div>

  <div class="item-container">
    <div class="profile-details">
      <img class="profile-pic" src="https://images.unsplash.com/photo-1502767882403-636aee14f873?q=80&w=3087&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />

      <div>
        <p class="profile-name">Lars Andersen
        </p>
        <p>Software Developer</p>
      </div>
    </div>

    <p class="review">The API integration is fantastic. It fits perfectly into our existing tech stack.</p>
  </div>
</div>
/* This is the default css we need to give because by default browser gives some margin */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* globally i updated text, background color */
html {
  color: #eeeeee;
  background: #181818;
}

.grid-container {
/*   min-height: 100vh; */
  width: 100%;
  padding: 5rem;

  /* to make container grid we need to add this */
  display: grid;

  /* here you need to specify how many columns you want */
  /* 1fr means i'll take uniform width */
  /* here i specified 1fr 3-times so i'll have 3-columns */
  grid-template-columns: 1fr;

  /*  gap will give a uniform space between the items inside grid  */
  gap: 1rem;

  /*  changed the font-family  */
  font-family: sans-serif;
}

.item-container{
  background: #61677A50;
  padding: 1rem;
  border-radius: 0.5rem;
}


/* for profile details i've given display flex */
.profile-details {
  display: flex;
  width: 100%;
  gap: 0.75rem;
}

.profile-pic {
  height: 3rem;
  width: 3rem;
  object-fit: cover;
  border-radius: 999px;
  flex-shrink: 0;
}

.profile-name {
  font-size: 1.5rem;
  margin: 0;
}

.review{
  margin-top: 1rem;
  line-height: 1.5rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.