JSFiddle - React, Tailwind, and code Playground

HTML

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

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

SCSS

$success-color: #eaf7ee;
$success-border-color: #c9e4d0;
$error-color: #fcede9;
$error-border-color: #f2ded9;


button {
  width: 300px;
  border: none;
  background-color: #aaa;
  cursor: pointer;
  font-size: 18px;
  color: #fff;
  border-radius: 8px;
  transition: opacity, visibility 1s linear;
}

.toast {
  opacity: 0;
  width: 500px;
  height: 2.5rem;
  line-height: 2.5rem;
  border-radius: 8px;
  margin-top: 20px;
  font-size: 24px;
  transition: opacity 0.5s linear;
  
  &-success {
    background-color: $success-color;
    border: 2px solid $success-border-color;
  }
  
  &-error {
    background-color: $error-color;
    border: 2px solid $error-border-color;
  }
  
  &.visible {
    opacity: 1;
  }
}

JavaScript

const successToast = document.querySelector('.toast-success');
const errorToast = document.querySelector('.toast-error');

function toastSuccess() {
	successToast.classList.add('visible');
  setTimeout(function() {
  	successToast.classList.remove('visible');
  }, 5000);
}

function toastError() {
	errorToast.classList.add('visible');
  setTimeout(function() {
  	errorToast.classList.remove('visible');
  }, 5000);
}