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-info">
      <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 class="comparison-card__promo">Online Promotion</span>
        <span>Get S$150 Lazada Vouchers + 1 year LiveUp Membership (worth S$59.90)</span>
      </p>
    </div>
    <div class="comparison-card__item-cta">
        <button>Apply Now</button>
    </div>
  </li>
   <li class="comparison-card__item">
    <div class="comparison-card__item-info">
      <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 class="comparison-card__promo">Moneysmart Exclusive</span>
        <span>Get S$300 Cash via PayNow! Applies to new to bank customers. Valid till 29 Feb 2020.</span>
      </p>
    </div>
    <div class="comparison-card__item-cta">
        <button>Apply Now</button>
    </div>
 ...

CSS

.comparison-card__list {
  display: flex;  

}

.comparison-card__item {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 24px;
  width: 100%;
}

.comparison-card__item-info {
  max-width: 200px;
  height: 100%;
}

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

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

.comparison-card__feature span:last-child {
  display: block;
  font-size: 14px;
  color: #808080;
}

.comparison-card__promo {
  background: #FFD100;
  border-radius: 2px;
  padding: 8px;
  margin-bottom: 12px;
  font-size: 16px;
}


@media only screen and (max-width: 768px) {
    .comparison-card__list {
        overflow: auto;
        overflow-y: hidden;
    }
}