JSFiddle - React, Tailwind, and code Playground

HTML

<button type="" id="t1">test</button> 

<p id="t2">test color</p>

<p id="t3">test color</p>

CSS

* {padding: 0;margin: 0;}
body {background-color: #ccc;}
#t1 {width: 100px;height: 50px;margin: 50px; float: left;}
#t2 {width: 100px;height: 50px;color: red;margin: 50px;float: left;}
#t3 {width: 100px;height: 50px;color: red;margin: 50px;float: left;}
.active-tab{
    visibility:visible;
    transform:none;
}

JavaScript

$(document).ready(function () {
    $("#t1").click(function(){
        $("#t2").addClass('active-tab');
        $("#t3").addClass('active-tab');
    });
});
$(document).click( function(event){
      if( $(event.target).closest("#t1").length ) 
        return;
      $("p").removeClass('active-tab');
      event.stopPropagation();
    });