JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Testing</title>
    <link rel="stylesheet" href="sample.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="script/myscript.js"></script>
	    
</head>

<body>

<div class="product-all-contents">
<div class="product-contents">
   <div class="product" id="franchisehub">
      
	  <p style=" font-size: 15px; font-family: 'Roboto'; margin-left: 7%; margin-right: 7%; line-height: 1.2; margin-top: 20%;
         color: rgb(58, 59, 60);">ABC</p>
   </div>
   
   <div class="product" id="cloudbasedmobile" style="background-color:#81bf44;">
      
	  <p  style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2; margin-top: 27%;
         color:white;">XYZ</p>
   </div>
   
</div>
</div>
<div class="arrow-down"></div>
<div class="franchisehubtv" style="display:none;">
   <div class="franchise-hub-text">
      <h6 style="color:black;font-family:'Roboto';font-weight:normal;">ABC</h6>
      <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">HELLO WORLD</p>
      <div class="product-quotes">
	  <p> I AM GOOD
	  </p>
	  <a href="https://thebettersoftwarecompany.com/franchise-management-hub/" style="float:right;">Learn More</a>
	  </div>
   </div>
   <div class="tvs">
      <div class="tv">
         <img src="https://s15.postimg.cc/wh8pm7897/apple.jpg" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
      </div>
      
   </div>
</div>

<div class="cloudbasedtextipad" style="display:flex;">
   <div class="cloud-based-text">
     <h6 style="color:black;font-family:'Roboto';font-weight:normal;">XYZ</h6>
      <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">HELLO WORLD</p>
      <div class="product-quotes">
	 <p>I AM GOOD </p>
	  <a...

CSS

.product-all-contents{
	background-color: #f0f0f0;
    width: 70%;
    margin: auto;
}

.product-contents {
  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
}

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

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


.franchise-hub-text, .cloud-based-text, .business-analytics-text, .tech-support-text, .order-management-text, .employee-management-text, .white-label-text,
.brand-label-text, .lead-tracking-text, .custom-invoicing-text, .goal-setting-text, .customization-tools-text, .royalty-calculator-text, .email-marketing-text
 {
  width: 50%;
}
div.goal-setting, div.customization-tools, div.custom-invoicing, div.lead-tracking, div.email-marketing, div.royalty-calculator, div.brand-control,
div.franchisehubtv, div.cloudbasedtextipad, div.business-analytics,div.tech-support, div.employee-management, div.order-management, div.white-label  {
  display: flex;
  margin-left: 15%;
  margin-right: 15%;
  align-items: center;
  background-color: #f0f0f0;
  padding: 2%;
  margin-bottom: 5%;
}

.product-quotes
{
  display: block;	
  padding: 20px 11px;
  width: 90%;
  color:#3b3b3d;
  background: white;
  border-radius: 2px;
  line-height: 1.625;
  font-family: 'Roboto'; 
  font-weight: normal;"
}

.arrow-down {
  width: 0; 
  height: 0;
  margin: auto;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-top: 40px solid #f0f0f0;
}

.white
{
	display: none;
}

@media only screen and (max-width: 767px)
{
.product-all-contents
{
   overflow-x:...

JavaScript

(function($) { // IIFE to enable `$` as jQuery
  $(function() { // document ready

    $("#franchisehub").click(function() {
      if ($('.franchisehubtv').css('display') == "flex") {
        $('.arrow-down').css('display', 'none');
        $('.franchisehubtv').css('display', 'none');
		$('#franchisehub img.black').css('display', 'none');
		$('#franchisehub img.white').css('display', 'inline-block');
       
      } else {
        resetAll();
        $('#franchisehub').css('background-color', '#81bf44');
        $('#franchisehub p').css('color', 'white');
        $('.franchisehubtv').css('display', 'flex');
		$('#franchisehub img.black').css('display', 'none');
		$('#franchisehub img.white').css('display', 'inline-block');
		
      }

    });
	
    $("#cloudbasedmobile").click(function() {

      if ($('.cloudbasedtextipad').css('display') == "flex") {
        $('.cloudbasedtextipad').css('display', 'none');
        $('.arrow-down').css('display', 'none');
	$('#cloudbasedmobile img.white').css('display', 'inline-block');
		$('#cloudbasedmobile img.black').css('display', 'none');
      } else {
        resetAll();
        $('#cloudbasedmobile').css('background-color', '#81bf44');
        $('#cloudbasedmobile p').css('color', 'white');
        $('.cloudbasedtextipad').css('display', 'flex');
		$('#cloudbasedmobile img.white').css('display', 'inline-block');
		$('#cloudbasedmobile img.black').css('display', 'none');
		
      }
    });
	


    function resetAll() {

      $('#franchisehub').css('background-color', 'white');
      $('#franchisehub p').css('color', '#222222');
	  $('#franchisehub img.black').css('display', 'inline-block');
	  $('#franchisehub img.white').css('display', 'none');

      $('#cloudbasedmobile').css('background-color', 'white');
      $('#cloudbasedmobile p').css('color', '#222222');
	  $('#cloudbasedmobile img.black').css('display', 'inline-block');
	  $('#cloudbasedmobile img.white').css('display', 'none');

   

     ...