JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <input type="text" id="name" placeholder="請輸入姓名" required>
  <button onclick="Order()">我要訂購</button>
  <button onclick="factory()">認識工廠</button>
</div>

CSS

*{
  padding:0px;
  margin:0px;
  box-sizing:border-box;
  
}

html,body{
  width:100%;
  height:100%;
  background-color:#A2666F;
}

.wrap{
  width:50vw;
  height:100%;
  display:flex;
  align-items:center;
  margin: 0 auto;
  justify-content: center;
}

input{
  padding:10px;
  border-radius:5px;
  border:none;
  background-color:white;
  margin:5px;
}

button{
  padding:10px;
  border-radius:10px;
  border: 1px solid black;
  cursor: pointer;
  border:none;
  background-color:#F49390;
  color:#ffff;
  font-weight:600;
  font-size:20px;
  margin:5px;
}

JavaScript

function Order(){
	var name = document.getElementById("name").value;
  alert(name +"您好！謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！")
}

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