JSFiddle - React, Tailwind, and code Playground

by Alexander Startsev

HTML

<div class="message-box">
    <p>Импликация, как принято считать, заполняет трансцендентальный знак, отрицая очевидное. Ощущение мира, как следует из вышесказанного, амбивалентно. Предмет деятельности осмысленно подчеркивает данный катарсис, не учитывая мнения авторитетов. Принцип восприятия выводит мир, ломая рамки привычных представлений.</p>
    <span class="close-button">&#215;</span>
</div>

CSS

html, body{
    margin: 0;
    padding: 0;
    background: #FFF;
}

.message-box{
    font: 12px/18px normal Arial, sans-serif;
    background: #FFF;
    color: #000;
    padding: 10px;
    width: 300px;
    border: 1px #CCC solid;
    border-radius: 5px;
    margin: 10px;
    position: relative;
}

.message-box:hover .close-button{
    opacity: 1;
}

.message-box p{
    margin: 0;
    padding: 0;
}

.close-button{
    position: absolute;
    right: 5px;
    top: 2px;
    font-size: 20px;
    font-weight: bold;
    opacity: 0;
    -webkit-transition: .3s opacity, .15s color;
    -moz-transition: .3s opacity, .15s color;
    -ms-transition: .3s opacity, .15s color;
    -o-transition: .3s opacity, .15s color;
    transition: .3s opacity, .15s color;
    color: #990000;
}

.close-button:hover{
    cursor: pointer;
    color: #cc0000;
}

.close-button:active{
    top: 3px;
}

JavaScript

$(function(){
    function get_cookie(cookie_name){
        var results = document.cookie.match ('(^|;) ?' + cookie_name + '=([^;]*)(;|$)');
        if (results)
            return (unescape (results[2]));
        else
            return null;
    }

function check_cookie(){
	var textCookie = get_cookie('messagetext'),
        currentText = $('.message-box p').text();
	if (textCookie == currentText) {
        $('.message-box').hide(0);
    }
}

check_cookie();
    
    $('.close-button').click(function(){
        var currentText = $('.message-box p').text(),
        date = new Date();
        date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000));
		document.cookie = "messagetext="+currentText+"; expires="+date.toGMTString()+"; path=/";
        $('.message-box').fadeOut(200);
    });
})