JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cheader" style="padding-bottom: 0;">
    <div class="service-container">
          <div class="invisible-background"></div>
          <div id="service-box" class="bgbox">
              <div class="service-title">
                  <h3> CREATIVE PRODUCTION</h3>
              </div>  
          </div>
          <div id="service-box-desc" class="serv-desc-box">
            <p style="text-align: left; margin-top: 0; margin-bottom: -45px; ">Clients
              engage us to achieve measurable results; our team of specialists ensure that
              happens. We aim to be very approachable on the social channels. So if you
              want to know our secrets and can't learn them in our blogs, you know where
              to find us.</p><i class="fa fa-times" aria-hidden="true"></i>
          </div>

          <div id="service-box2" class="bgbox" style="border-left-width: 0; border-right-width: 0;">
              <div class="service-title">
                  <h3> CONTENT DISTRIBUTION </h3>
              </div>
          </div>
          <div id="service-box2-desc" class="serv-desc-box">
              <p style="text-align: left; margin-top: 0; margin-bottom: -45px;">Clients
              engage us to achieve measurable results; our team of specialists ensure that
              happens. We aim to be very approachable on the social channels. So if you
              want to know our secrets and can't learn them in our blogs, you know where
              to find us.</p><i class="fa fa-times" aria-hidden="true"></i>
          </div>

      <div id="service-box3" class="bgbox">
          <div class="service-title">
              <h3> PAID MEDIA </h3>
          </div>
      </div>
      <div id="service-box3-desc" class="serv-desc-box">
        <p style="text-align: left; margin-top: 0; margin-bottom: -45px;">Clients
          engage us to achieve measurable results; our team of specialists ensure that
          happens. We aim to be very approachable on the...

CSS

/* Services */

.bgbox { width: 33%; max-width: 628px; height: 474px; display: inline-block;
position: relative; margin-left: -3px; margin-right: -3px; z-index: 2;
border: 5px solid #fff; }

.service-box {width: 100%; max-width: 628px;
height: 474px; display: inline-block; position: relative; z-index: 2; }

.service-box h3  { position: relative;
top: 44%; word-wrap: break-word; z-index: 4; }

.shade-a { background:rgba(0,0,0,.5)!important; opacity:0.8; -webkit-
transition: opacity .25s ease; -moz-transition: opacity .25s ease;}

.service-box:active{
opacity:0.8!important; -webkit-transition: opacity .25s ease!important; -
moz-transition: opacity .25s ease!important; }

.service-box:hover{
background:rgba(0,0,0,.5); opacity:0.4; -webkit-transition: opacity .25s
ease; -moz-transition: opacity .25s ease; cursor: pointer; }

.service-box:hover h3{
opacity:1.0; -webkit-transition: opacity .25s ease; -moz-transition: opacity
.25s ease; cursor: pointer; color: #fff; }

.service-title-W {color: #fff!important; }

.disable { pointer-events: none;  }

.serv-desc-box { border: 5px solid #fff; background: rgba(0,0,0,.5);
opacity:0.8; -webkit-transition: opacity .25s ease; -moz-transition: opacity
.25s ease; position: relative; display: none; z-index: 2; width: 41%; max-
width: 750px; height: auto; padding: 5px; border-top-width: 0; color: #fff;}

.invisible-background {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index:3;
  }
}

JavaScript

//Show/Hide Services Description Onclick

$(".invisible-background").on("click", function(e){
    $(".serv-desc-box").hide();
    $(".invisible-background").hide();
})

$(".bgbox").on("click", function(e){
    var id = $(this).attr("id");
    $("#"+id+"-desc").show();
    $(".invisible-background").show();
})

$(".cheader .bgbox").on("click", function(e){
    var id = $(this).find("div").attr("id");
		toggle_states(id);
});

function toggle_states(id_selector){
	var item = $(id_selector);
  item.find(".service-title").toggleClass('shade-a');
  item.find(".service-title h3").toggleClass('service-title-W');
  item.find(".service-title").toggleClass('disable');
	$(".service-title:not(#id_selector)").toggleClass('disable');
}