JSFiddle - React, Tailwind, and code Playground

by Renatoch

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.0/jquery.nicescroll.min.js"></script>

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">

  <div class="container get-nicer">

    <div class="nice-wrapper">

<h2>Primeiro paragrafo</h2>
      <p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.</p>
   

      <hr>
<h2>Segundo paragrafo</h2>
      
      <p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.</p>
     

      <hr>
<h2>Terceiro paragrafo</h2>
   
      <p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor...

CSS

.get-nicer {
       overflow: auto;
       height: 280px;
     }
     
     .nice-wrapper {}
     
     .nicescroll-rails {
       background-color: rgb(51, 122, 183);
     }
     
     .nicescroll-cursors {
       border: none !important;
       background-color: #5CB85C !important;
       border-radius: 0 !important;
     }
     
     .jumbotron {
       padding-top: 80px;
     }

JavaScript

$(function() {

      $(".get-nicer").niceScroll("div.nice-wrapper", {
        cursorwidth: "12px"
      });

      $(".get-nicer").scroll(function() {
        $("#scroll-info-value").val($(".get-nicer").scrollTop());
      });

      $("a.btn").click(function(e) {
        e.preventDefault();

        console.log('click', e.target);

        $('#nice-modal1').modal();
      });

    });