JSFiddle - React, Tailwind, and code Playground

HTML

<input id="username" type="text" value="Lee"/>
<br>

<button class="btn" onclick="order()">我想訂購</button>
<br>
<button class="btn" onclick="aboutUs()">認識工廠</button>

CSS

*{
 padding: 0.5vw; 
}
#username{
  margin:2px;
  padding:5px;
  border:1px solid gray;
  border-radius:5px;
  width:65px;
}
.btn {
  margin: 5px;
  padding: 3px;
  border: 0px;
  border-radius: 10px;
}
.btn:hover{
  color: white;
  background-color: gray;
  transform: translateX(10px);
  transition: transform 0.4s linear 0s;
}

JavaScript

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

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