JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://design7.naonsoft.com/resources/mobile/lib/iscroll/iscroll.js"></script>

<script type="text/javascript">
// iScroll
function loaded() {
	
  
var myScroll1 = new IScroll('#firstScrollWrap', { mouseWheel: true, click: true, scrollbars:true, fadeScrollbars:true, bounce:false });

var myScroll1 = new IScroll('#secondScrollWrap', { mouseWheel: true, click: true, scrollbars:true, fadeScrollbars:true, bounce:false });
  
		
};
document.addEventListener('DOMContentLoaded', loaded, false);
//iScroll Ends


</script>



<ul class="iScrollHldr clearfix">
	<li>
		<div class="iScrollLinks">
			<a class="firstPop">Open overlap scroll</a>
			
			<!-- Overlap First Starts -->
			<div class="overlapScroll">
				<div class="overlapPopHldr">
					<div id="wrapOverlapPopHldr">
						<div id="wrapOverlapPop">
							What People Are Saying <br /><br />Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Ethan’s straightforward approach to designing for this complexity represents a fundamental shift in how we’ll build web sites for the decade to come. <br /><br /> <a class="anotherPopLink">Another Popup</a>
														
							<br /><br /><br /><br /><br /><br />What People Are Saying <br /><br /><br /><br /><br /><br /><br /><br />What People Are Saying <br /><br /><br /><br /><br /><br /><br /><br />What People Are Saying <br /><br /><br /><br /><br /><br /><br /><br />What People Are Saying <br /><br /><br /><br /><br /><br /><br /><br />What People Are Saying <br /><br /><br /><br /><br /><br /><br /><br />What People Are Saying <br /><br /><br /><br /><br /><br /><br /><br />What People Are Saying <br /><br /><br /><br /><br /><br /><br /><br />What People Are Saying <br /><br /><br /><br /><br /><br /><br /><br />What People Are Saying <br /><br /><br /><br /><br /><br /><br /><br />What People Are Saying <br /><br /><br /><br /><br /><br /><br /><br />What People Are Saying <br /><br /><br /><br /><br /><br...

CSS

a{ color: #01661b; cursor: pointer; text-decoration: underline; }
/*iScroll*/
.iScrollHldr{
	padding: 10px 20px;
}
.iScrollHldr li{
	float: left; width: 450px;  margin: 0 10px 0 0;
}
.iScrollLinks{
	background: #e9eef2; padding: 10px; margin: 0 0 4px 0;
	border-bottom: 1px solid #a3b7cc;
	text-align: right;
	position: relative;
}
/*iScroll First Classes*/
#firstScrollWrap, #secondScrollWrap, #wrapOverlapPopHldr{		
	position: relative; top:0px;  bottom:0; left:0; z-index: 1;
	overflow: auto;
	height: 392px;
}
#scrollerFirst, #scrollerSecond, #wrapOverlapPop{
	position:relative; padding: 0; z-index: 1;
	/*	-webkit-touch-callout:none;*/
	-webkit-tap-highlight-color:rgba(0,0,0,0);		
}
.firstScroll, .secondScroll, .overlapScroll{	
	/*height: auto; overflow: hidden; position: relative;*/ /* --> --> Commented this line. Seems it's not necessary to have <-- <-- */
}

/*iScroll Scrollbar Class*/
.myScrollbarH{
	position:absolute; height:8px; bottom:0px; left:2px; right:7px; z-index:12;
	background: #dbdbdb;
}
.myScrollbarH > div {
	position:absolute; height:100%;	z-index:12;		
	background: #267fdb;
	border-radius: 4px;
}
.myScrollbarV {
	position:absolute; width:8px; bottom: 0px; top: 0px; right: 0px; z-index: 12;
	background: #dbdbdb;
	border-radius: 4px;
}

.myScrollbarV > div {
	position:absolute; width:100%; z-index: 12;
	/* The following is probably what you want to customize */
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding-box;
	-o-background-clip: padding-box;
	background-clip: padding-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
	box-shadow: 1px 1px 0 rgba(255,255,255,0.5) inset;
	
	background: #267fdb;
}

/*Styling Demo*/
#wrapOverlapPopHldr{
	height: 300px;
}
.overlapPopHldr{
	display: none; position: absolute; top: 37px; left: 0; width: 428px; height: 300px;...