JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consequat malesuada eleifend. Nunc tempus, libero consequat lacinia feugiat, turpis ipsum aliquam risus, a aliquam dolor mauris id est. Proin eu consectetur tellus. Phasellus et elit nec ipsum fringilla dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam feugiat suscipit pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque ut metus tortor, ac suscipit velit. Donec justo lectus, facilisis id accumsan at, euismod vitae mi. Vivamus iaculis tortor vitae dui lobortis suscipit. In hac habitasse platea dictumst. Proin est libero, ultrices id feugiat sed, placerat in dolor. Cras in est a ante vestibulum pellentesque.

Proin non quam risus. Nam et arcu vitae elit aliquam facilisis. Aenean mollis quam in lorem hendrerit venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean vitae scelerisque eros. Aliquam condimentum rutrum nunc sit amet sodales. Maecenas quis urna tellus. Curabitur vel tellus nunc. Pellentesque tincidunt convallis purus at placerat. Donec ante lorem, sagittis sit amet pretium vel, faucibus sit amet tortor. Morbi faucibus elementum elit eu suscipit. Nunc sed posuere augue.

Phasellus lobortis nisl odio. Aliquam purus mauris, ornare vitae porta at, consectetur vitae augue. Praesent ornare, lacus vitae pretium interdum, augue mauris vehicula turpis, et euismod diam ipsum eu risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam in congue risus. Sed fringilla sagittis sapien, a tempor libero vulputate in. Duis non diam elit, in aliquam velit. Maecenas eleifend mauris ac erat facilisis euismod. Morbi ultrices neque pellentesque nisl pulvinar molestie. Pellentesque eget convallis risus. Aliquam dui tellus, posuere vitae bibendum non, vehicula imperdiet nulla. Quisque fermentum scelerisque purus vel mattis. Etiam massa massa, dictum a...

JavaScript

// When document is ready...
$(document).ready(function() {

    // If cookie is set, scroll to the position saved in the cookie.
    if ( $.cookie("scroll") !== null ) {
        $(document).scrollTop( $.cookie("scroll") );
    }
    
    // When scrolling happens....
    $(document).on("scroll", function() {
        
        // Set a cookie that holds the scroll position.
        $.cookie("scroll", $('html, body').scrollTop() );
        
    });

});



/*!
 * jQuery Cookie Plugin v1.3
 * https://github.com/carhartl/jquery-cookie
 *
 * Copyright 2011, Klaus Hartl
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.opensource.org/licenses/GPL-2.0
 */
(function ($, document, undefined) {

    var pluses = /\+/g;

    function raw(s) {
        return s;
    }

    function decoded(s) {
        return decodeURIComponent(s.replace(pluses, ' '));
    }

    var config = $.cookie = function (key, value, options) {

        // write
        if (value !== undefined) {
            options = $.extend({}, config.defaults, options);

            if (value === null) {
                options.expires = -1;
            }

            if (typeof options.expires === 'number') {
                var days = options.expires, t = options.expires = new Date();
                t.setDate(t.getDate() + days);
            }

            value = config.json ? JSON.stringify(value) : String(value);

            return (document.cookie = [
                encodeURIComponent(key), '=', config.raw ? value : encodeURIComponent(value),
                options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
                options.path    ? '; path=' + options.path : '',
                options.domain  ? '; domain=' + options.domain : '',
                options.secure  ? '; secure' : ''
            ].join(''));
        }

        // read
        var...