JSFiddle - React, Tailwind, and code Playground

by Alex Stanese

HTML

<body>  

    <div data-role="page" id="page1">
        <button id="page2">page2</button>
        <p>this is page1</p>
    </div>
    
    <div data-role="page" id="page2">
        <p>this is page2</p>
        <div class="photo">
			<div class="blur"></div>
		</div>
    </div>
    
</body>

CSS

.photo{
	padding-bottom:100%;
	position: relative;
	overflow: hidden;
	background-size: cover;
background-repeat: no-repeat;
background-image:...

JavaScript

$("#page2").click(function() {
        $.mobile.changePage("#page2", {
            transition: 'pop',
            reverse: true
        });
        // $("#photo").hide().delay(1000).fadeOut();
            // $("#photo").animate({opacity: 0.0}, 1);
    });  

  /* 
 * Blur.js
 * Copyright Jacob Kelley
 * MIT License
 */
$(document).on("pagebeforeshow","#page2",function(){
    $('.blur').blurjs({
        source: '.photo',
        radius: 10
    }); 
});

(function ($) {
	$.fn.blurjs = function (options) {
		var canvas = document.createElement('canvas');
		var isCached = false;
		var selector = ($(this).selector).replace(/[^a-zA-Z0-9]/g, "");
		if(!canvas.getContext) {
			return;
		}
		options = $.extend({
			source: 'body',
			radius: 5,
			overlay: '',
			offset: {
				x: 0,
				y: 0
			},
			optClass: '',
			cache: false,
			cacheKeyPrefix: 'blurjs-',
			draggable: false,
			debug: false
		}, options);
		// Stackblur, courtesy of Mario Klingemann: http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
		var mul_table = [512, 512, 456, 512, 328, 456, 335, 512, 405, 328, 271, 456, 388, 335, 292, 512, 454, 405, 364, 328, 298, 271, 496, 456, 420, 388, 360, 335, 312, 292, 273, 512, 482, 454, 428, 405, 383, 364, 345, 328, 312, 298, 284, 271, 259, 496, 475, 456, 437, 420, 404, 388, 374, 360, 347, 335, 323, 312, 302, 292, 282, 273, 265, 512, 497, 482, 468, 454, 441, 428, 417, 405, 394, 383, 373, 364, 354, 345, 337, 328, 320, 312, 305, 298, 291, 284, 278, 271, 265, 259, 507, 496, 485, 475, 465, 456, 446, 437, 428, 420, 412, 404, 396, 388, 381, 374, 367, 360, 354, 347, 341, 335, 329, 323, 318, 312, 307, 302, 297, 292, 287, 282, 278, 273, 269, 265, 261, 512, 505, 497, 489, 482, 475, 468, 461, 454, 447, 441, 435, 428, 422, 417, 411, 405, 399, 394, 389, 383, 378, 373, 368, 364, 359, 354, 350, 345, 341, 337, 332, 328, 324, 320, 316, 312, 309, 305, 301, 298, 294, 291, 287, 284, 281, 278, 274, 271, 268, 265, 262, 259, 257, 507, 501, 496, 491, 485, 480, 475, 470, 465,...