JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>ONLINE ORDE</title>
    <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=Noto+Sans+TC:wght@100;400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="order">
        <h1>- ONLINE ORDER -</h1>
        <div class='name'>
            <label for="">顧客姓名</label>
            <input id='name' type="text" placeholder="請輸入姓名..." required>
        </div>
        <div class="classify">
            <label for="">服裝分類</label>
            <select name="" id="Cclassify">
                <option value="Coat">MAN</option>
                <option value="T-shirt">LADY</option>
            </select>
        </div>
        <div class="type">
            <label for="">服裝類型</label>
            <select name="" id="Ctype">
                <option value="Coat">外套</option>
                <option value="T-shirt">T恤</option>
                <option value="trouser">褲子</option>
            </select>
        </div>

        <div class='card'>
            <button onclick="myFunction()">我要訂購</button>
            <button onclick="myFactory()">認識工廠</button>
        </div>
        <div class="oredrtext" id="oredrtext">
            <div class="ordertitle">
                <h2>您的訂單</h2>
            </div>

            <ul class="oredrname">
                <li>顧客姓名:<span id="oredrname"></span>
                </li>
                <li>服裝分類:<span id="oredrclassify"></span>
                </li>
                <li>服裝類型:<span id="oredrtype"></span>
                </li>
            </ul>
        </div>
    </div>

    <script src="index.js"></script>

</body>

</html>

CSS

* {
    padding: 0;
    margin: 0;
    font-family: 'Noto Sans TC', sans-serif;
}

body {
    background: lightblue;

}

.order {
    margin: 50px auto;
    background: rgba(119, 136, 153, 0.5);
    width: 500px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

p {
    margin: 10px 0;
    font-size: 12px;
}

li {
    list-style-type: none;
    font-size: 12px;
}

label {
    font-size: 12px;
    margin-bottom: 10px;
}

input {
    width: 180px;
}

.name {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.name>input {
    border: 0;
    border-radius: 50px;
    padding: 2px 10px;
    background-color: white;
}

.card {

    display: flex;
    align-items: center;
    justify-content: center;
}

button {
    margin: 20px;
    width: 150px;
    padding: 10px;
    background: lightgray;
    color: white;
    border-radius: 50px;
    border: 2px solid gray;
}

button:hover {
    background: white;
    color: lightblue;
    border: 2px dashed lightblue;
    font-weight: 800;
}

.classify {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.type {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

select {
    width: 200px;
    border: 0;
    border-radius: 50px;
    padding: 2px 10px;
    background-color: white;
}

.oredrtext {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ordertitle {
    border-bottom: 3px solid lightslategray;
    color: white;
}

.oredrname {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

JavaScript

// DOM
var oredrname = document.getElementById('oredrname');
var Cclassify = document.getElementById("Cclassify");
var Ctype = document.getElementById("Ctype");
var oredrtype = document.getElementById("oredrtype");
function myFunction() {
    var name = document.getElementById('name').value;
    var CclassifyIndex = Cclassify.selectedIndex;
    var CtypeIndex = Ctype.selectedIndex;

    var CclassifyText = Cclassify.options[CclassifyIndex].text;
    var CtypeText = Ctype.options[CtypeIndex].text;
    alert(name + '您好！!謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！');
    oredrname.textContent = name;
    oredrclassify.textContent = CclassifyText;
    oredrtype.textContent = CtypeText;

}

function myFactory() {
    var name = document.getElementById('name').value;
    alert(name + '您好！!我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！');
}