JSFiddle - React, Tailwind, and code Playground

by CoolBuys1290

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Fxp Jquery Scroller Basic Example</title>
    <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" rel="stylesheet" type="text/css">
    <link href="scroller.css" rel="stylesheet">
    <style>
        body {
background: #fafafa;
        }
.container { margin: 150px auto; max-width: 960px; }
        .content {
            background: #eee;
            height: 200px;
            width: 300px;
            border-radius: 3px solid #222;
        }
        p { padding: 2rem 1rem; }
    </style>
</head>

<body><div id="jquery-script-menu">
<div class="jquery-script-center">
<ul>
<li><a href="https://www.jqueryscript.net/other/custom-fxp-scroller.html">Download This Plugin</a></li>
<li><a href="https://www.jqueryscript.net/">Back To jQueryScript.Net</a></li>
</ul><div id="carbon-block"></div>
<div class="jquery-script-ads"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* jQuery_demo */
google_ad_slot = "2780937993";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="https://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<div class="jquery-script-clear"></div>
</div>
</div>
<textarea class="content container" data-scroller="true" data-prevent-mouse-scroll="true" style="overflow-y: scroll; border-radius: 25px;" rows="10" cols="10">
"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids...

CSS

[data-scroller="true"] {
  overflow: hidden;
}
.scroller-scrollbar {
  display: none;
  position: absolute;
  z-index: 1000;
  border-top-right-radius: 2px;
  border-top-left-radius: 2px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
}
.scroller-scrollbar.vertical {
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  margin: 0 2px;
}
.scroller-scrollbar.vertical.scroller-inverse {
  left: 0;
  right: inherit;
}
.scroller-scrollbar.horizontal {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  margin: 2px 0;
}
.scroller-scrollbar.horizontal.scroller-inverse {
  top: 0;
  bottom: inherit;
}
.scroller-scrollbar.scroller-active {
  display: block;
}
.scroller-scrollbar {
  background-color: #000;
  opacity: 0.32;
}