JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://www.idangero.us/sliders/swiper/css/idangerous.swiper.css">
<link rel="stylesheet" href="http://www.idangero.us/sliders/swiper/css/style.css">
<link rel="stylesheet" href="http://www.idangero.us/sliders/swiper/css/swiper-demos.css">
<script src="http://www.idangero.us/sliders/swiper/js/idangerous.swiper.js"></script>
<script src="http://www.idangero.us/sliders/swiper/js/idangerous.swiper.scrollbar.js"></script>
<div data-role="page" id="page">
	<div data-role="header">
		<h1>Page One</h1>
	</div>
	<div data-role="content">
        <a href="#slider" data-transition="slide" data-role="button">Go to Slider</a>
    	</div>
	<div data-role="footer">
		<h4>Page Footer</h4>
	</div>
</div>

<div data-role="page" id="slider">
	<div data-role="header">
		<h1>Page One</h1>
	</div>
	<div data-role="content">
<div role="main" class="main">
<div class="swiper-container swiper-scroll-container">
    <div class="swiper-wrapper" >
      <div class="swiper-slide" style="background:#fff; padding:20px">
        <div class="red-slide" style="width:250px; float:left; font-size:25px; line-height:30px; text-align:center">
          <p style="color:#fff; font-weight:bold; font-style:italic;">Your dreams come true:) That is a simple single scrollable area! No slides, no nothing, just pure area!</p>
        </div>
        <div style="width:300px; float:left; margin-left:20px">
          <p>Here goes some text</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum ipsum auctor nulla consectetur sed porta nunc placerat.</p>
          <p>Nulla dui augue, sollicitudin egestas consequat a, consequat quis neque. Sed at mauris nunc. Donec rutrum leo id risus congue convallis. Maecenas ultrices condimentum velit, nec tincidunt lorem convallis consequat. Nulla elementum consequat quam eu euismod</p>
        </div>
        <div style="width:500px; float:left; margin-left:20px">
          <p>Here goes wide image</p>
           ...

CSS

.swiper-scrollbar {
		width: 100%;
		height: 4px;
		border-radius: 10px;
		position: absolute !important;
		left:0;
		bottom:auto;
		top:0 !important;
		-ms-touch-action: none;
		background: none
	}
	.swiper-scrollbar-drag {
		height: 100%;
		width: 100%;
		position: relative;
		background: rgba(0,0,0,0.5);
		border-radius: 10px;
		
	}

JavaScript

$(function(){
	
	/* Scroll container: */
	var sScroll = $('.swiper-scroll-container').swiper({
		scrollContainer : true,
		scrollbar : {
			container : '.swiper-scrollbar'	
		}
	})	
	
	
})