JSFiddle - React, Tailwind, and code Playground

HTML

<h1>東京</h1>
<p>東京（とうきょう、英語: Tokyo）は、日本の関東平野にあり東京湾に面する都市である。日本の首都機能が置かれている。</p>
<p>江戸幕府の所在地・江戸が慶応4年7月（1868年9月）に「東京」に名称変更された。都が京都から明治2年3月28日に「東京」に遷されている。</p>

<p>1868年に江戸（江戸幕府の所在地）から名称変更された。遷都の結果、首都機能を担っている都市である。場所は関東平野にあり東京湾に面している。</p>
<p>「東京」という名称を用いる構想は江戸時代後期の佐藤信淵の書にあり、大久保利通がその書の影響を受けつつ「東京」とすることを建言した。</p>
<p>1868年（慶応4年）に府制を施行、東京府となった。</p>
<p>1878年（明治11年）に伊豆諸島、1880年（明治13年）に小笠原諸島を編入。</p>
<p>1889年（明治22年）5月1日には、東京15区を東京府から分立して東京市とした。</p>
<p>1893年（明治26年）4月1日に、東京府及び神奈川県境域変更に関する法律により、多摩地域は神奈川県から東京府へ編入されてほぼ現在の東京都の境域が確定した。</p>
<p>東京市は、1923年（大正12年）の関東大震災によって人口が増加した周辺の町村を1932年（昭和7年）に合併し、35区になった。市域は最終的には現在の東京都区部とほぼ同地域となった。</p>


<p>1938年（昭和13年）6月に内務省が「東京都制案要綱」発表し、1943年（昭和18年）1月に政府が「東京都制案」を帝国議会に提出し可決されたことを受け、同年7月1日に東京都制が施行され、東京府と東京市を廃止する形で東京都に統合された。35区は1947年（昭和22年）3月15日に東京22区に再編され、同年5月3日の地方自治法施行により同法の定める特別区となった。同年8月1日、旧練馬町ほか4村の区域が板橋区から分離して練馬区となって東京23区となり、現在に至っている。</p>
<p>現在は、東京には、23区・26市・1郡および4支庁（大島・三宅・八丈・小笠原）がある。人口は（2010年時点で）1316万人。</p>
<p>現在（2010年代時点）、国際連合の統計によると、東京は世界最大の都市と評価されており、川崎・横浜などとともに世界最大の人口を有する都市圏を形成している。都市単位の経済規模 (GDP)ではニューヨークを凌ぎ、世界最大である。2016年（平成28年）、アメリカのシンクタンクが公表したビジネス・人材・文化・政治などを対象とした総合的な世界都市ランキングにおいて、ロンドン・ニューヨーク・パリに次ぐ世界4位の都市と評価された。</p>
<p>英国情報誌モノクル (MONOCLE) による「世界の住みやすい都市ランキング」では、2013年版では5位、2014年版では2位[6]、2015年版では1位。</p>

CSS

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

body{
 font-family: 'Noto Sans Japanese', sans-serif;
  margin:auto;
  width:50%;
  font-size:1em;
  color:#222;
}

h1{font-size:1.2em;margin:20px;}

p{margin-bottom:20px;
font-size:0.95em;
line-height:1.2em;}

JavaScript

/* PrognRoll | https://mburakerman.github.io/prognroll/ | @mburakerman | License: MIT */
(function($) {
    $.fn.prognroll = function(options) {

        var settings = $.extend({
            height: 5, //Progress bar height
            color: "#50bcb6", //Progress bar background color
            position: "top", //Progress bar position can be "top" or "bottom"
            custom: false //If you make it true, you can add your custom div and see it's scroll progress on the page.
        }, options);

        return this.each(function() {
            if ($(this).data('prognroll')) {
                return false;
            }
            $(this).data('prognroll', true);

            var $span = $("<span>", {
                class: "bar"
            });
            $("body").prepend($span);

            $span.css({
                position: "fixed",
                left: 0,
                width: 0,
                height: settings.height,
                backgroundColor: settings.color,
                zIndex: 9999999
            });

            if (settings.position === "top") {
                $span.css("top", 0);
            } else {
                $span.css("bottom", 0);
            }

            if (settings.custom === false) {

                $(window).scroll(function(e) {
                    e.preventDefault();
                    var windowScrollTop = $(window).scrollTop();
                    var windowHeight = $(window).outerHeight();
                    var bodyHeight = $("body").outerHeight();

                    var total = (windowScrollTop / (bodyHeight - windowHeight)) * 100;

                    $(".bar").css("width", total + "%");
                });

            } else {

                $(this).scroll(function(e) {
                    e.preventDefault();
                    var customScrollTop = $(this).scrollTop();
                    var customHeight = $(this).outerHeight();
                    var customScrollHeight =...