JSFiddle - React, Tailwind, and code Playground

HTML

<button class="btn btn-success" onclick="toastSuccess()">成功訂購商品</button>
    <hr>

    <button class="btn btn-error" onclick="toastError()">訂購商品失敗</button><br><br>

    <div class="toast toast-success">
        ✔ 訂購成功！可以查看 Email 確認訂單細節！
    </div>

    <div class="toast toast-error">
        ✘ 抱歉，訂購失敗！請稍後重新嘗試
    </div>

CSS

.btn{
    border-radius: 10px 10px 10px 10px;
    
    font-family: Comic Sans MS , Microsoft JhengHei;

    transition: 0.3s;
}
.btn:hover{
    transform: scale(1.1);
}
.btn:active{
    transform: scale(0.9);
}

.btn-success{
    border: 3px solid #1AFD9C;
    color: #00BB00;
    background-color: #d0ffd6;
}

.btn-error{
    border: 3px solid #EA0000;
    color: #D9006C;
    background-color: #ffd0d0;
}


.toast{
    width: 500px;
    height: 40px;

    line-height: 40px;
    text-align: center;
    font-family: Comic Sans MS , Microsoft JhengHei;

    border-radius: 10px;

    display: none;
    opacity:0;
    transition: opacity 0.5s ease-in-out;
}

.toast-success{
    border: 3px solid #1AFD9C;
    color: #00BB00;
    background-color: #d0ffd6;
}

.toast-error{
    border: 3px solid #EA0000;
    color: #D9006C;
    background-color: #ffd0d0;
}

JavaScript

function toastSuccess(){

    function display_block(){
        document.querySelector('.toast-success').style.display = 'block';
    }
    setTimeout(display_block ,0);

    function opacity1(){
        document.querySelector('.toast-success').style.opacity = '1';
    }
    setTimeout(opacity1 ,100);

    function opacity0(){
        document.querySelector('.toast-success').style.opacity = '0';
    }
    setTimeout(opacity0 ,5100);

    function display_none(){
        document.querySelector('.toast-success').style.display = 'none';
    }
    setTimeout(display_none,5500);

}

function toastError(){

    function display_block(){
        document.querySelector('.toast-error').style.display = 'block';
    }
    setTimeout(display_block ,0);

    function opacity1(){
        document.querySelector('.toast-error').style.opacity = '1';
    }
    setTimeout(opacity1 ,100);

    function opacity0(){
        document.querySelector('.toast-error').style.opacity = '0';
    }
    setTimeout(opacity0 ,5100);

    function display_none(){
        document.querySelector('.toast-error').style.display = 'none';
    }
    setTimeout(display_none,5500);

}