JSFiddle - React, Tailwind, and code Playground

by Ting-Yuan Chang

HTML

<div id="main">
<div class="proopc-row action">
  <a class="actionBtn continueShop"><span>繼續購物<br><span>Back</span></span></a><!-- 
   --><span class="actionBtn checkout"><span>立即結帳<br><span>Checkout</span></span></span>
</div>
</div>

CSS

#main {
  background: white;
}

#main .proopc-row.action {
  text-align: center;
}

.actionBtn {
  display: inline-block;
  width: 158px;
  height: 63px;
  border-radius: 5px;
  border: solid 1px #454245;
  font-size:0;
  margin: 0 5px;
  cursor: pointer;
}

.checkout {
  background: #665857;
  border: solid 1px #665857;
}

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

.actionBtn > span {
  display: inline-block;
  vertical-align: middle;
  font-family: NotoSansCJKtc;
  font-size: 15px;
  letter-spacing: 1.5px;
  color: #454245;
}

.checkout > span {
  color: #FFFFFF;
}

.actionBtn > span > span {
  font-family: Lato;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1.3px;
}

/*******************************************/

/* #main {
  width: 290px;
} 
.actionBtn {
  width: 288px;
  height: 43px;
  margin: 0px;
}
.proopc-row.action {
  display: flex;
  flex-direction: column;
}
.actionBtn > span > span {
  display: none;
}

.continueShop {
  order: 2;
  margin-top: 5px;
}
.checkout {
  order: 1;
} */