JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="pageContainer">
  <div class="bodyContainer">
  <section class="top padding50 center"> I am: 
    <span class="persona1trigger blue">a CPI Lead / Project Manager</span>
    <span class="persona2trigger hide blue">just looking for general information about CPI</span>
    <span class="persona3trigger hide blue">PEO CPI Staff</span>
  </section>
    <section class="band band1 persona1">
      Charter and Benefits Workbook links, screenshots, and explanation go here
    </section>
    <section class="band band1 persona2">
      Policies and training material go here 
    </section>
    <section class="band band1 persona3">
      Working and Data files go here
    </section>
     <section class="band band2 persona1">
       Tools and Templates horizontal scroll go here
     </section>
    <section class="band band2 persona2">
      more Training material goes here 
    </section>
    <section class="band band2 persona3">
      Working file folders and status files go here
    </section>
     <section class="band band3 persona1">
        Dashboard reported metrics and Training schedules
     </section>
    <section class="band band3 persona2">
      
    </section>
    <section class="band band3 persona3">
      Access to the CPI tracker and Dashboard goes here
    </section>
    <section class="band bottom">
      footer stuff
    </section>

</div>
</div>

CSS

.hide {
  display: none;
}
.padding50 {
  padding: 50px;
}
.top.center {
  margin-left: calc(50% - 200px);
}
.blue {
  color: blue;
   cursor: pointer;
   font-weight: bold;
}
.personaChanger{
  cursor: pointer;
}
.band {
  width: 80%;
  padding: 40px 10%;
}
.band {
  border: 1px solid white;
  box-shadow: inset 0 0 10px #bbb;
}

JavaScript

$('.persona2').hide();
  $('.persona2trigger').hide();
  $('.persona3').hide();
  $('.persona3trigger').hide();

$( ".persona1trigger" ).click(function() {
  $('.persona1').hide();
  $('.persona2').show();
  $('.persona3').hide();
  $('.persona1trigger').hide();
  $('.persona2trigger').show();
  $('.persona3trigger').hide();
});
$( ".persona2trigger" ).click(function() {
  $('.persona1').hide();
  $('.persona2').hide();
  $('.persona3').show();
  $('.persona1trigger').hide();
  $('.persona2trigger').hide();
  $('.persona3trigger').show();
});
$( ".persona3trigger" ).click(function() {
  $('.persona1').show();
  $('.persona2').hide();
  $('.persona3').hide();
  $('.persona1trigger').show();
  $('.persona2trigger').hide();
  $('.persona3trigger').hide();
});