JSFiddle - React, Tailwind, and code Playground

by lopac1029

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Players Handbook</title>
    <meta name="viewport"
        content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">

</head>
<body id="index" class="d-flex vh-100 vw-100 bg-light" style="padding-top: 56px">
    <nav class="navbar fixed-top navbar-dark bg-dark">
        <a class="navbar-brand" href="">
            <span>Placeholder</span>
        </a>
        <a class="d-md-none d-inline-block" data-toggle="collapse" data-target="#sideNav" aria-hidden="true"
            aria-expanded="false" aria-controls="sideNav" href="#">
            <i class="fas fa-bars">
            </i>
        </a>
    </nav>
    <nav id="sideNav"
        class="collapse width show overflow-auto h-100 nav navbar-nav navbar-dark bg-dark col-sm-8 col-md-3 flex-column p-0"
        role="navigation">
        <a class="navbar-brand d-md-none pt-3 pb-2 d-inline-block">
            <span>&nbsp;</span>
        </a>
        <a href="#id8de1faf6-5265-4d48-8ee6-4a2203403e39" class="px-3 py-3 nav-link btn-dark"
            data-target="#id8de1faf6-5265-4d48-8ee6-4a2203403e39">
            <span>Races</span>
        </a>
        <a href="#id97e03a60-77d2-4333-947c-a871b601a96c" class="px-3 py-3 nav-link btn-dark"
            data-target="#id97e03a60-77d2-4333-947c-a871b601a96c">
            <span>Classes</span>
        </a>
        <a href="#idcebbe189-320a-4de2-b8c4-6c6f9693183e" class="px-3 py-3 nav-link btn-dark"
            data-target="#idcebbe189-320a-4de2-b8c4-6c6f9693183e">
           ...

CSS

body h1 {
  font-size: 1.4em;
}
body h2,
body h3,
body h4 {
  font-size: 1em;
}
body h1,
body h2,
body h3,
body h4 {
  line-height: 1.4;
}
#sideNav {
  z-index: 1000;
  top: 0;
  -webkit-transition-property: max-width, min-width, width, flex, visibility;
  transition-property: max-width, min-width, width, flex, visibility;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}
.collapse.width.show {
  visibility: visible;
}
.collapsing.width {
  visibility: visible;
  width: 0%;
  flex: 0%;
  -webkit-transition-property: max-width, min-width, width, flex, visibility;
  transition-property: max-width, min-width, width, flex, visibility;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}

#view {
  position: relative;
}
/* HTML ELEMENT */
div.element-html h1,
div.element-html h2,
div.element-html h3 {
  color: #197278;
  font-weight: 600;
}
div.element-html ul {
  list-style: none;
}
div.element-html ul li {
  text-indent: -20px;
  margin-bottom: 3px;
}
div.element-html ul li:before {
  content: "■ ";
  margin-right: 3px;
  color: #BE1128;
}
/* GROUP COLLAPSE */
div.element-group > div.card.card-header {
  background-color: #197278;
  color: #ffffff;
}
div.element-group > div.card.card-header button {
  color: #ffffff;
  text-transform: uppercase;
}
div.element-group > div.card.card-header button:before {
  float: right !important;
  content: "\2212";
  padding: 0px 4px;
  margin-top: -1px;
  border: 1px solid #ffffff;
  background-color: #ffffff;
  color: #197278;
  margin-left: 15px;
}
div.element-group > div.card.card-header button.collapsed:before {
  float: right !important;
  content: "\002b";
  padding: 0px 4px;
  margin-top: -1px;
  border: 1px solid #ffffff;
  background-color: transparent;
  color: white;
  margin-left: 15px;
}
/* PANEL CARD */
div.element-panel div.card div.card-header {
  background-color: #f16536;
  color: #FFFFFF;
}
div.element-panel div.card div.card-body {
 ...

JavaScript

(function () {
    'use strict';
    var breakpoint = 767.98; // md bs4 breakpoint size
    function sidebarRelativePosition() {
        // Change relative positioning of the sidebar nav based on the window width
        if ($(window).width() <= breakpoint) { // collapsable
            $('#sideNav').addClass('position-absolute').removeClass('show');
        } else { // static
            $('#sideNav').removeClass('position-absolute').addClass('show');
        }
    }
    var scrollSpyOpts = {
        target: '#sideNav',
        offset: 50
    };
    
    $(window).on('resize', sidebarRelativePosition);
    $('a.nav-link').click(function () {
        if ($(window).width() <= breakpoint) {
            // programmacially close the sidebar when small screen
            $('#sideNav').collapse('hide');
        }
    });

    $('#view').scrollspy(scrollSpyOpts);
    $(document).ready(function () {
        setTimeout(function(){
            $('#view').scrollspy(scrollSpyOpts);
        }, 1000);
        sidebarRelativePosition();

        var videos = document.querySelectorAll('video');
        function pauseAll(elem) {
            for (var i = videos.length - 1; i >= 0; i--) {
                if (videos[i] === elem) {
                    continue;
                }
                if (!videos[i].paused && videos[i].played.length > 0) {
                    videos[i].pause();
                }
            }
        }
        for (var i = videos.length - 1; i >= 0; i--) {
            videos[i].addEventListener('play', pauseAll(this), true);
        }
    });
})();