JSFiddle - React, Tailwind, and code Playground

by Phil Everton

HTML

<div id="spot" class="spot clickable">
    <a href="javascript:void(0);" class="close_button">close</a>
</div>

CSS

#spot{height:100px;width:100px;padding:10px;background-color:red;}
#spot.spot{height:50px;width:50px;border-radius:100%}
#spot.spot a{display:none}
#spot a{display:inline;color:#FFFFFF;text-decoration:none}
#spot.grown{background-color:green}

JavaScript

$('.clickable').on('click', function() {
    $(this).removeClass('spot').addClass('grown');
}).children('.close_button').click(function(e) {
    e.stopPropagation();
    $(this).parent().toggleClass('spot grown');
});