JSFiddle - React, Tailwind, and code Playground

by CreativeDSG

HTML

<div id="uber">
    <div class="box box1">
        <a href="#" class="remove">Remove</a>
        <h1>Box 1</h1>
        <p>Objectively simplify dynamic e-business before out-of-the-box channels. </p>
    </div>
    <div class="box box2">
        <a href="#" class="remove">Remove</a>
        <h1>Box 2</h1>
        <p>Compellingly build global human capital rather than magnetic partnerships. </p>
    </div>
    <div class="box box3">
        <a href="#" class="remove">Remove</a>
        <h1>Box 3</h1>
        <p>Holisticly communicate premium technologies rather than 24/7 content. </p>
    </div>
    <div class="pageRefresh">
        <button>Refresh a Page in jQuery</button>
    </div>
</div>

CSS

.box {
    float: left;
    margin-right: 20px;
    padding: 10px;
    width: 20%;
    background: lightgrey;
}

.pageRefresh {
    clear: both;
    padding: 20px 0;
}

.is-hidden {
    display: none;
}

JavaScript

$('.remove').click(function() {
    $(this).closest('.box').fadeOut("slow", function() {
        $(this).addClass('is-hidden');
    });
});

$('.pageRefresh').click(function() {
    $('.box.is-hidden').fadeIn("slow", function() {
        $(this).removeClass('is-hidden');
    });
});