JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>javascript練習5</title>
</head>
<body>
      <div class="wrap">
        <div class="form">
            <input id="keyword" type="text" placeholder="請輸入姓名..."><br>
            <select id="gender">
                <option value="M" selected>男裝</option>
                <option value="F">女裝</option>
            </select>
            <select id="clothes">
                <option value="0" selected>上衣</option>
                <option value="1">下身</option>
                <option value="2">外套</option>
            </select>
            <div class="btn">
                <button onclick="myfunction()">我要訂購</button>
                <button onclick="yourfunction()">認識工廠</button>
            </div>
        </div>

        <div class="content">
            <p>(我要訂購)</p>
            <p>您的訂單</p>
            <p>顧客姓名:<span id="nametext"></span></p>
            <p>服裝分類:<span id="gendertext"></span></p>
            <p>服裝類型:<span id="clothestext"></span></p>
        </div>
    </div>
</body>
</html>

CSS

.wrap{
            width: 360px;
            margin:auto;
        }
        .btn{
            display: flex;
            justify-content: center;
        }
        button{
            color: #000;
            background-color:#FFFDD0;
            padding: 10px;
            border-radius: 10px;
            border: solid 1px #ccc;
            font-weight: 600;
            margin: 0 10px;
        }
        button:hover{
            background-color: #ccc;
        }
        #keyword{
            width: 200px;
            display: flex;
            border-radius: 10px;
            border: solid #ccc 0.5px;
            text-align: center;
            margin: auto;
        }
        .content{
            height: 250px;
            border: dashed #ccc 1px;
            border-radius: 5px;
            margin-top: 1rem;
            text-align: center;
            font-weight: 600;
            background-color:#FFFDD0;
        }
        select{
            display: block;
            display: flex;
            margin: auto;
            width: 100px;
            padding: 2px;
            margin-bottom: 5px;
            border-radius: 5px;
        }

JavaScript

function myfunction(){
            var name = document.getElementById('keyword').value;

            var gender = document.getElementById('gender');
            var genderindex = gender.selectedIndex;
            var gendertext = gender.options[genderindex].text;
            var gendervalue = gender.options[genderindex].value;


            var clothes = document.getElementById('clothes');
            var clothesindex = clothes.selectedIndex;
            var clothestext = clothes.options[clothesindex].text;

            alert(name+'您好謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！');
            if(gendervalue=="M"){
                alert("最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您帥氣領帶！");
            }else{
                alert("最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您美麗圍巾！");
            }

            document.getElementById('nametext').textContent=name;
            document.getElementById('gendertext').textContent=gendertext;
            document.getElementById('clothestext').textContent=clothestext;


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