JSFiddle - React, Tailwind, and code Playground
HTML
<div class="block">
<h2><a href="{full-link}" class="title">{title}</a></h2>
block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block</div>
<div class="block">
<h2><a href="{full-link}" class="title">{title}</a></h2>block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block</div>
<div class="block">
<h2><a href="{full-link}" class="title">{title}</a></h2>block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block</div>
CSS
.block {
background: #DCFFF0;
border: 1px solid #51BD90;
margin: 5px 0;
padding: 5px;
}
.block.active {
background: #51BD90;
border: 1px solid #14744C;
}
JavaScript
$(document).on('click', '.block', function () {
if ($(this).hasClass('active') == false) {
$('.block').removeClass("active");
}
$(this).toggleClass("active");
return false;
});