JSFiddle - React, Tailwind, and code Playground

by birdie2019

HTML

<div class="container">
  <div class="alert alert-primary">
    <p>歡迎您點擊「抖內」按鈕，以實際行動支持我們。</p>
    <button class="btn-close">×</button>
  </div>
  <hr>
  <div class="alert alert-success">
    <p>您已成功下訂單！以下為您的訂單詳細資訊。</p>
    <button class="btn-close">×</button>
  </div>
  <hr>
  <div class="alert alert-danger">
    <p>抱歉，系統發生錯誤，請稍後重新嘗試。</p>
    <button class="btn-close">×</button>
  </div>
  <hr>
  <div class="alert alert-warning">
    <p>請注意，以下內容包含「劇透」爆雷資訊。</p>
    <button class="btn-close">×</button>
  </div>
</div>

CSS

* {
    box-sizing: border-box;
    font-size: 13px;
    letter-spacing: 1px;
}

.container {
    width: 500px;
    margin: 30px auto;
}

.alert {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin: 10px 0;
    transition: all 0.3s;
}

.alert:hover {
    transform: scale(1.1);
}

.alert > button {
    cursor: pointer;
    border: none;
    background-color: transparent;
    font-size: 18px;
    color: #707070;
}

.alert-primary {
    background: rgb(229, 248, 255);
    border-left: 7px solid rgb(0, 140, 187);
    color: rgb(0, 140, 187);
}

.alert-success {
    background: rgb(229, 252, 234);
    border-left: 7px solid rgb(26, 148, 95);
    color: rgb(18, 171, 104);
}

.alert-danger {
    background: rgb(255, 236, 236);
    border-left: 7px solid rgb(215, 76, 76);
    color: rgb(215, 76, 76);
}

.alert-warning {
    background: rgb(255, 247, 233);
    border-left: 7px solid rgb(241, 170, 70);
    color: rgb(241, 170, 70);
}

JavaScript

var items = document.querySelectorAll('.alert button');
for (var item of items) {
    item.onclick = deleteAlert;
}
function deleteAlert() {
    event.target.closest('.alert').remove();
}