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/">
    <input name="beach" type="hidden" value"">
</div>
    
    
<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;
}
.selected-alert {
    padding: 1em;
    background: red;
    background: rgba(0,0,0,0.5);
    color: white;
    position: absolute;
}

JavaScript

$(document).ready(function() {
	$('.selectable').click(function() {
		var imgTitle = $(this).children('p');
		$(this).toggleClass('selected');
		if($(this).hasClass('selected')) {
			$("<div class='selected-alert'>Selected</div>").insertAfter(imgTitle);
		} else {
			$(this).children('.selected-alert').remove();
		}
        
        $('.selectable').children('input').prop('value', false);
        $('.selected').children('input').prop('value', true);
	});
});