JSFiddle - React, Tailwind, and code Playground

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>

<body>
    <div class="" w3-bar>
        <h2></h2>
        <input id="inputName" type="text" />
        <button class="w3-button w3-teal" onclick="clickBuy()">我要訂購</button>
        <button class="w3-button w3-red" onclick="clickIntro()">認識工廠</button>
        <div>------------------------------</div>
        <div>您的訂單</div>
        <div id="orderName">顧客姓名:</div>
        <div>------------------------------</div>
    </div>
</body>

</html>

CSS

#inputName {
    caret-color: green;
    outline-color: red;
}
#btn1{
  
}

JavaScript

function clickBuy() {
    const name1 = document.getElementById('inputName').value;
    alert('「' + name1 + '您好！謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！」');
    document.getElementById('orderName').textContent = "顧客姓名:" + name1;
}
function clickIntro() {
    alert('「我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！」');
}