JSFiddle - React, Tailwind, and code Playground

by Ting-Yuan Chang

HTML

<div id="main">
<ul class=cartItemBlock>
  <li>
    <div class=cartItemBlock-imgWrap> <img src=http://via.placeholder.com/70x70 alt=Ortie5 class=cartItemBlock-imgWrap-img /> </div>
    <div class="cartItemBlock-divWrap name">
    <span><a href=/face/ortie-detail.html>天然草本手工皂－蕁麻</a> <div class=vm-customfield-cart></div></span> </div>
    <div class="cartItemBlock-divWrap sku">
    <span>AR220108</span> </div>
    <div class="cartItemBlock-divWrap price"> <span> <span>NT$ 399</span><br> <span>NT$ 580</span> </span>
    </div>
    <div class="cartItemBlock-divWrap quantity"> <span> <span class="fa-stack circleSign" aria-hidden=true onclick=ProOPC.productqtyChange(this,-1);ProOPC.updateproductqty(this);> <i class="fa fa-circle-o fa-stack-2x"></i> <i class="fa fa-minus fa-stack-1x"></i> </span>      <span class=quantityValue>14<input type=hidden class="inputbox input-ultra-mini js-recalculate proopc-qty-input" size=1 maxlength=4 name=quantity[1] value=14 data-quantity=14 /></span>      <span class="fa-stack circleSign" aria-hidden=true onclick=ProOPC.productqtyChange(this,1);ProOPC.updateproductqty(this);> <i class="fa fa-circle-o fa-stack-2x"></i> <i class="fa fa-plus fa-stack-1x"></i> </span>      </span>
    </div>
    <div class="cartItemBlock-divWrap price sum"> <span>NT$ 5,586</span> </div>
    <div class="cartItemBlock-divWrap option"> <span> <span class=heart><i class="fa fa-heart-o fa-lg fa-fw" aria-hidden=true></i>放入慾望清單</span> <br> <span class=trash
        data-vpid=1 onclick="return ProOPC.deleteproduct(this);"><i class="fa fa-trash-o fa-lg fa-fw" aria-hidden=true></i>移除此商品</span>      </span>
    </div>
  </li>
  <li>
    <div class=cartItemBlock-imgWrap> <img src="http://via.placeholder.com/350x150" alt="ACORELLE SpraySolaire 50SPF-100ml"
        class=cartItemBlock-imgWrap-img /> </div>
    <div class="cartItemBlock-divWrap name"> <span><a href=/face/sun_spray50-detail.html>【新品】全護植萃防曬乳 SPF50</a> <div class=vm-customfield-cart></div></span> </div>
   ...

CSS

#main {
  width: 290px;
  background: white;
}
.cartItemBlock {
  list-style-type: none;
  padding: 0;
  margin-bottom: 0;
}
.cartItemBlock > li {
  border-top: solid 1px rgba(69, 66, 69, 0.1);
  overflow: auto;
}

.cartItemBlock-imgWrap {
  margin: 4px 25px 4px 30px;
  width: 70px;
  height: 70px;
  float: left;
}

.cartItemBlock-imgWrap-img {
  max-width: 70px;
  max-height: 70px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: relative;
}

.cartItemBlock-divWrap {
  float: left;
  height: 78px;
  font-size:0;
  margin-right: 10px;
}

.cartItemBlock-divWrap:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
}

.cartItemBlock-divWrap > span {
  display: inline-block;
  font-family: NotoSansCJKtc;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.8px;
  color: #665857;
  vertical-align: middle;
}

.cartItemBlock-divWrap .notice {
  font-family: NotoSansCJKtc;
  line-height: 1;
  letter-spacing: 1px;
  color:#c30018;
  border-radius: 5px;
  padding: 5px 6px;
  border: solid 0.5px #c30018;
  font-size:12px;
  transform: scale(0.833);
  transform-origin: 0 0; 
  display: inline-block;
}

.cartItemBlock-divWrap.name {
  width: 340px;
}

.cartItemBlock-divWrap.sku {
  display: none;
}

.cartItemBlock-divWrap.price {
  width: 210px;
}

.cartItemBlock-divWrap.quantity {
  width: 150px;
}

.cartItemBlock-divWrap.quantity .circleSign {
  cursor: pointer;
  font-size: 12px;
  line-height: 200%;
}

.cartItemBlock-divWrap.quantity .quantityValue {
  margin: 0px 20px;
  font-family: Lato;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-align: center;
  color: #353235;
  vertical-align: middle;
  width: 30px;
  display: inline-block;
}

.cartItemBlock-divWrap.price.sum {
  width: 175px;
}

.cartItemBlock-divWrap.price > span > span {
  font-family: Lato;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-align: center;
  color:...