JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://scripterlative.com/files/cursordivscroll.js"></script>
<div id="repertoiredetails">
 <p>place</p>
 <p>your</p>
 <p>mouse hover</p>
 <p>over here!!!</p>
 <p>and this</p>
 <p>will</p>
 <p>appear</p>
     <p>place</p>
 <p>your</p>
 <p>mouse hover</p>
 <p>over here!!!</p>
 <p>and this</p>
 <p>will</p>
 <p>appear</p>
     <p>place</p>
 <p>your</p>
 <p>mouse hover</p>
 <p>over here!!!</p>
 <p>and this</p>
 <p>will</p>
 <p>appear</p>
 </div>

<div id="repertoiredetails">
 <p>place</p>
 <p>your</p>
 <p>mouse hover</p>
 <p>over here!!!</p>
 <p>and this</p>
 <p>will</p>
 <p>appear</p>
     <p>place</p>
 <p>your</p>
 <p>mouse hover</p>
 <p>over here!!!</p>
 <p>and this</p>
 <p>will</p>
 <p>appear</p>
     <p>place</p>
 <p>your</p>
 <p>mouse hover</p>
 <p>over here!!!</p>
 <p>and this</p>
 <p>will</p>
 <p>appear</p>
 </div>

<div id="repertoiredetails">
 <p>place</p>
 <p>your</p>
 <p>mouse hover</p>
 <p>over here!!!</p>
 <p>and this</p>
 <p>will</p>
 <p>appear</p>
     <p>place</p>
 <p>your</p>
 <p>mouse hover</p>
 <p>over here!!!</p>
 <p>and this</p>
 <p>will</p>
 <p>appear</p>
     <p>place</p>
 <p>your</p>
 <p>mouse hover</p>
 <p>over here!!!</p>
 <p>and this</p>
 <p>will</p>
 <p>appear</p>
 </div>

CSS

#repertoiredetails {
background-color:#000;
width:400px;
opacity:0.7; filter:alpha(opacity=70);
    margin-top:140px;
float:left;
height:400px;    
    /*display:none;*/
    margin-left:-2px;
    padding-top:5px;
    border-radius:5px;
    -moz-border-radius:5px; /* Firefox 3.6 and earlier */
    z-index:999;
    overflow:hidden;
 }

 #repertoiredetails {
cursor: url(../images/arrow.png), auto;
    position:relative;

 }

 #repertoiredetails p {
  text-align:justify;
  text-justify:inter-word; 
  color:#999; 
  font-family:'Arial Narrow', Arial, sans-serif;
  font-size:13px;
  width:auto;
  padding:20px;
 }

JavaScript

$(document).ready(function() {
    CursorDivScroll('repertoiredetails', 200, 20).noHorizontal();
});