JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex11/facescroll/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex11/facescroll/facescroll.js"></script>


<div id="leftbox" style="-webkit-box-shadow: 1px 1px 1px #BFBFBF;">
            <div id="contentheader"><b>Team Information</b></div>
        
                
                
                
                <div id="demo1" style="width: 230px;height: 100% auto; max-height: 200px;">
<div id="text">           
Joe Bloggs
<div class="border"></div>
Joe Bloggs
<div class="border"></div>
Joe Bloggs
<div class="border"></div>
Joe Bloggs
<div class="border"></div>
Joe Bloggs
<div class="border"></div>
Joe Bloggs

                 </div>
                </div>
            

</div>

CSS

body {
font-family:Arial, Helvetica , sans-serif;
font-size: 12px;
background-color:#foo;
color:#333;
line-height:1.50;
}

#leftbox {
    margin-left: 50px;
 margin-top: 15px;
    border: 1px solid #BABABA;
    border-top:3px solid #85BC77;
    width: 230px;
    background-color: #foo;
    float: left;


}

#text {
color: #foo;
padding: 15px;
}

.border {
  margin-right:-15px;margin-left:-15px;padding-bottom: 15px; margin-bottom: 15px;  border-bottom: 1px solid #ccc;width: 210px;
}
#contentheader {
    
padding: 5px;
height: 25px;
padding-left: 15px;
padding-top: 10px;
background-color: #E1E1E1;
border-bottom: 1px solid #ccc;
}

JavaScript

jQuery(function() { // on page DOM load
    $('#demo1').alternateScroll();
})