JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="sectionContainer showA"> 
<div class="break40"></div>
  <section class="section sectionTop">
    <div class="fContainer">
      <div class="fItem"></div>
      <div id="displayA" class="fItem x33 blueBackground centerText lightergreyText styleTopButtons pointer"><span class="h2">A</span></div>
      <div id="displayB" class="fItem x33 redBackground centerText lightergreyText styleTopButtons pointer selectedLetter"><span class="h2">B</span></div>
      <div id="displayC" class="fItem x33 blueBackground centerText lightergreyText styleTopButtons pointer"><span class="h2">C</span></div>
      <div class="fItem"></div>
    </div>       
  </section>
  <div class="break40"></div>
  <section class="section section1 sectionA hide">section1 sectionA</section>
  <section class="section section1 sectionB hide">section1 sectionB</section>
  <section class="section section1 sectionC hide">section1 sectionC</section>
  <div class="break40"></div>
  <section class="section section2 sectionA hide">section2 sectionA</section>
  <section class="section section2 sectionB hide">section2 sectionB</section>
  <section class="section section2 sectionC hide">section2 sectionC</section>
  <div class="break40"></div>
  <section class="section section3 sectionA hide">section3 sectionA</section>
  <section class="section section3 sectionB hide">section3 sectionB</section>
  <section class="section section3 sectionC hide">section3 sectionC</section>
  <div class="break40"></div>
  <section class="section section4 sectionA hide">section4 sectionA</section>
  <section class="section section4 sectionB hide">section4 sectionB</section>
  <section class="section section4 sectionC hide">section4 sectionC</section>
  <div class="break40"></div>
  <section class="section section5 sectionA hide">section5 sectionA</section>
  <section class="section section5 sectionB hide">section5 sectionB</section>
  <section class="section section5 sectionC hide">section5 sectionC</section>
  <div...

CSS

body {margin:0}
.sectionA {background: green;}
.sectionB {background: blue;}
.sectionC {background: red;}
.section {opacity: 0.6}
.hide {
  display: none;
}
.sectionTop {
  height: 350px;
}
.styleTopButtons {
  height: 330px;
  line-height: 330px;
  transition: 0.2s;
  margin-top: 40px;
}
.styleTopButtons::after {
    content: '';
    position: absolute;
    display: block;
    background: #ffffff;
    width: 60px;
    height: 60px;
    margin-top: 16px;
    margin-left: calc(16% - 30px);
    transform: rotate(45deg);
    transition: 0.2s;
}
.selectedLetter, .hoverLetter {
  height: 340px;
  line-height: 340px;
  margin-top: 40px;
}
.selectedLetter::after, .hoverLetter::after {
    margin-top: -10px;
}

/* --------------------------------------------------------- bootstrap */

.break5 {display: block; height: 5px;}
.break10 {display: block; height: 10px;}
.break20 {display: block; height: 20px;}
.break40 {display: block; height: 40px;}
.break60 {display: block; height: 60px;}

.shift4 {padding-left: 4px;}
.shift8 {padding-left: 8px;}
.shift12 {padding-left: 12px;}
.shift16 {padding-left: 16px;}

.pointer {
  cursor: pointer;
}
.fContainer {
    padding: 0;
    margin: 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: flex-start;
}
.fItem {
    padding: 5px;
    margin: 0;
    align-self: center;
    align-items: flex-start;
}

.center {
    justify-content: center;
    align-items: center;
    margin: auto;
}

.centerText {
    text-align: center;
}

.centerButton {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    text-align: center;
}

.y100 {height: 100%;}
.y80 {height: 80%;}
.y75 {height: 75%;}
.y50 {height: 50%;}
.y33 {height: 33.3%;}
.y25 {height: 25%;}
.y20 {height: 20%;}
.y17 {height: 16.6%;}
.y10 {height: 10%;}

.x100 {width: calc(100% - 20px);}
.x90 {width: calc(90% - 20px);}
.x80 {width: calc(80% - 20px);}
.x75 {width: calc(75% - 20px);}
.x70 {width: calc(70%...

JavaScript

$( document ).ready(function() {
//start

$( ".sectionB" ).show(); //show A on page load

$('.styleTopButtons').hover(
       function(){ $(this).addClass('hoverLetter') },
       function(){ $(this).removeClass('hoverLetter') }
)
$( "#displayA" ).click(function() {
	$( this ).addClass( "selectedLetter" );
  $( "#displayB, #displayC" ).removeClass( "selectedLetter" );
  $( ".sectionA, .sectionB, .sectionC" ).stop();
  $( ".sectionB, .sectionC" ).delay(500).slideUp( "fast", function() {});
  $( ".sectionA" ).delay(500).slideDown( "fast", function() {});
});
$( "#displayB" ).click(function() {
	$( this ).addClass( "selectedLetter" );
  $( "#displayA, #displayC" ).removeClass( "selectedLetter" );
  $( ".sectionA, .sectionB, .sectionC" ).stop();
  $( ".sectionA, .sectionC" ).delay(500).slideUp( "fast", function() {});
  $( ".sectionB" ).delay(500).slideDown( "fast", function() {});
});
$( "#displayC" ).click(function() {
  $( this ).addClass( "selectedLetter" );
  $( "#displayA, #displayB" ).removeClass( "selectedLetter" );
  $( ".sectionA, .sectionB, .sectionC" ).stop();
  $( ".sectionA, .sectionB" ).delay(500).slideUp( "fast", function() {});
  $( ".sectionC" ).delay(500).slideDown( "fast", function() {});
});


//end
});