JSFiddle - React, Tailwind, and code Playground

by aspdoctor

HTML

<div class="bomb">哈囉 <a class="close">X</a>

</div>

CSS

.bomb {
    position: absolute;
    display: none;
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    margin:-150px 0 0 -150px;
    font-size:3em;
    line-height: 300px;
    background: #eee;
    text-align: center;
}
.close {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    background: #000;
    color:#eee;
    font-size:12px;
    cursor: pointer;
}

JavaScript

$(function () {
    $('.bomb').fadeIn(1200);
    $('.close').on('click', function () {
        $('.bomb').fadeOut(200);
    })
})