JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>javascript練習3</title>
</head>
<body>
    <div class="btn">
        <input id="keyword" type="text" placeholder="請輸入姓名...">
        <button onclick="myfunction()">我要訂購</button>
        <button onclick="yourfunction()">認識工廠</button>
    </div>

    <div class="content">
        <p>(我要訂購)</p>
        <p>您的訂單</p>
        <p>顧客姓名:<span id="username"></span></p>
    </div>
</body>
</html>

CSS

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;
        }
        .btn{
            display: flex;
            justify-content: center;
        }
        #keyword{
            border-radius: 10px;
            border: solid #ccc 0.5px;
        }
        .content{
            width: 360px;
            height: 250px;
            border: dashed #ccc 1px;
            border-radius: 5px;
            margin: auto;
            margin-top: 1rem;
            text-align: center;
            font-weight: 600;
            background-color:#FFFDD0;
        }

JavaScript

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