JSFiddle - React, Tailwind, and code Playground

by UnsungHero97

HTML

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1"><p class="col">Column 1</p><p class="col">Column 1</p><p class="col">Column 1</p><p class="col">Column 1</p><p class="col">Column 1</p><p class="col">Column 1</p><p class="col">Column 1</p></div>
            <div id="col2"><p class="col">Column 2</p><p class="col">Column 2</p><p class="col">Column 2</p></div>
            <div id="col3"><p class="col">Column 3</p><p class="col">Column 3</p><p class="col">Column 3</p><p class="col">Column 3</p><p class="col">Column 3</p><p class="col">Column 3</p><p class="col">Column 3</p><p class="col">Column 3</p><p class="col">Column 3</p><p class="col">Column 3</p><p class="col">Column 3</p><p class="col">Column 3</p><p class="col">Column 3</p><p class="col">Column 3</p><p class="col">Column 3</p><p class="col">Column 3</p></div>
        </div>
    </div>
</div>

CSS

#container3 {
    float:left;
    width:100%;
    background-color: #92ED6B;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background-color:#6997D3;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background-color:#E667AF;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}

JavaScript

$(document).ready(function() {

    $('.col').click(function() {
        $(this).remove();            
    });
});