JSFiddle - React, Tailwind, and code Playground

HTML

<div class='wrap'>
  <div>
    <label for='keyword'>客戶稱呼 ：</label>
    <input id="keyword" text="text"  placeholder="請輸入您的名字..."/>
  </div>
  <div>
    <button onclick="myFunction()">我要訂購</button>
    <button onclick="thisFunction()">認識工廠</button>
  </div>
  <div class="list-info">
    <h3>您的訂單</h3>
    <hr>
    <span>顧客姓名：</span><span id="subscriber"></span>
  </div>
</div>

CSS

*{
  padding: 0;
  margin: 0;
}
.wrap{
  width: 100%;
  height: 100vh;
  background-color: lightpink;
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
}
button{
 
  padding: .5rem 1rem;
  border: none;
  border-radius:10px;
  cursor: pointer;
}
button:hover{
  color:red;
  background-color: pink;
  outline:1px solid red;
}
.wrap button:first-child{
  margin-right: 1rem;
}

#keyword{
  margin-bottom: .5rem;
  border: none;
  border-radius:10px;
  height:2rem;
  padding-left:.6rem;
}

.list-info{
  width: 40%;
  margin-top:.5rem;
  background-color:white;
  border-radius:10px;
  padding: .5rem;
}

.list-info h3{
  margin-bottom: .5rem;
}
.list-info hr{
  margin-bottom:.3rem;
}

JavaScript

function myFunction()
{
var one = '謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！'
var str = document.getElementById('keyword').value;
  alert(str + one);
 	document.getElementById('subscriber').textContent = str;
}
function thisFunction()
{
  alert('我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！');
 
}