JSFiddle - React, Tailwind, and code Playground

by Justin Breen

HTML

<div class="img-tile selectable">
							<p>
								Destination Title
							</p>
							<img src="http://lorempixel.com/380/210/city/5/">
						</div>

CSS

#img-box-cts {
	padding: 1em;
	background: #eee;
	border-radius: 0.5em;
	display: inline-block;
}
.img-tile {
	border-radius: 0.5em;
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	cursor: pointer;
}
.img-tile > p {
	margin: 0;
	padding: 0.5em 1em;
	background: #1762a3;
	font-size: 13px;
	color: #fff;
	border-radius: 0.5em 0.5em 0 0;
    position: relative;
}
.img-tile img {
	border-radius: 0 0 0.5em 0.5em;
}
.test-class {
    padding: 1em;
    background: red;
    position: absolute;
}

JavaScript

$(document).ready(function() {
    $('.selectable').click(function() {
        $('<div class="test-class">Selected</div>').insertAfter('.img-tile > p');
        $(this).toggleClass('selected');
        $('.selected').click(function() {
            $('.test-class').css('display','none');
	    });
	});
    
    //$('.test-class').click(function() {
    //    $('.img-tile').css( "display", "none" );
	//});
    
    //
});