JSFiddle - React, Tailwind, and code Playground

by erika_sun

HTML

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

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

CSS

.wrapping{
  display: flex;
}
.toast{
  margin-left: 8px;
}

.toast-success{
  background: #a4ffa4;
  width: fit-content;
}

.toast-error{
  background: #ff9898;
  width: fit-content;
}

.hiddrenToast{
  display: none
}

JavaScript

const success = document.querySelector('.toast-success')

const error = document.querySelector('.toast-error')

function toastSuccess() {
	success.classList.remove('hiddrenToast')
  setTimeout(()=>{
  success.classList.add('hiddrenToast')
  }, 5000)
}

function toastError() {
	error.classList.remove('hiddrenToast')
  
  setTimeout(()=>{
  error.classList.add('hiddrenToast')
  }, 5000)
}