JSFiddle - React, Tailwind, and code Playground

by Kai

CSS

.notice {
    position: relative;
    border-radius: 5px;
    background-color: #666;
    color: #fff;
    padding: 5px 10px;
}

.notice-close-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    font-family: Verdana;
    font-size: .8em;
    font-weight: bold;
    cursor: pointer;
}

JavaScript

function displayNotice (content) {
    // Create div, set content, add class, prepend to body and fade in
    $('<div></div>').html(content + '<span class="notice-close-btn">X</span>').addClass('notice').prependTo('body').hide().fadeIn('slow');
    
    // Add event handler to <span> to act as close button
    $('.notice-close-btn').click(function () {
        $(this).parent().fadeOut();
    });
}

displayNotice('You have a match.');