JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="toastSuccess_show()">成功訂購商品</button>
<hr>
<button onclick="toastFail_show()">訂購商品失敗</button>


<div class="success_window window">
  <p> 訂購成功！可以查看 Email 確認訂單細節！</p>
</div>

<div class="fail_window window">
  <p>抱歉，訂購失敗！請稍後重新嘗試</p>
</div>

CSS

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

html,body{
}

.window{
  width:80vw;
  height:80vh;
  border:1px solid black;
  margin:0 auto;
  border-radius: 10px;
  display:none;
  justify-content:center;
  align-items:center;
}

.success_window p,.fail_window p{
  font-size:20px;
  font-weight: 600;
  padding:10px;
}

.success_window{
  color:#579e97;
  background-color:#e9f5f5;
  border:3px solid #62a69e;
}

.fail_window{
  color:#B40F28;
  background-color:#FF8194;
  border:3px solid #FF1E3F;
}

JavaScript

function toastSuccess_show(){
	let success_window = document.querySelector(".success_window");
  success_window.style.display = "flex";
  setTimeout("toastSuccess_hide()",5000);
}

function toastSuccess_hide(){
	let success_window = document.querySelector(".success_window");
  success_window.style.display = "none";
}

function toastFail_show(){
	let fail_window = document.querySelector(".fail_window");
  fail_window.style.display = "flex";
  setTimeout("toastFail_hide()",5000);
}

function toastFail_hide(){
	let fail_window = document.querySelector(".fail_window");
  fail_window.style.display = "none";
}


function close_btn(){
	event.target.closest("div").style.display = "none";
}