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">
  <div class="item">
    <input type="text" id="name" placeholder="請輸入姓名" required>
    <button onclick="Order()">我要訂購</button>
    <button onclick="factory()">認識工廠</button>
  </div>
  <div class="item">
     <h3>服裝分類:</h3>
     <select id="sex">
        <option>男裝</option>
        <option>女裝</option>
     </select>
  </div>
  <div class="item">
       <h3>服裝類型:</h3>
       <select id="category">
          <option>外套</option>
          <option>上衣</option>
          <option>下身</option>
       </select>
  </div>
  <div class="item">
       <h3>訂購數量:</h3>
       <input id="order_num" type="text" name="num" placeholder="請輸入訂購數量">
  </div>
</div>

<div class="container">
    <h2>[我要訂購]</h2>
    <h3>您的訂單:</h3>
    <h3>顧客姓名:<span id="order"></span></h3>
    <h3>服裝分類：<span id="clothe_sex"></span></h3>
    <h3>服裝類型：<span id="clothe_category"></span></h3>
    <h3>訂購數量:<span id="clothe_num"></span></h3>
    <h3>初步估價:<span id="clothe_price"></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;
  margin: 0 auto;
  justify-content: center;
  margin-bottom: 2rem;
}

.item{
  display:flex;
  align-items:center;
  margin-bottom: 1rem;
}

.item select{
  width:60%;
  height:30px;
  border:none;
  border-radius:5px;
}

.item h3{
  margin-right:1rem;
  color:#fff;
  font-weight: 600;
}

.item input{
  width:60%;
}

input{
  margin-right:1rem;
  padding:0.5rem;
  border-radius:5px;
  border:none;
  background-color:white;
}

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: 1px;
}



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


.container h3{
  margin:1rem;
}

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

JavaScript

function Order(){
	var name = document.getElementById("name").value;
  alert(name +"您好！謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！")
  document.getElementById("order").textContent = name;
  
  //服裝分類
  let sex = document.getElementById("sex");
  let sex_index = sex.selectedIndex;
	let clothe_style = document.getElementById("clothe_sex");
  clothe_style.textContent = sex.options[sex_index].value;
  
  //服裝分類
  let category = document.getElementById("category");
  let category_index = category.selectedIndex;
  let clothe_category = document.getElementById("clothe_category");
  clothe_category.textContent = category.options[category_index].value;
  
 
  //訂購數量
  let order_num = document.getElementById("order_num");
  let num = order_num.value;
  
  //判斷訂購男裝還是女裝 給予不同視窗
  if(clothe_style.textContent == "男裝"){
 		alert("最近剛好是工廠週年慶，只要您今天來電下單，我們將     贈送您帥氣領帶！");
    
    //將訂購數量導入到訂購欄位
    let num = document.getElementById("order_num").value;
    let clothe_num = document.getElementById("clothe_num");
    clothe_num.textContent = num;
    
    //計算男裝總訂購價格
    let clothe_price = document.getElementById("clothe_price");
    
    clothe_price.textContent = parseInt(num) * 500;
    }
   else if(clothe_style.textContent == "女裝"){
    alert("最近剛好是工廠週年慶，只要您今天來電下單，我們將     贈送您美麗圍巾！");
    
     //將訂購數量導入到訂購欄位
    let num = document.getElementById("order_num").value;
    let clothe_num = document.getElementById("clothe_num");
    clothe_num.textContent = num;
    
    //計算男裝總訂購價格
    let clothe_price = document.getElementById("clothe_price");
    
    clothe_price.textContent = parseInt(num) * 600;
    
    
   }
   console.log(clothe_category);
  
  
}