JSFiddle - React, Tailwind, and code Playground

by chantastic

HTML

<div class="foo container">
    Foo Container
    <div class="plan clickable">
        Foo Plan
    </div>
</div>

<div class="bar container">
    Bar Container
    <div class="plan">
        Bar Plan
    </div>
</div>

SCSS

body { background: #ddd; color: #333; font-family: sans-serif; }

.container {
    background: #fff;
    margin-bottom: 10px;
    padding: 10px;
}

.plan {
    margin-top: 10px;
    border: 1px solid #ccc;
    padding: 10px;
    width: 100%;
    
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    
    &.clickable {
        cursor: pointer;
        
        &:hover {
            background: #eee;
        }
    }
}

.foo .plan:after {
    float: right;
    content: "click me. i'll hide";
    color: salmon;
}

JavaScript

var elementName = '.foo';

$(elementName).off().on('click', '.plan', function () {
    $(this).hide();
});