JSFiddle - React, Tailwind, and code Playground

by Kristian Jabilles

HTML

<ul xmlns="http://www.w3.org/1999/xhtml" class="comparison-card__list">
                <li class="comparison-card__item">
                    <h3 class="comparison-card__item-title">WeLend Personal Loan</h3>
                    <div class="comparison-card__item-info">
                        <img class="comparison-card__img" src="https://photos.moneysmart.hk/uploads/ms_core/provider/image/33/xwelend.png.pagespeed.ic.YCgGDav3cB.png" />
                        <p class="comparison-card__feature">
                            <span>2.79%</span>
                            <span>APR*</span>
                        </p>
                        <p class="comparison-card__feature">
                            <span>Varies</span>
                            <span>Handling Fee</span>
                        </p>
                        <p class="comparison-card__feature">
                            <span>48 months</span>
                            <span>Max Repayment Period</span>
                        </p>
                        <p class="comparison-card__feature">
                            <span class="comparison-card__exclusive">Moneysmart Exclusive</span>
                            <span>HK$ 3,800 cash rewards for successful application and drawdown on WeLend Personal Loan!</span>
                        </p>
                    </div>
                    <div class="comparison-card__item-cta">
                        <a class="ui button primary comparison-card__item-apply-now" href="https://www.moneysmart.hk/en/lending-companies-loan/lending-companies-loan-plans/welend" tabindex="0" role="button" aria-pressed="false">
                            Get Quote
                        </a>
                    </div>
                </li>
                <li class="comparison-card__item">
                    <h3 class="comparison-card__item-title">WeLend No Document Loan</h3>
                    <div class="comparison-card__item-info">
                        <img...

CSS

/*Comparison Card*/
.comparison-card {
    background: linear-gradient(180deg, rgba(92, 204, 94, 0) 0%, rgba(92, 204, 94, 0.09) 100%) !important;
}

.comparison-card__list-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.comparison-card__title{
    border-bottom: 1px solid #CCCCCC;
    padding-bottom: 12px;
}


.comparison-card__list {
    display: flex;  
    width: 100%;
    margin-top: 0 !important;
}

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

.comparison-card__item-info {
  height: 100%;
}

.comparison-card__item-info h3{
  font-size: 20px;
}

.comparison-card__img {
  width: 170px;
  margin: 8px 0 24px -5px;
}

.comparison-card__feature {
    margin-bottom: 24px;
}

.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__exclusive,
.comparison-card__promo {
  border-radius: 2px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 16px;
}

.comparison-card__exclusive {
  background: #FFD100;
}

.comparison-card__promo {
  background: #EBEBEB;
}


.comparison-card__item-cta {
    margin-top: 24px;
}

.comparison-card__item-title {
  min-height: 50px;
  margin: 0;
}