JSFiddle - React, Tailwind, and code Playground

by ZooeyLai

HTML

<div id="app" class="wrap">
        <button onclick="toastSuccess()" class="btn btn-success">成功訂購商品</button>
        <hr>
        <button onclick="toastError()" class="btn btn-danger">訂購商品失敗</button>
        
        <div class="toast toast-success">
            訂購成功！可以查看 Email 確認訂單細節！
        </div>
        <div class="toast toast-error">
            抱歉，訂購失敗！請稍後重新嘗試
        </div>
    </div>

SCSS

*{
    box-sizing: border-box;
}
$primary: #2563eb;
$primary-100: #dbeafe;
$primary-800: #1e40af;
$success: #059669;
$success-100: #d1fae5;
$success-800: #065f46;
$danger: #e11d48;
$danger-100: #ffe4e6;
$danger-800: #9f1239;
$warning: #ea580c;
$warning-100: #ffedd5;
$warning-800: #9a3412;

$types: (
    success: $success,
    danger: $danger,
);



.wrap{
    width: 600px;
    margin: 80px auto;
    position: relative;
}

.btn{
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: all 0.3s;
    cursor: pointer;
}

@each $name, $color in $types {
    .btn-#{$name} {
        background:$color;
        color:#fff;
        border: 1px solid $color;
        &:hover{
            background: darken($color, 8%);
        }
    }
}

.toast{
    padding: 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    // display: none;
    opacity: 0;
    transition:  opacity .3s;
	position: fixed;
	top: 30px;
	right: 20px;
}
.toast-active{
    display: block;
}

.toast-success{
    background-color: $success-100;
    color: $success;
}

.toast-error{
    background-color: $danger-100;
    color: $danger;
}

JavaScript

function toastSuccess(){
            let successToast = document.querySelector('.toast-success');
            successToast.classList.add('toast-active');
            successToast.style.opacity = '1';
            setTimeout(() => {
                successToast.style.opacity = "0";
                successToast.classList.remove('toast-active');
            },5000)
        }
        function toastError(){
            let successToast = document.querySelector('.toast-error');
            successToast.classList.add('toast-active');
            successToast.style.opacity = '1';
            setTimeout(() => {
                successToast.style.opacity = "0";
                successToast.classList.remove('toast-active');
            },5000)
        }