JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item">
  <button  onclick="toastSuccess()">成功訂購商品</button>
  <div class="toast toast-success">
    <p>訂購成功！可以查看 Email 確認訂單細節！</p>
  </div>
</div>



<div class="item">
  <button onclick="toastError()">訂購商品失敗</button>
  <div class="toast toast-error">
    <p>抱歉，訂購失敗！請稍後重新嘗試</p>
  </div>
</div>

CSS

.item{
  display: flex;
  margin-top: 30px;
  margin-left: 10px;
  height: 100px;
}
button{
  height: 50px;
  border: solid 1px #ccc;
  border-radius: 10px;
  background-color: antiquewhite;
  cursor: pointer;
}
button:hover{
  opacity: 0.8;
}
.toast{
  display: none;
  margin-left: 10px;
  height: 40px;
  padding: 5px;
  opacity: 0.8;
  border-radius: 10px;
}
.toast-success{
  background-color: #F99;
}
.toast-error{
  background-color: #9F9;
}
p{
  font-weight: 600;
  line-height: 0.8;
}

JavaScript

var success=document.querySelector('.toast-success');
var error=document.querySelector('.toast-error');

function toastSuccess(){
  success.style.display='block';
  setTimeout(function(){
    success.style.display='none';
  },5000)

}

function toastError(){
  error.style.display='block';
  setTimeout(function(){
    error.style.display='none';
  },5000)
}