JSFiddle - React, Tailwind, and code Playground

by pypochek

HTML

<div class="text">
  <div class="price">99.000</div>
  <div class="productName">REVO Morning</div>
  <div class="inf">đắng, hậu ngọt, hương hoa </div>
  <div class="cart-btn">
    <button class="in__cart" onclick="asd()">MUA NGAY</button>
    <a href="" class="deetails">CHI TIẾT</a>
  </div>
</div>

SCSS

@mixin textMX($wg, $fm, $sz, $cl, $lh) {
  color: $cl;

  font: {
    weight: $wg;
    family: $fm, sans-serif;
    size: $sz;
  }

  line-height: $lh;
}

.text {
  max-width: 559px;
  margin: 42px 0 42px 45px;

  .price {
    @include textMX(600, "Nunito", 20px, #c7a17a, 24px);
    margin-bottom: 17px;
  }

  .productName {
    @include textMX(700, "Nunito", 24px, #232c38, 28px);
    margin-bottom: 34px;
  }

  .inf {
    @include textMX(400, "Nunito", 16px, #151d28, 22px);
    margin-bottom: 36px;
  }

  .cart-btn {
    margin-right: 49px;

    .in__cart {
      cursor: pointer;
      border-radius: 19px;
      background: #c7a17a;
      @include textMX(700, "Nunito", 16px, #f9fbff, 22px);
      margin-right: 29px;
      padding: 8px 17px;
      outline: none;
      border: 0;
    }

    .deetails {
      @include textMX(700, "Nunito", 16px, #415167, 22px);
    }
  }
}

TypeScript

function asd(){
	console.log('asd');
}