JSFiddle - React, Tailwind, and code Playground

by ossianwork

HTML

<fieldset>
  <legend>練習 JS</legend>
  <div class="btn-group">
    <button onclick="check('謝謝您對我們的衣服有興趣！請致電 0800-950-950，會有專人提供您報價！')">我要訂購</button>
    <button onclick="check('我們工廠位於新北市，通過國際 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-group{
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25em;
}

JavaScript

function check(msg){
	alert(msg);
}