JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="frameContainer backgroundWhite">
  <div class="frame">
    <div class="frameStack frameStack1">
      <div class="filmStrip filmStrip1 pos1"><div class="rightExit">+</div>
        What are you looking for?<br>
        <button class="outline goto_next goto_posA">Cloud or Enterprise IT Service</button>
        <button class="outline goto_next goto_posB">Information on NCCS Resources</button>
        <button class="outline goto_next goto_posC">Support from the Community</button>
        <button class="outline goto_next goto_posD">Info on Teleworking</button>        
      </div>
    </div><!-----------------------------------------------------------------------------------------
 --><div class="frameStack frameStack2">
      <div class="filmStrip filmStrip2 pos2 posA"><div class="rightExit">+</div>
        Do you have a specific solution in mind? no=cloud catalog, y = step3
        <button class="outline resetBlink show_monkeyNext">Yes</button>
        <button class="outline resetBlink show_monkeyCloud">No</button>
        <button class="displayNone solid bottomRightButton goto_next3 goto_posA monkeys monkeyNext">Next</button>
        <button class="displayNone solid bottomRightButton monkeys monkeyCloud">Cloud Catalog Page</button>
      </div>
      <div class="filmStrip filmStrip3 pos2 posB"><div class="rightExit">+</div>
        DO you have a specific resource in mind? no=resources, y = step3b
        <button class="outline resetBlink show_giraffeNext">Yes</button>
        <button class="outline resetBlink show_giraffeResources">No</button>
        <button class="displayNone solid bottomRightButton goto_next3 goto_posB giraffes giraffeNext">Next</button>
        <button class="displayNone solid bottomRightButton giraffes giraffeResources">Resources Page</button>
      </div>
      <div class="filmStrip filmStrip4 pos2 posC"><div class="rightExit">+</div>
        Have you searched the knowledge base? no=knowledge base, y = step3c
        <button...

CSS

button.solid {
    background: linear-gradient(#3775d8, #3775d8);
    padding: 10px 40px;
    min-width: 160px;
    color: white !important;
    font-size: 14px !important;
    font-family: "Roboto", sans-serif !important;
    font-weight: bold !important;
    cursor: pointer;
    border: none;
    border-radius: 3px;
    box-shadow: 6px 6px 15px rgba(40, 40, 80, .2);
    transition: .3s;
    display: block;
}

button.solid:hover {
  background: linear-gradient(#3365b4, #2e548b);
}

button.solid:active {
  border: none;
  animation: buttonPop 0.3s;
  outline: none;
}
button.blueback:visited, button:focus {
  outline: none;
}
button.solid:visited::after {
  content: '\2713';
  position: absolute;
  bottom: 0;
  right: 3px;
  font-size: 8px;
}

button.solid.disabled {
    background: #f7f8fa;
    color: #001B2E !important;
    cursor: not-allowed;
    border: 2px solid #edf2f4;
    box-shadow: none;
    transition: 0.3s;
}
button.solid.disabled:hover {
  border: 2px solid #FDEDEF;
}

button.solid.disabled:active {
  animation: none;
}

button.outline {
    background: white;
    color: #3775d8;
    border: 2px solid #3775d8;
    box-shadow: 6px 6px 15px rgba(40, 40, 80, 0);
    padding: 8px 38px;
    min-width: 156px;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    cursor: pointer;
    border-radius: 3px;
    transition: 0.3s;
    display: block;
}
button.outline:hover {
  box-shadow: 6px 6px 15px rgba(40, 40, 80, 0.2);
}

button.outline:active {
  border: 2px solid #3775d8;
  animation: buttonPop 0.3s;
  outline: none;
}
button.outline:visited, button:focus {
  outline: none;
}
button.outline:visited::after {
  content: '\2713';
  position: absolute;
  bottom: 0;
  right: 2px;
  font-size: 8px;
}

button.outline.greyBorder, button.outline.greyBorder:active {
  border: 2px solid #EDEEF4;
}

  @keyframes buttonPop {
    0%, 50% {
      transform: scale(1);
      box-shadow: 6px 6px 15px rgba(40, 40, 80, 0.2);
    }
  25% {
    ...

JavaScript

$( ".goto_posA" ).click(function() {
  $('.frame').removeClass('blink').addClass('blink').delay( 250 ).animate({'top': '0px'}, 0);
});
$( ".goto_posB" ).click(function() {
	$('.frame').removeClass('blink').addClass('blink').delay( 250 ).animate({'top': '-340px'}, 0);
});
$( ".goto_posC" ).click(function() {
	$('.frame').removeClass('blink').addClass('blink').delay( 250 ).animate({'top': '-680px'}, 0);
});
$( ".goto_posD" ).click(function() {
	$('.frame').removeClass('blink').addClass('blink').delay( 250 ).animate({'top': '-1020px'}, 0);
});
$( ".resetBlink" ).click(function() {
	$('.frame').removeClass('blink');
});

$( ".goto_next" ).click(function() {
	$('.frame').animate({'left' : '-880px'}, 0);
});
$( ".goto_next3" ).click(function() {
	$('.frame').animate({'left' : '-1760px'}, 0);
});
$( ".goto_next4" ).click(function() {
	$('.frame').animate({'left' : '-2640px'}, 0);
});
$( ".goto_next5" ).click(function() {
	$('.frame').animate({'left' : '-3520px'}, 0);
});
$( ".goto_next6" ).click(function() {
	$('.frame').animate({'left' : '-4400px'}, 0);
});
$( ".goto_next7" ).click(function() {
	$('.frame').animate({'left' : '-5280px'}, 0);
});

// ------------------------ monkey
$( ".show_monkeyCloud" ).click(function() {
	$('.monkeys').addClass('displayNone');
  $('.monkeyCloud').removeClass('displayNone');
});
$( ".show_monkeyNext" ).click(function() {
	$('.monkeys').addClass('displayNone');
  $('.monkeyNext').removeClass('displayNone');
});
// ------------------------ giraffe
$( ".show_giraffeResources" ).click(function() {
	$('.giraffes').addClass('displayNone');
  $('.giraffeResources').removeClass('displayNone');
});
$( ".show_giraffeNext" ).click(function() {
	$('.giraffes').addClass('displayNone');
  $('.giraffeNext').removeClass('displayNone');
});
// ------------------------  penguin
$( ".show_penguinKnowledge" ).click(function() {
	$('.penguins').addClass('displayNone');
  $('.penguinKnowledge').removeClass('displayNone');
});
$( ".show_penguinNext"...