JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">1</div>
    <div class="close">X</div>
<div class="box">2</div>
    <div class="close">X</div>
<div class="box">3</div>
    <div class="close">X</div>
<div class="box">4</div>
    <div class="close">X</div>
<div class="box">5</div>
    <div class="close">X</div>

CSS

.AlertTitle
        {

            font-size:2em;
            text-align:center;
            position:relative;
            top:-8px;

        }

        .box
        {

            background-color:#fefefe;
            border:2px solid #5556a7;
            border-radius:10px;
            width:50%;
            height:20%;
            position:fixed;
            z-index:1000;
            left:25%;
            padding-left:25px;
            padding-top:10px;
            top:30%;
            box-shadow:0px 0px 100px 2px grey;
            overflow-x:hidden;

        }

        .close
        {

            position:absolute;
            top:-2px;
            left:-1px;
            border:2px solid #5556a7;
            border-bottom-right-radius:10px;
            border-top-left-radius:10px;
            width:45px;
            height:19px;
            padding-top:2px;
            padding-left:2px;

        }

        .close:hover
        {

            font-weight:bold;

            cursor:pointer;

        }

JavaScript

$(document).ready(function()
{

    $(".close").click(function()
    {

        $(this).fadeOut();
        $(this).prevAll(".box:first").fadeOut();
        //$("body").load("update_box");

    });
/*
    $("this").closest(".box").dblclick(function()
    {

        $("this").closest(".box").effect("highlight");

    }); */

});