JSFiddle - React, Tailwind, and code Playground

by ossianwork

HTML

<fieldset>
  <legend>線上下單</legend>
  <input type="text" id="user-name" placeholder="你的姓名">
  <div class="btn-group">
    <button onclick="check('謝謝您對我們的衣服有興趣！請致電 0800-950-950，會有專人提供您報價！')">我要訂購</button>
    <button class="btn-2" onclick="check2('我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！')">認識工廠</button>
  </div>
</fieldset>

CSS

*{
    box-sizing: border-box;
}
html,
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #111;
  height: 100%;
}
fieldset{
  padding: 1em;
  width: 300px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 0.5em;
}
legend{
  color: white;
}
input, button{
  padding: 0.75em;
  outline: none;
  border: none;
  width: 100%;
}
button{
  background-color: #ffd954;
  border-radius: 5px;
  cursor: pointer;
}
.btn-2{
  color: white;
  background-color: #444;
}
.btn-group{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0.5em;
  padding-top: 0.5em;
}

JavaScript

function check(msg){

  const username = document.getElementById('user-name').value;
  alert(username + "您好！" + msg);

}

function check2(msg){

  const username = document.getElementById('user-name').value;
  alert(msg);

}