JSFiddle - React, Tailwind, and code Playground

by Bertrand Martel

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="loader-wrapper">
  <div id="loader"><img src="./Assets/Images/film-roll.svg" alt="test"></div>
  <div class="loader-section section-left"></div>
  <div class="loader-section section-right"></div>
</div>
<header>
  <div id="shadowSource"></div>
  <a href="index.php"><img id="HeaderLogo" src="./Assets/Images/Logos/3bLogo.svg" alt="3B Solutions Logo"></a>
  <div class="video-box">
    <div id="videoPlayer" class="videoPlayer"></div>
  </div>
  <!--<img id="volume" src="./Assets/Images/DevAssets/Video/Speaker_Icon.svg" alt="Mute icon">-->
  <h3><a id="hireUsLink" href="#contact">Contact Us!</a></h3>
  <img id="goDownArrow" src="./Assets/Images/DevAssets/arrow-215-256.png" alt="Arrow down icon">
</header>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
      <div class="centeredNav">
        <ul class="nav navbar-nav">
          <li><a href="index.php">Home</a></li>
          <li><a href="video.php">Video Services</a></li>
          <li><a href="web.php">Web Services</a></li>
          <li id="dropdownLink1" class="dropdown">
            <a href="localFocus.php" class="dropdown-toggle"...

CSS

.category-button:hover {
  background-color: #104e8b;
  color: #fff;
  margin: 0 0 40px 0;
  transition: ease 0.3s;
}

.inside-category {
  background-color: #fff;
  border: solid 2px rgba(0, 0, 0, .1);
  width: 100%;
}

.sub-title {
  font-size: 18px;
  text-transform: uppercase;
  color: #96989b;
  text-align: center;
}

.category-title {
  font-size: 18px;
  padding: 15px 0;
  text-align: center;
  text-transform: uppercase;
  color: #343434;
}

.category-shape {
  padding: 10px;
}

div#dropdownVideoPicker {
  img {
    width: 100%;
    display: block;
    cursor: pointer;
  }
}

JavaScript

$("section#inVideoPage a").on('click', function(e) {
  e.preventDefault();
});

function generatePageCode(linkId, title) {
  var longCode = '' +
    '<div class="col-md-3 col-sm-4 col-xs-12 category-shape">' +
    '<div class="inside-category col-md-4 col-sm-6 col-xs-12">' +
    '<div class="col-md-12 text-center">' +
    '<img data-toggle="modal" data-target="#videoModal" class="videoThumbnail" src="https://img.youtube.com/vi/' + linkId + '/0.jpg" alt="placeholder">' +
    '<br>' +
    '<div>' + title + '</div>' + //Video title
    '</div>' +
    '</div>' +
    '</div>';
  return longCode;
}
var isFirstPass = true;

//===============================================================   CHANGE VIDEOS HERE  ===============================================================\\
$('.category-shape').on('click', function() {
  var commercial = ["bJGzgTYU97Y", 'EnTwgvBJ4lk', 'KDM-4xAg34s', 'o3H8Nj1gLHw', '8wKfUKZ6NIk', 'B5g9nAFSdhM', 'MHTpVP1DlSQ', 'eaiGUVNZmD8', '1FSB0cAvdjg', '7sZUZePLR-c', 'qwRB6fobVEo', 'vZQlEDOo1mc'];
  var documentary = ["siAPGGuvPxA", 'i6Hgldw1yS0', 'Omg1gMNtVpY', 'MfWHPnxrDI4', 'aT0HduxW8KY'];
  var medical = ["T2d0AQuZXJo", 'QFLTWnccYZQ', 'LlG-IuUSkYY', 'rgYeGduoGvo', 'mJ3LtDjw2mU', 'rzmdDU40ws0', 'z4zUDaW3pQc', 'hem0kySjYAU'];
  var selfPromotion = ['TPKN4D_wZ1U', '_ycIdpbqGCc', 'pGaHXpCWCyQ', 'bk8leJDzvTA', 'C8Ac1Qqc-J4', 'VkRO1JdHTP0', 'tAZhD5P9MD4', 'CuHLrquuQno'];
  var animation = ["YfPriLrbyCU", 'gmM5o-x_LGI', '8xpe8SZ7-2Q', 'foNU8cPCaws', '5NfQKqini6M'];
  var liveEvents = ['4o01J68gkVw', 'uMXk80umgYU', '39kJi1ruGSQ'];

  var $channelName = $(this).find('h2').text();
  switch ($channelName) {
    case "Commercial ":
      showVideos(commercial);
      break;
    case "Documentary ":
      showVideos(documentary);
      break;
    case "Medical ":
      showVideos(medical);
      break;
    case "Self Promotion ":
      showVideos(selfPromotion);
      break;
    case "Animation ":
      showVideos(animation);
      break;
    case "Live...