JSFiddle - React, Tailwind, and code Playground

by Yeldar Kurmangaliyev

HTML

<div class="portfolio-item" style="margin-top: 5px; ">
   <div class="overlay">
      <h1>LOW POLY ISLANDS</h1>
      <h3>LOW POLY</h3>
   </div>
   <div class="about">
      <h1>LOW POLY ISLANDS</h1>
      <h3>LOW POLY</h3>

      <div class="descrip">
         This is a low poly island make in Blender and edited in Photoshop.
      </div>

      <div class="minus">REMOVE THE RED BACKGROUND</div>
      <div class="plus"></div>
    </div>
    <img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/57909c29180525.55fc4b1875c26.png" width="100%" />
</div>

CSS

.on {
    background-color: red;
}

.minus {
    font-weight: bold;
    color: green;
    font-size: 25px;
}

JavaScript

$('.portfolio-item').click(function() {
    $(this).addClass('on');
  });
  $('.minus').click(function(e) {
    $(this).closest('.portfolio-item').removeClass('on');
      e.stopPropagation();
  });