JSFiddle - React, Tailwind, and code Playground

by erika_sun

HTML

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

CSS

.container{
   margin: 2rem;
   width: 500px;
}
.alert{
  text-align:center;
  border-radius: 50px
  
}
.alert-primary{
  background: #88ffff;
}
.btn-close{
    color: black;
    border: 0px;
    font-size: 19px;
    background-color: transparent;
}
.alert:hover{
  transform:scale(1.1)
}

.alert-success{
   background: #82ff82
}
.alert-danger{
   background: #ffa6a6
}

.alert-warning{
   background: #ffc74f
}

JavaScript

const closeBtns = document.querySelectorAll('.btn-close')

closeBtns.forEach(function(btn){
	btn.addEventListener('click', ()=>{
  	btn.closest('.alert').remove()
  })
})