JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="container">
  <div class="item primero">Primero</div>
  <div class="item segundo">Segundo</div>
  <div class="item tercero">Tercero</div>
</div>
<div class="primeroActivo">Primero Activo</div>
<div class="segundoActivo">Segundo Activo</div>
<div class="terceroActivo">Tercero Activo</div>

CSS

.item {
  padding: 1em;
  color: white;
  cursor: pointer;
  background: tomato;
  border-bottom: 1px solid white;
}

.item.active {
  background: purple;
}

.primeroActivo,
.segundoActivo,
.terceroActivo{
  width: 100%;
  color: white;
  background: red;
  padding: 1em;
  display: none;
  border-bottom: 1px solid white;
}
.primeroActivo.active,
.segundoActivo.active,
.terceroActivo.active{
  display: block;
}

JavaScript

$(document).ready(function(){

var data = [$('.primero'), $('.segundo'), $('.tercero')],
    elements = [$('.primeroActivo'), $('.segundoActivo'), $('.terceroActivo')];

$(document).mouseup(function (e) {
  data.forEach(function(item,index){
    (!item.is(e.target) && item.has(e.target).length === 0) ?
     elements[index].removeClass('active'): '';
  });
});
 
function setActive(num) {
  elements.forEach(function(elm,index){
  	if(index === num){
  	   (elm.hasClass('active')) ? elm.removeClass('active'):elm.addClass('active');
    } else {
    	 elm.removeClass('active');
    }
  });
}

$('.primero').on('click',function(){setActive(0);});
$('.segundo').on('click',function(){setActive(1);});
$('.tercero').on('click',function(){setActive(2);});
  
});