JSFiddle - React, Tailwind, and code Playground

by Raloynner

HTML

.container
    .purchases
        .h2 Покупки в рассрочку
        .p-desc Без процентов. Без переплаты. В лучших магазинах Бишкека
        .card
            each card in purchasesCards
                .card-item
                    .card-item_img
                        img(src=`${card.cardImgUrl}`).card-img
                    .card-group-text
                      .card-title-bold=`${card.cardTitle}`
                      .card-text-eweclasskakoito=`${card.cardCount}`
        button.btn.btn-border Все категории

CSS

//CARD
.card {
  display: flex;
  justify-content: space-between;
  padding: 60px 0 90px;
}

.card-item {
  width: 180px;
  height: auto;
  padding: 48px 16px;
  background-color: #fff;
  border: 1px solid #EEEFF1;
  border-radius: 12px;
  cursor: pointer;
}

.card-item_img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin: 0 auto 20px;
  .card-img {
    border-radius: 50%;
  }
}

.card-title {
  @include responsiveFonts(18, 15);
  line-height: 133%;
  color: #18191C;
  font-weight: 500;
  margin-bottom: 10px;
  text-align: center;
}

.card-text {
  @include responsiveFonts(15, 12);
  color: #5E626E;
  line-height: 133%;
  font-weight: 300;
  text-align: center;
}

//PURCHASES
.purchases {
  display: flex;
  flex-direction: column;
  margin-bottom: 80px;
  .card {
    padding: 40px 0 32px;
  }
  .card-item {
    padding-bottom: 70px;
    position: relative;
  }
  .card-title {
    font-weight: 400;
    line-height: 144%;
    margin-bottom: 0;
  }
  .card-text {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);

    @include responsiveFonts(13,12);
    line-height: 123%;
    font-weight: 400;
  }
  .card-item_img {
    margin-bottom: 16px;
  }
}

.purchases-title {
  font-weight: 700;
  @include responsiveFonts(32,22);
  line-height: 137%;
  color: #18191C;
  text-align: center;
  margin-bottom: 10px;
}

.purchases-subtitle {
  font-weight: 300;
  @include responsiveFonts(18,14);
  line-height: 137%;
  color: #18191C;
  text-align: center;
}

.purchases-button {
  margin: 0 auto;
  padding: 16px 58px;
  background: #FFFFFF;
  border: 1px solid #0092A1;
  border-radius: 12px;

  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  text-align: center;
  color: #0092A1;
}