<div class="container mt-5">
    <div class="row">


      <div class="col-lg-4 col-md-6 mb-3">
        <div class="card py-4 px-lg-5 h-100">
          <div class="card-body d-flex flex-column">
            <div class="text-center">
              <img src="https://drive.google.com/uc?export=view&id=1HswgEjS9kRoAKUDOMmDhnhUyyah7wBW9" class="img-fluid  mb-5" alt="Websearch">
            </div>

            <div class="card-title mb-4 text-center fs-2">Personal Package</div>
            <div class="pricing">
              <ul class="list-unstyled">
                <li class="mb-3">
                  <i class="fas fa-check-circle icon-color"></i>
                  <span class="small ms-3">1 Member Only</span>
                </li>
                <li class="mb-3">
                  <i class="fas fa-check-circle icon-color"></i>
                  <span class="small ms-3">Available Storage 100GB</span>
                </li>
              </ul>


            </div>
            <div class="text-center mt-auto mb-4">
              <span class="fw-bold fs-2 ">$7</span>/month
            </div>
            <div class="text-center"><button type="button" class="btn btncolor">Choose Plan</button></div>

          </div>
        </div>

      </div>


      <div class="col-lg-4 col-md-6 mb-3">
        <div class="card py-4 px-lg-5 h-100">
          <div class="card-body d-flex flex-column">
            <div class="text-center">
              <img src="https://drive.google.com/uc?export=view&id=1HswgEjS9kRoAKUDOMmDhnhUyyah7wBW9" class="img-fluid  mb-5" alt="Websearch">
            </div>

            <div class="card-title mb-4 text-center fs-2">Partner Package</div>
            <div class="pricing">
              <ul class="list-unstyled">
                <li class="mb-3">
                  <i class="fas fa-check-circle icon-color"></i>
                  <span class="small ms-3">2-3 Members</span>
                </li>
                <li class="mb-3">
                  <i class="fas fa-check-circle icon-color"></i>
                  <span class="small ms-3">Available Storage 500GB</span>
                </li>
                <li class="mb-3">
                  <i class="fas fa-check-circle icon-color"></i>
                  <span class="small ms-3">Free Hosting</span>
                </li>
              </ul>


            </div>
            <div class="text-center mt-auto mb-4">
              <span class="fw-bold fs-2 ">$11</span>/month
            </div>
            <div class="text-center"><button type="button" class="btn btncolor">Choose Plan</button></div>

          </div>
        </div>
      </div>

      <div class="col-lg-4 col-md-6 mb-3">
        <div class="card py-4 px-lg-5 h-100">
          <div class="card-body d-flex flex-column">
            <div class="text-center">
              <img src="https://drive.google.com/uc?export=view&id=1HswgEjS9kRoAKUDOMmDhnhUyyah7wBW9" class="img-fluid  mb-5" alt="Websearch">
            </div>

            <div class="card-title mb-4 text-center fs-2">Team Package</div>
            <div class="pricing">
              <ul class="list-unstyled">
                <li class="mb-3">
                  <i class="fas fa-check-circle icon-color"></i>
                  <span class="small ms-3">4-7 Members</span>
                </li>
                <li class="mb-3">
                  <i class="fas fa-check-circle icon-color"></i>
                  <span class="small ms-3">Available Storage 2TB</span>
                </li>
                <li class="mb-3">
                  <i class="fas fa-check-circle icon-color"></i>
                  <span class="small ms-3">Free Hosting</span>
                </li>
                <li class="mb-3">
                  <i class="fas fa-check-circle icon-color"></i>
                  <span class="small ms-3">Free Domains</span>
                </li>
              </ul>


            </div>
            <div class="text-center mt-auto mb-4">
              <span class="fw-bold fs-2 ">$15</span>/month
            </div>
            <div class="text-center"><button type="button" class="btn btncolor">Choose Plan</button></div>

          </div>
        </div>
      </div>


    </div>
  </div>
body{
  background-color:#6940ff;
}


.btncolor{
  background-color: #b923ff;
  border-radius: 55555px;
  padding: 1rem 2rem!important;
  color: #ffff;
  margin-bottom: 2rem;
  
}


.package{
  list-style-type: none;
}

.pricing{
 padding-left: 1.5rem;
}

.parent{
  height: 300px;
  display: flex;
  border:2px solid yellow;
}

.child{
  background-color: red;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
  color: white;
}

.icon-color
{
  color:#1f38fa;

}
// https://drive.google.com/uc?export=view&id=1HswgEjS9kRoAKUDOMmDhnhUyyah7wBW9"

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta2/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.