JSFiddle - React, Tailwind, and code Playground

by Mohamed Amer

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">X</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: red;
    color: #fff;
}

JavaScript

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