JSFiddle - React, Tailwind, and code Playground

by shnny

HTML

<button class="success" onclick="toastSuccess()">成功訂購商品</button>
<hr>
<button class="error" onclick="toastError()">訂購商品失敗</button>

<div style="display:none" class="toast toast-success">
  訂購成功！可以查看 Email 確認訂單細節！
</div>
<div style="display:none"  class="toast toast-error">
  抱歉，訂購失敗！請稍後重新嘗試
</div>

CSS

.toast{
  border-radius:5px;
  padding: 8px;
  border:1px solid;
  margin-top: 15px;
}
button{
  border-radius:5px;
  padding: 8px;
  border:1px solid;
  cursor:pointer;
}
button:active{
  opacity:0.7 ;
  transition:0.2s;
}
.toast-success ,.success{
  background: #d5f1de;
  border-color: #16582c;
  color:#1c6e37;
}

.toast-error,.error{
  background: #fadddd;
  border-color:  #6e2828;
  color:#893232;  
}

JavaScript

function toastSuccess(){
	let success = document.querySelector('.toast-success')
  success.style.display = 'block';
  setTimeout(()=>{
  	success.style.display = 'none';
  },5000)
}
function toastError(){
	let error = document.querySelector('.toast-error')
  error.style.display = 'block'
   setTimeout(()=>{
  	error.style.display = 'none';
  },5000)
}