JSFiddle - React, Tailwind, and code Playground

by Joe Pigott

HTML

<link rel="stylesheet" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css">
<script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<div id="full-page-container">
    <div id="body">
            <a href="http://localhost:8080/HTML/Web-Hangout.html"><h1>Web Hangout</h1></a>
        <div id="menu">
            <a href="http://localhost:8080/HTML/Web-Hangout-Signup.html">Sign Up</a>
            <b> | </b>
            <a href="http://localhost:8080/HTML/Web-Hangout-Login.html">Log In</a>
            <b> | </b>
            <a href="http://localhost:8080/HTML/Web-Hangout-Pac-Man.html">Pac Man</a>
            <b> | </b>
            <a href="http://localhost:8080/HTML/Web-Hangout-Space-Invaders.html">Space Invaders</a>
            <b> | </b>
            <a href="http://localhost:8080/HTML/Web-Hangout-Asteroids.html">Asteroids</a>
            <b> | </b>
            <a href="http://localhost:8080/HTML/Web-Hangout-Centipede.html">Centipede</a>
            <a href="http://localhost:8080/HTML/Web-Hangout-Snake.html">Snake</a>
            <b> | </b>
            <a href="http://localhost:8080/HTML/Web-Hangout-Pong.html">Pong</a>
            <b> | </b>
            <a href="http://localhost:8080/HTML/Web-Hangout-Frogger.html">Frogger</a>
            <b> | </b>
            <a href="http://localhost:8080/HTML/Web-Hangout-MarioBros.html">Mario Bros.</a>
            <b> | </b>
            <a href="http://localhost:8080/HTML/Web-Hangout-DonkeyKong.html">Donkey Kong</a>
            <b> | </b>
            <a href="http://localhost:8080/HTML/Web-Hangout-About.html">About</a>
        </div>
        <p>
          Who Cares???
          Here's some of my favorite songs:
          <br />
          <br />
          Radioactive:
          <br />
          <br />
          Whoa, whoa, whoa
Whoa, whoa, whoa
Whoa, whoa, whoa
Whoa
  
I'm waking up to ash and...

CSS

body {
              text-align: center;
              background-color: lightgreen;
          }
          h1 {
              color: green;
              font-family: cursive;
          }
          a {
              color: #66ff66;
              text-decoration: none;
          }
          a:hover {
              color: greenyellow;
          }
          #menu {
              text-align: center;
              background-color: green;
              border-radius: 5px;
              height: 55px;
              width: 435px;
              margin-left: 133px;
          }
          #body {
              background-color: #66ff66;
              border-radius: 5px;
              width: 700px;
              text-align: center;
              margin-left: 290px;
          }
          p {
              text-align: left;
          }
          #dif {
              color: green;
          }
          #dif:hover {
              color: #2da32d;
          }
          #center {
              text-align: center;
          }
          button {
              background-color: #cccccc;
              border-radius: 5px;
          }
          .class {
              float: right;
          }
          #full-page-container {
              overflow: auto;
          }

JavaScript

$(document).ready(function(){
    $('#full-page-container').jScrollPane({showArrows: true});
});