JSFiddle - React, Tailwind, and code Playground

by johnny890118

HTML

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

<div class="toast toast-success">
  <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-check-circle" viewBox="0 0 16 16">
    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
    <path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z" />
  </svg>
  訂購成功！可以查看 Email 確認訂單細節！
</div>
<div class="toast toast-error">
  <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
    <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
  </svg>
  抱歉，訂購失敗！請稍後重新嘗試
</div>

CSS

.toast-success {
  display: none;
  background-color: #d1e7dd;
  color: #0f5132;
  padding: 10px;
  border-left: solid 5px #0f5132;
  border-radius: 5px;
  align-items: center;
  margin: 30px 0px;
  box-shadow: 5px 10px 18px #888888;
}

.toast-error {
  display: none;
  background-color: #f8d7da;
  color: #842029;
  padding: 10px;
  border-left: solid 5px #842029;
  border-radius: 5px;
  align-items: center;
  box-shadow: 5px 10px 18px #888888;
}

svg{
  margin-right: 20px;
}

JavaScript

function toastSuccess() {
  let toastSuccess = document.querySelector(".toast-success")
  toastSuccess.style = "display: flex";
  setTimeout(function() {
    toastSuccess.style = "display: none"

  }, 5000)
}

function toastError() {
  let toastError = document.querySelector(".toast-error")
  toastError.style = "display: flex";
  setTimeout(function() {
    toastError.style = "display: none"

  }, 5000)
}