JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider1" class="sliderwrapper">
  <div class="contentdiv">
  <p>One Lorem Ipsum is <strong>simply dummy text</strong> of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>One Lorem Ipsum is simply dummy text of the printing and typesetting industry. <strong>Lorem Ipsum</strong> has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <div class="contentdiv">
  <p>Two Lorem Ipsum is <strong>simply dummy text</strong> of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>  
  </div> 
    <div class="contentdiv">
  <p>Three Lorem Ipsum is...

CSS

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
width: 300px; /*width of featured content slider*/
height: 320px;
padding:5px;
color: #333333;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
}
.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0;  /*leave as is*/
top: 0;  /*leave as is*/
padding: 5px;
background: white;
width: 300px; /*width of content DIVs within slider. Total width should equal slider's inner width */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
height:320px;
overflow-y:auto;
}
.pagination{
width: 300px; /*Width of pagination DIV. Total width should equal slider's outer width */
text-align: center;
padding: 10px 0;
color: #333333;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
}

.contentdiv p {
    margin-top: 0;
}
.searchGuide{
	border-top:1px #efefef dotted;
	width: 300px;
	padding: 10px;
	color: #333333;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.searchGuide a{
	color: #333333;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration:none;
}
.searchGuide a:hover{
	text-decoration:underline;
	cursor:pointer;
}
.searchGuide a img{
	vertical-align:bottom;
}
.toc {
    margin: 5px;
}
#disabled.prev{
color:gray;
cursor:default;
text-decoration:none;
}
#disabled.next{
color:gray;
cursor:default;
text-decoration:none;
}

JavaScript

var featuredcontentslider={
//3 variables below you can customize if desired:
ajaxloadingmsg: '<div style="margin: 20px 0 0 20px"><img src="images/loading.gif" /> Fetching slider Contents. Please wait...</div>',
bustajaxcache: true, //bust caching of external ajax page after 1st request?
enablepersist: true, //persist to last content viewed when returning to page?

settingcaches: {}, //object to cache "setting" object of each script instance

jumpTo:function(fcsid, pagenumber){ //public function to go to a slide manually.
	this.turnpage(this.settingcaches[fcsid], pagenumber)
},

ajaxconnect:function(setting){
	var page_request = false
	if (window.ActiveXObject){
		try {
		page_request = new ActiveXObject("Msxml2.XMLHTTP")
		} 
		catch (e){
			try{
			page_request = new ActiveXObject("Microsoft.XMLHTTP")
			}
			catch (e){}
		}
	}
	else if (window.XMLHttpRequest) 
		page_request = new XMLHttpRequest()
	else
		return false
	var pageurl=setting.contentsource[1]
	page_request.onreadystatechange=function(){
		featuredcontentslider.ajaxpopulate(page_request, setting)
	}
	document.getElementById(setting.id).innerHTML=this.ajaxloadingmsg
	var bustcache=(!this.bustajaxcache)? "" : (pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
	page_request.open('GET', pageurl+bustcache, true)
	page_request.send(null)
},

ajaxpopulate:function(page_request, setting){
	if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
		document.getElementById(setting.id).innerHTML=page_request.responseText
		this.buildpaginate(setting)
	}
},

buildcontentdivs:function(setting){
	var alldivs=document.getElementById(setting.id).getElementsByTagName("div")
	for (var i=0; i<alldivs.length; i++){
		if (this.css(alldivs[i], "contentdiv", "check")){ //check for DIVs with class "contentdiv"
			setting.contentdivs.push(alldivs[i])
				alldivs[i].style.display="none" //collapse all content DIVs to begin with
		}
	}
	if...