JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<div class="wrap">
  <input type="text" id="name" placeholder="請輸入姓名" required>
  <button onclick="Order()">我要訂購</button>
  <button onclick="factory()">認識工廠</button>
</div>
<div class="container">
    <h2>[我要訂購]</h2>
    <h3>您的訂單:</h3>
    <h3 id="customer_name">顧客姓名:<span id="order"></span></h3>
</div>

CSS

*{
  padding:0px;
  margin:0px;
  box-sizing:border-box;
  font-family: "Roboto", sans-serif;
}

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

.wrap{
  width:60vw;
  display:flex;
  align-items:center;
  margin: 0 auto;
  justify-content: center;
  margin-bottom: 2rem;
}

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;
}

.container{
  width: 80vw;
  margin: 0 auto;
  background-color:#F49390;
  padding: 2rem;
  border-radius: 10px;
}

.container h2{
  margin;
  margin-bottom:3rem;
}


.container h3{
  margin:1rem;
}

.container h3 span{
  display:inline-block;
  padding:1rem;
}

JavaScript

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

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