JSFiddle - React, Tailwind, and code Playground

HTML

<div class="product-all-contents">


<div class="product-contents">
   <div class="product" id="franchisehub">
      <img id="franchise-hub" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Franchise-Hub.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7942">
      <p style=" font-size: 15px; font-family: 'Roboto'; margin-left: 7%; margin-right: 7%; line-height: 1.2;
         color: rgb(58, 59, 60);">AAA</p>
   </div>
   
   <div class="product" id="cloudbasedmobile" style="background-color:green;">
      <img id ="cloud-based-mobile" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/cloud-grey.png" alt="" width="70" height="50" class="aligncenter size-full wp-image-8042" />
      <p  style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2;
         color: rgb(58, 59, 60);">BBB</p>
   </div>
   <div class="product" id="businessanalytics">
      <img id="business-analytics" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/business-analytics.png" alt="" width="53" height="53" class="aligncenter size-full wp-image-7949" /> 
      <p  style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2;
         color: rgb(58, 59, 60);">CCC</p>
   </div>
   <div class="product" id="techsupport">
      <img id="tech-support" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/tech-support.png" alt="" width="54" height="54" class="aligncenter size-full wp-image-7953" />
      <p  style=" font-size: 15px;
         font-family: 'Roboto';
         margin-right: 9%;
         line-height: 1.2;
         margin-left: 9%;
         color: rgb(58, 59, 60);">DDD</p>
   </div>
   <div class="product" id="ordermanagement">
      <img id="order-management" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/order-management.png" alt="" width="43" height="52" class="aligncenter size-full wp-image-7952" /> 
      <p  style=" font-size: 15px;
        ...

CSS

.product-all-contents{
 background-color: #f0f0f0;
}

.product-contents {
  margin-left: 15%;
  margin-right: 15%;
  display: flex;
  justify-content: space-between;
 
  align-items: center;
  padding: 1rem;
 
}

.product-contents .product {
  width: 10%;
  text-align: center;
  height: 150px;
  padding-top: 1%;
  padding-left: 1%;
  padding-right: 1%;
  border-style: solid;
  border-width: 3px;
  border-color: rgb(145, 147, 150);
  background-color: white;
  border-radius: 10px
}

.product-contents .product #franchise-hub {
  margin-bottom: 22%;
}

.product-contents .product #cloud-based-mobile {
  margin-bottom: 30%;
}

.product-contents .product #business-analytics {
  margin-bottom: 28%;
}

.product-contents .product #tech-support {
  margin-bottom: 27%;
}

.product-contents .product #order-management {
  margin-bottom: 27%;
}

.product-contents .product #employee-management {
  margin-bottom: 18%;
}

.product-contents .product #white-label {
  margin-bottom: 15%;
}

.product-contents .product #brand-control {
  margin-bottom: 20%;
}

.product-contents .product #lead-tracking {
  margin-bottom: 28%;
}

.product-contents .product #custom-invoicing {
  margin-bottom: 27%;
}

.product-contents .product #goal-setting {
  margin-bottom: 26%;
}

.product-contents .product #customization-tools {
  margin-bottom: 27%;
}

.product-contents .product #royalty-calculator {
  margin-bottom: 27%;
}

.product-contents .product #email-marketing {
  margin-bottom: 24%;
}

.ipads {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.tvs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}




.cloud-based-text {
  width: 50%;
}

div.cloudbasedtextipad {
  display: flex;
  margin-left: 15%;
  margin-right: 15%;
  align-items: center;
  background-color: #f0f0f0;
  padding: 2%;
  margin-bottom: 5%;
}


.franchise-hub-text {
  width: 50%;
}



div.franchisehubtv {
  display: flex;
  margin-left:...

JavaScript

(function($){// IIFE to enable `$` as jQuery
   $(function(){// document ready
      
$("#franchisehub").click(function() {
  if ($('.franchisehubtv').css('display') == "flex") {
    $('.franchisehubtv').css('display', 'none');
	

  } else {
	$('#franchisehub').css('background-color', 'green');
    $('#franchisehub p').css('color', 'white'); 	
	
	$('#cloudbasedmobile').css('background-color', 'white');    
    $('#cloudbasedmobile p').css('color', '#222222');    
    
	$('#businessanalytics').css('background-color', 'white');   
    $('#businessanalytics p').css('color', '#222222');   
    
	
	$('#techsupport').css('background-color', 'white');	
	$('#techsupport p').css('color', '#222222');	
	
	
	$('#ordermanagement').css('background-color', 'white');  
	$('#ordermanagement p').css('color', '#222222');  
	
	
	$('#employeemanagement').css('background-color', 'white'); 
	$('#employeemanagement p').css('color', '#222222'); 
	
	
	$('#whitelabel').css('background-color', 'white');
	$('#whitelabel p').css('color', '#222222');
	
	$('#emailmarketing').css('background-color', 'white');   
	$('#emailmarketing p').css('color', '#222222');  
	
	$('#royaltycalculator').css('background-color', 'white');  
	$('#royaltycalculator p').css('color', '#222222');
	
	$('#customizationtools').css('background-color', 'white');
	$('#customizationtools p').css('color', '#222222');
	
	$('#goalsetting').css('background-color', 'white'); 
   $('#goalsetting p').css('color', '#222222'); 	
    
	$('#custominvoicing').css('background-color', 'white'); 
	$('#custominvoicing p').css('color', '#222222'); 
    
	$('#leadtracking').css('background-color', 'white');
	$('#leadtracking p').css('color', '#222222');
    
	$('#brandcontrol').css('background-color', 'white');  
    $('#brandcontrol p').css('color', '#222222');	
    
	
	$('.franchisehubtv').css('display', 'flex'); 
	$('.cloudbasedtextipad').css('display', 'none');
	$('.business-analytics').css('display',...