JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div>asdf <br>asdf <br>asdf <br>asdf <br>asdf <br>asdf <br>asdf <br>asdf <br>asdf <br>asdf <br></div>
<div class="fContainer whiteBackground customizeBox">

  <div class="fItem h5">I am looking for</div>
  <div class="fItem h5 blueText centerText">
    <div class="trainDisplayed"><span id="nameOfTraining">AWS Training</span></div>
    <div class="trainChanger whiteBackground">
      <div class="trainingSelectedContainer">
        <div class="trainingSelected" id="selectAWS">AWS Training</div>
        <div class="trainingSelected" id="selectAzure">Azure Training</div>
        <div class="trainingSelected" id="selectServiceNow">ServiceNow Training</div>
        <div class="trainingSelected" id="selectRedHat">RedHat Training</div>
        <div class="trainingSelected" id="selectOracle">Oracle Training</div>
      </div>
    </div>
  </div>
  <div class="fItem"><button class="solid centerButton" id="trainingButtonGo">Go!</button></div>
</div>

CSS

/* ------------------------------------ fix sn */

.container-fluid .col-xs-1,
.container-fluid .col-sm-1,
.container-fluid .col-md-1,
.container-fluid .col-lg-1,
.container-fluid .col-xs-1,
.container-fluid .col-sm-1,
.container-fluid .col-md-1,
.container-fluid .col-lg-1,
.container-fluid .col-xs-2,
.container-fluid .col-sm-2,
.container-fluid .col-md-2,
.container-fluid .col-lg-2,
.container-fluid .col-xs-3,
.container-fluid .col-sm-3,
.container-fluid .col-md-3,
.container-fluid .col-lg-3,
.container-fluid .col-xs-4,
.container-fluid .col-sm-4,
.container-fluid .col-md-4,
.container-fluid .col-lg-4,
.container-fluid .col-xs-5,
.container-fluid .col-sm-5,
.container-fluid .col-md-5,
.container-fluid .col-lg-5,
.container-fluid .col-xs-6,
.container-fluid .col-sm-6,
.container-fluid .col-md-6,
.container-fluid .col-lg-6,
.container-fluid .col-xs-7,
.container-fluid .col-sm-7,
.container-fluid .col-md-7,
.container-fluid .col-lg-7,
.container-fluid .col-xs-8,
.container-fluid .col-sm-8,
.container-fluid .col-md-8,
.container-fluid .col-lg-8,
.container-fluid .col-xs-9,
.container-fluid .col-sm-9,
.container-fluid .col-md-9,
.container-fluid .col-lg-9,
.container-fluid .col-xs-10,
.container-fluid .col-sm-10,
.container-fluid .col-md-10,
.container-fluid .col-lg-10,
.container-fluid .col-xs-11,
.container-fluid .col-sm-11,
.container-fluid .col-md-11,
.container-fluid .col-lg-11,
.container-fluid .col-xs-12,
.container-fluid .col-sm-12,
.container-fluid .col-md-12,
.container-fluid .col-lg-12 {
    padding-left: 0;
    padding-right: 0;
}


a {cursor: pointer; color: #3775D8;}
a:active {opacity: .8;}

a.lightgreyText.hoverUnderline:hover {
    text-decoration: underline !important;
    text-decoration-color: white !important;
}

.cursorPointer {
	cursor: pointer;
}
/* ----------------------------------- page spacing */
.break5 {display: block; height: 5px;}
.break10 {display: block; height: 10px;}
.break15 {display: block; height: 15px;}
.break20 {display: block;...

JavaScript

$("#nameOfTraining").html("AWS Training");
$("#trainingButtonGo").click(function() {
  window.location.href = '#aws';
})

$(".trainDisplayed").click(function(){
  $(".trainChanger").addClass("trainChangerOpen");
});
$(".trainingSelected").click(function(){
  $(".trainChanger").removeClass("trainChangerOpen");
});

$(".trainDisplayed").click(function() {
  $("#nameOfTraining").html("AWS Training");
  $("#trainingButtonGo").click(function() {
    window.location.href = '#AWS';
  })
});
$("#selectAzure").click(function() {
  $("#nameOfTraining").html("Azure Training");
  $("#trainingButtonGo").click(function() {
    window.location.href = '#Azure';
  })
});
$("#selectServiceNow").click(function() {
  $("#nameOfTraining").html("ServiceNow Training");
  $("#trainingButtonGo").click(function() {
    window.location.href = '#ServiceNow';
  })
});
$("#selectRedHat").click(function() {
  $("#nameOfTraining").html("RedHat Training");
  $("#trainingButtonGo").click(function() {
    window.location.href = '#RedHat';
  })
});
$("#selectOracle").click(function() {
  $("#nameOfTraining").html("Oracle Training");
  $("#trainingButtonGo").click(function() {
    window.location.href = '#Oracle';
  })
});