JSFiddle - React, Tailwind, and code Playground

HTML

<div class="div_bg">
  
  <div class="class1-2">
    <button class="order" onclick="order()">我要訂購</button>
    <input class="keyword" id="keyword" type="text" placeholder="輸入用戶姓名">
    <button class="introduce" onclick="introduce()">&nbsp;認識工廠</button>
  </div>
  
  <div class="class3">
    <div class="order_info">
      <p id="info1">－－－－－－－－－－</p>
      <p id="info2">｜您的訂單　　　　｜</p>
      <p id="info3">｜顧客姓名：ＸＸＸ｜</p>
      <p id="info4">－－－－－－－－－－</p>
    </div>
  </div>
  
  
  

</div>

CSS

.div_bg{
  width:500px;
  height:250px;
  border-style:dashed;
  
  background-color:#D0D0D0;
}

.class1-2{
  width:500px;
  height:75px;
  
  display: flex;
  justify-content:space-evenly;
  align-items: center;

  border-bottom:solid;
  
}

.class3{
  width:500px;
  
  display: flex;
  justify-content:space-evenly;
  align-items: center;
 
}




.order{
  width:100px;
  height:30px;
  border-radius:10px;
  box-shadow: 0px 0px 2px 2px rgb(0,0,0);
  font-family:Microsoft JhengHei;
}

.introduce{
  width:100px;
  height:30px;
  border-radius:10px;
  box-shadow: 0px 0px 2px 2px rgb(0,0,0);
  font-family:Microsoft JhengHei;
}

.introduce:hover , .order:hover{
  box-shadow: 0px 0px 4px 4px rgb(0,0,0);
  background-color:	#FFFF6F;
  cursor: pointer;
}

.keyword{
  
  height:25px;
  border-radius:10px;
  box-shadow: 0px 0px 2px 2px rgb(0,0,0);
  font-family:Microsoft JhengHei;
}

.order_info{
  width:425px;
  /*border-style:solid;*/
}

JavaScript

function order(){
	
  var keyword = document.getElementById('keyword').value;
  
  if(keyword == ""){
  	alert('謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價!');
  }
  else{
  	alert( keyword +'您好!謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價!');
  }
  
  var info3 = "｜顧客姓名：" + keyword + "｜";
  
  document.getElementById('info3').textContent  = info3;
  
}


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