JSFiddle - React, Tailwind, and code Playground

by B__rain

HTML

<div class="index">
  <img class="jpg" src="https://as2.ftcdn.net/v2/jpg/05/25/99/51/500_F_525995178_KIcSnlhaA9fCcgbZ0Jv9zdo3eU2KANAw.jpg" alt="">
  <input id="name" type="text" placeholder="請輸入名字...">
  <button class="btn" onclick="order()">我要訂購</button>
  <button class="btn" onclick="about()">認識工廠</button>
  <div class="list">您的訂單：
  <div>顧客姓名:<spen id="name1"></spen></div>
  </div>
</div>

SASS

*,html
  /* border: 1px solid ; */
  padding: 0px;
  margin: 0px;
.index
  width: 500px;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column; 
  justify-content: center; 
.jpg
  background-size: cover;
.btn
  border: 1px solid;
  border-radius: 5px;
  padding: 5px;
  margin: 5p;
  cursor: pointer;
  radian: 5px;
  display: inline;
  margin-top: 10px;
  color: #F0F0F2;
  background-color: #4E64A6;
  &:hover
    background-color: #BF9169;
    transition-duration: 0.5s
.list
  width: 500px
  height: 200px
  background-color: #C7B1A6
  border: 1px dashed

JavaScript

function order() {
	var message = '「謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！」'
  var keyword = document.getElementById('name').value;
  document.getElementById('name1').textContent = keyword;
  alert(keyword + message);
}

function about() {
  alert('「我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！」');
}