BootStrap 5

Lead Product Card

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
<div class="main-body d-flex justify-content-center align-items-center vh-100" >
      <div class="container">
        <div class="card mx-auto" style="max-width: 25rem">
          <img
            src="https://static.vecteezy.com/system/resources/previews/008/748/719/original/expired-skin-care-product-gradient-linear-icon-contains-toxins-and-bacteria-spoiled-cream-leads-to-irritation-thin-line-color-symbol-modern-style-pictogram-isolated-outline-drawing-vector.jpg"
            class="card-img-top ms-4 mt-3 border rounded"
            alt="Weather Image"
          />
          <div class="ellipsis">
            <i class="fas fa-ellipsis-h"></i>
          </div>
          <div class="card-body px-4 mb-3">
            <h4 class="card-title">Lead Product Design</h4>
            <p class="card-text text-gray">
              In publishing and graphic design, Lorem ipsum is a placeholder
              text commonly used to demonstrate the visual form of a document or
              a typeface without
            </p>
          </div>
          <div class="d-flex justify-content-around px-3 mb-1">
            <p class="bg-light-green rounded px-3 py-1">Full Time</p>
            <p class="bg-light-purple rounded px-3 py-1">Min. 1 year</p>
            <p class="bg-light-red rounded px-3 py-1">Max. 3 years</p>
          </div>
          <div
            class="friends d-flex justify-content-start align-items-center px-4 mb-3"
          >
            <i class="fa-solid fa-users me-2"></i>
            <p class="m-0 text-secondary">5 Friends Work here</p>
          </div>
          <div class="card-footer bg-white px-4 py-3">
            <button type="button" class="btn btn-purple rounded-pill text-white">
              Apply Now
            </button>
            <button type="button" class="btn btn-whitesmoke rounded-pill">Message</button>
          </div>
        </div>
      </div>
    </div>

.main-body {
  background-color: pink;
}

.text-gray {
  color: gray;
}

.card {
  background-color: #f8f9fa;
  border: none;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-img-top {
  max-width: 80px;
  margin: 5px;
  height: auto;
  position: relative;
}

.ellipsis {
  position: absolute;
  top: 5px;
  right: 15px;
  color: black;
  padding: 5px;
  cursor: pointer;
}

.friends i {
  font-size: 14px;
  color: #87ceeb;
}

.bg-light-green {
  background-color: #90ee90;
  border-radius: 15px;
}

.bg-light-purple {
  background-color: paleturquoise;
  border-radius: 15px;
}

.bg-light-red {
  background-color: #fe9898;
  border-radius: 15px;
}

.btn-purple {
  background-color: purple !important;
  width: 40%;
}

.btn-whitesmoke {
  width: 40%;
  margin-left: 15%;
  background: silver !important;
}

CDN

ACTION

https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css

Copy CDN

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css

Copy CDN

AdBlock Detected!

Our website is providing free tools to our users there is nothing
that you pay for. We only display advertisement ads. So Please
don’t use adBlocker, Keep visiting us thanks.