JSFiddle - React, Tailwind, and code Playground

by Kristian Jabilles

HTML

<ul class="comparison-card__list">
  <li class="comparison-card__item">
    <div class="comparison-card__item-container">
      <h3>Citi Lazada Card</h3>
      <img class="comparison-card__img" src="https://photos.cdn-moneysmart.com/uploads/ms_core/product/image/114/citi-lazada-card.png" />
      <p class="comparison-card__feature">
        <span>12X Reward Points</span>
        <span>on Lazada (Valid till 29 Feb 2020)</span>
      </p>
      <p class="comparison-card__feature">
        <span>10,000 Points</span>
        <span>Capped per Statement Month</span>
      </p>
      <p class="comparison-card__feature">
        <span>4 Free Shipping</span>
        <span>per month</span>
      </p>
      <p class="comparison-card__feature">
        <span>Online Promotion</span>
        <span>Get S$150 Lazada Vouchers + 1 year LiveUp Membership (worth S$59.90)</span>
      </p>
    </div>
    <button class="comparison-card__cta">Apply Now</button>
  </li>
<li class="comparison-card__item">
    <div class="comparison-card__item-container">
        <h3>Citi Rewards Card</h3>
        <img class="comparison-card__img" src="https://photos.cdn-moneysmart.com/uploads/ms_core/product/image/61/rewards-visa__1_.png" />
        <p class="comparison-card__feature">
        <span>S$1= 10X Points</span>
        <span>on Online Spend</span>
        </p>
        <p class="comparison-card__feature">
        <span>S$1= 10X Points</span>
        <span>on Shopping Spend</span>
        </p>
        <p class="comparison-card__feature">
        <span>S$1 = 1 Point</span>
        <span>on All Other Spend</span>
        </p>
        <p class="comparison-card__feature">
        <span>Moneysmart Exclusive</span>
        <span>Get S$300 Cash via PayNow! Applies to new to bank customers. Valid till 29 Feb 2020.</span>
        </p>
    </div>
    <button class="comparison-card__cta">Apply Now</button>
  </li>
  <li class="comparison-card__item">
    <div class="comparison-card__item-container">
      ...

CSS

.comparison-card__list {
    display: flex;
    position: relative;
}

.comparison-card__item {
  list-style: none;
  margin-right: 24px;
  width: 100%;
  background: #f1f1f1;
}

.comparison-card__item-container {
  max-width: 250px;
  padding-bottom: 24px;
}

.comparison-card__img {
  width: 170px;
  margin-left: -5px;
}

.comparison-card__feature span:first-child {
  font-weight: bold;
  display: block;
}

.comparison-card__feature span:last-child {
  font-size: 14px;
}

.comparison-card__cta {
  position: absolute;
  bottom: 0;
}