JSFiddle - React, Tailwind, and code Playground

by Amal Das

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.9/require.min.js"></script>
<b>Load Jquery/CSS file using require js in a "js"</b>

<div class="msg-scroll">
  <p>all of your modules</p>
  <p>all of your modules</p>
  <p>all of your modules</p>
  <p>all of your modules</p>
  <p>all of your modules</p>
  <p>all of your modules</p>
  <p>all of your modules</p>
</div>

CSS

.msg-scroll{
  height:100px;
  margin: 10px;
  padding: 20px 5px 5px 5px;
   border: 1px solid #ccc;
}
body{
  background:#f2f2f2;
}
b{
  font-size:16px;
  color:#F7921E;
  margin-bottom:20px;
}

JavaScript

requirejs.config({
    appDir: ".",
    baseUrl: "js",
    paths: { 
        'jquery': ['//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min', 'libs/jquery-min'],
        'm-scroll': ['//malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min']
    },
    shim: {
        'm-scroll' : ['jquery']
    }
});

require(['jquery', 'm-scroll'], function($) { 

    
    $(".msg-scroll").mCustomScrollbar({
      theme:"dark"
    });
    
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = "http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.css";
    document.getElementsByTagName("head")[0].appendChild(link);
      
});