JSFiddle - React, Tailwind, and code Playground

by johnny890118

HTML

<div class = "page">
<input id = "name" type = "text" placeholder = "請輸入貴賓姓名"/>
<button class = "btn" onclick = "myfunction()">
我要訂購
</button>

<button class = "btn" onclick = "myfunction2()">
認識工廠
</button>
</div>

CSS

.btn{
  width: 100px;
  height: 50px;
  font-size: 17px;
  border-radius: 10px;
  margin: 1em;
  color: white;
  background-color: rgb(183 60 88);
  font-weight: bold;
}

.btn:hover{
  background-color: #913147;
}

.page{
  background-color: #f6e4e8;
  display: flex;
  justify-content: center;
}

.btn:active{
  transform: scale(0.9);
}

#name{
  border-radius: 10px;
  height: 30px;
  margin: auto 0px;
}

JavaScript

function myfunction(){
var str = document.getElementById("name").value;
alert(str+"您好！謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！");
}

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