JSFiddle - React, Tailwind, and code Playground

by Kirubel Girma

HTML

<div id="source-container">
  <div id="source-region" class="textzone">
      <p><span class="activity-title">Interacting with the nature</span></p>
      <p>blablabla</p>
    </div>
<div id="source-oursource" class="textzone">
<p><span class="activity-title">Pure, pristine, and sustainable source</span></p>
<p>blablabla</p></div>
    <div class="source-title-box"><span class="activity-title"><a href="javascript:void(0);" data-region="source-region">Our region</a></span></div>
    <div class="source-title-box"><span class="activity-title"><a href="javascript:void(0);" data-region="source-oursource">Our source</a></span></div>
</div>

CSS

#source-container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.source-title-box {
    color: #000;
    background: #fff;
    padding: 15px;
    width: 200px;
    position: relative;
    margin-top:10px;
    border: 1px dotted #666;
}
#source-region, #source-oursource {
    font:12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight:400;
    text-align:justify;
    background: #fff;
    color: #000;
    padding:15px 20px 20px 20px;
    display:block;
    width: 490px;
    float: right;
    position: relative;
    border: 1px dotted #666;
}
#source-region, #source-oursource p{
    margin-top:4px;
    
}
#source-oursource {
    display:none;
}

.source-title-box a{
    color:#467FD9;
    display:block;
    text-decoration:none;    
}
.source-title-box a:hover{
    background-color:#467FD9;
    color:#FFFFFF;
}

JavaScript

$('.activity-title a').click(function(){
  $('.textzone').fadeOut(0);
  var region = $(this).attr('data-region');    
  $('#' + region).fadeIn(400);
})