JSFiddle - React, Tailwind, and code Playground

by anoopsuda

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<div class="regions">

<div class="Regions_latam " ><p>0</p></div>
<div class="Regions_global " ><p>0</p></div>
<div class="Regions_na " ><p>0</p></div>
<div class="Regions_emea " ><p>0</p></div>
<div class="Regions_atci " ><p>0</p></div>
</div>

<section class="tabData" id="tab1">
<div class="region1">region1</div>
<div class="region1">region1</div>
<div class="region2">region2</div>
</section>

<section class="tabData" id="tab2">
<div class="region4">region4</div>
<div class="region4">region4</div>
<div class="region4">region4</div>
<div class="region2">region2</div>

</section>

<section class="tabData" id="tab3">
<div class="region1">region1</div>
<div class="region1">region1</div>
<div class="region1">region1</div>
<div class="region4">region4</div>

</section>

<section class="tabData" id="tab4">
<div class="region4">region4</div>
<div class="region4">region4</div>
<div class="region1">region1</div>
<div class="region5">region5</div>

</section>

<a class="tab1" href="#">section 1</a>
<a class="tab2" href="#">section 2</a>
<a class="tab3" href="#">section 3</a>
<a class="tab4" href="#">section 4</a>

CSS

.regions > div {padding:10px; display:inline-block; }
.tabData {border:solid 1px Red; margin:8px 0;}
.tabData > div {margin:4px 0;}
.region1 { border-left:solid 5px red;}
.Regions_latam {border:solid 5px red;}


.region2 { border-left:solid 5px blue;}
.Regions_global {border:solid 5px blue;}

.region3 { border-left:solid 5px black;}
.Regions_na { border:solid 5px black;}

.region4 { border-left:solid 5px green;}
.Regions_emea {border:solid 5px green;}

.region5 { border-left:solid 5px yellow;}
.Regions_atci { border:solid 5px yellow;}

JavaScript

function setTextToPTab(ControlName, className, textToSet){
	if(ControlName != undefined && ControlName != null)
		$("#" + ControlName + " p").text(textToSet);
  if(className != undefined && className != null)
		$("."+ className +" p").text(textToSet);
    
}



 
// View Hide Region based Events