JSFiddle - React, Tailwind, and code Playground

by ZooeyLai

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <div id="app" class="wrap">
        <div class="alert alert-primary">
            <i class="fa-solid fa-face-smile"></i>
            <span class="text">歡迎您點擊「抖內」按鈕，以實際行動支持我們。</span>
            <button class="btn-close"><i class="fa-solid fa-xmark"></i></button>
        </div>
        <hr>
        <div class="alert alert-success">
            <i class="fa-solid fa-circle-check"></i>
            <span class="text">您已成功下訂單！以下為您的訂單詳細資訊。</span>
            <button class="btn-close"><i class="fa-solid fa-xmark"></i></button>
        </div>
        <hr>
        <div class="alert alert-danger">
            <i class="fa-solid fa-circle-exclamation"></i>
            <span class="text">抱歉，系統發生錯誤，請稍後重新嘗試。</span>
            <button class="btn-close"><i class="fa-solid fa-xmark"></i></button>
        </div>
        <hr>
        <div class="alert alert-warning">
            <i class="fa-solid fa-triangle-exclamation"></i>
            <span class="text">請注意，以下內容包含「劇透」爆雷資訊。</span>
            <button class="btn-close"><i class="fa-solid fa-xmark"></i></button>
        </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;

.wrap{
    width: 600px;
    margin: 0 auto;
}

@mixin alert-version($background, $color, $border) {
    background: $background;
    color: $color;
    border-color: $border;
}

hr{
    border: 1px solid #e4e6eb;
}
.btn-close{
    padding: 0.5rem;
    cursor: pointer;
    background: transparent;
    border: none;
    font-size: 1rem;
    transition: all 0.6s;
    &:hover{
      opacity: 0.5;
    }
}
.alert{
    padding: 1rem;
    border-left: 4px solid transparent;
    font-size: 1rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    border-radius: 0.25rem;
    opacity: 1;
    transition: opacity 0.6s;
    .text{
        flex: 1 auto;
    }
    &.alert-primary{
        @include alert-version($primary-100, $primary-800 , $primary);
        .btn-close{
            color: $primary-800;
        }
    }
    &.alert-success{
        @include alert-version($success-100, $success-800 , $success);
        .btn-close{
            color: $success-800;
        }
    }
    &.alert-danger{
        @include alert-version($danger-100, $danger-800 , $danger);
        .btn-close{
            color: $danger-800;
        }
    }
    &.alert-warning{
        @include alert-version($warning-100, $warning-800 , $warning);
        .btn-close{
            color: $warning-800;
        }
    }
}

JavaScript

let closeBtns = document.querySelectorAll('.btn-close');

        closeBtns.forEach((button) =>{
            button.addEventListener('click', ()=>{
            let alertEl = button.closest('.alert'); //closest寫法
            alertEl.style.opacity = '0';
                setTimeout(function(){
                    alertEl.remove();
                }, 600)
            })
        })