JSFiddle - React, Tailwind, and code Playground

by booktu8

HTML

<div class="buy-popup-body bgwh">
  <a class="btn-close" href="javascript:;"></a>
  <div class="cell">
    <div class="cell-hd goods-pictu photo100 pl0 ml20">
      <img src="http://fruit-picture.oss-cn-beijing.aliyuncs.com/fruit/goods/2018-02-28/1519800614075197.png" alt=""> </div>
    <dl class="cell-bd">
      <dt class="f34 b">宾川沃柑</dt>
      <dd class="money pt20 f40 b">
        <span class="f30">¥</span>189.00</dd>
      <dd class="cell mt20">
        <div class="cell-bd f24 g9">已认养3份</div>
        <div class="cell-fd f24">剩余996份</div>
      </dd>
    </dl>
  </div>
  <div class="income-tips"> 认养<span class="js-number">1</span>份，预计收益约<span class="js-weight">5.00</span><span>kg</span>
  </div>
  <div class="cell pl20">
    <div class="cell-bd"><span class="f30 g6">认养数量：</span><span class="f26 buy-tips dn">*单笔最多购买10份</span>
    </div>
    <div class="cell-fd mod-number g3 mr20 pr0">
      <span class="btn-number number-decrease ion-ios-minus-empty f40 disabled"></span>
      <input class="number-input tc number-form" type="tel" min="1" max="10" value="1">
      <span class="btn-number number-increase ion-ios-plus-empty f40"></span>
    </div>
  </div>
  <div class="btn-buy js-btn-submit">确认</div>
</div>