JSFiddle - React, Tailwind, and code Playground

by t90920012

HTML

<script src="https://kit.fontawesome.com/41e2a8dba7.js" crossorigin="anonymous"></script>
<div>


<input id="keyword" type="text" />
<button onclick="myFunction()">Click me</button>
<div class="wrap">
<button onclick="phone()" class="btn"><i class="fa-solid fa-phone"></i>  我要訂購</button>
<button onclick="address()" class="btn"><i class="fa-solid fa-house-chimney"></i> 認識工廠</button>
</div></div>

CSS

* {
  padding: 0px;
  margin: 0px;
  background: FloralWhite;
}


.wrap {
  padding: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn {
  margin: 20px;
  background: LavenderBlush;
  border: 4px groove LightCoral;
  border-radius: 0.5rem;
  font-weight: bold;
  font-size: 22px;
  text-align: center;
  width: 150px;
  height: 50px;
  box-shadow: 8px 5px 6px rgba(1, 0, 0, 0.2);
}

.btn:hover {
  background: LightSalmon;
  translate: 5px 3px;
}

JavaScript

function myFunction()
{
  var str = document.getElementById('keyword').value;
  alert(str);
}

function phone()
{
  alert('謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！');
}
function address()
{
  alert('我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！');
}