JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!--Jquery CDN-->
    <link rel="stylesheet" href="css/style2.css"/>
    <title>Javascript Demo</title><!--Title of the page usually appears on tab-->
  </head>
  <body>
      <img class="fade" src="https://i.imgur.com/6WrnLjg.jpg" height="100">
      <img class="fade" src="https://i.imgur.com/BEzTVoj.jpg" height="100">
      <img class="fade" src="https://i.imgur.com/ihSqFXz.png" height="100">
      <img class="slide" src="https://i.imgur.com/aWmKefJ.jpg" height="100">
      <img class="slide" src="https://i.imgur.com/CA54uGd.jpg" height="100">
      <img class="slide" src="https://i.imgur.com/Z9dJKqw.jpg" height="100">
      <div class="test">Click me!</div>
      <BR><BR>
      <button id="clickable">Click to Fade</button>
      <button class="clickable2">Click to Fade</button><BR>
      Click this box and press some keys and scroll! Try pressing "d" and "u" first
      <div id="play"></div>
  </body>
  <script src="js/script.js"></script>
</html>

CSS

.test {
    color: #000;
    padding: .5em;
    width: 50%;
  }
.inside {
  background-color: black;
  color: white;
}
.active {
  color: #900;
}

JavaScript

var button = document.getElementById("clickable");

$("#clickable").click(function() {
  $(".fade").fadeToggle("slow", "linear");
});

$(document).keyup(function(event) {
  if(event.keyCode == 68 || event.keyCode == 117) //Play around with your keys to see what keys activate the slide
    $(".slide").slideUp("slow");
  if(event.keyCode == 85 || event.keyCode == 100)
    $(".slide").slideDown("slow");
});

$(document).keypress(function(event) {
  document.getElementById("play").innerHTML += "<BR>You have pressed key "+ event.key;
});

//Recommended way
$(".clickable2").on( "click" ,function() {
  $(".fade").fadeToggle("slow", "linear");
});

$( "div.test" ).on({
  click: function() {
    $( this ).toggleClass( "active" );
  }, mouseenter: function() {
    $( this ).addClass( "inside" );
  }, mouseleave: function() {
    $( this ).removeClass( "inside" );
  }
});