JSFiddle - React, Tailwind, and code Playground

by kevinPHPkevin

HTML

<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<div id="main-view">
    <a href="#" id="link">open/clode</a>
  Page content, not images Page content, not images Page content, not images page_content Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, 
</div>
    <div id="cover"></div>
<div id="partial-overlay">
    <p>Some content here</p>
    <p>Some content here</p>
</div>

CSS

#link {
    z-index: 1000;
    position: absolute;
    top:0;
    left:0;
}  
#partial-overlay {
    padding-top: 20px;
    display:none;
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0;
    left: 0;
    z-index:99; 
  }
canvas{
    height: 100px;
    position: fixed;
    top: 0;
    left: 0;
    -webkit-filter:blur(2px);
}
#cover{
    display:none;
    height:99px;
    width:100%;
    background:#fff;
    position:fixed;
    top:0;
    left:0;
}
#main-view {
 width:300px;   
}
}

JavaScript

$('#link').click(function() {
  $('#slide').slideToggle('slow', function() {
  });
});

$('#main-view').click(function(){

html2canvas(document.body, {
        onrendered: function (canvas) {
            document.body.appendChild(canvas);
        },
        width: 300,
        height: 100
    });
    
    $('#cover').slideToggle('fast', function(){
        $('#partial-overlay').slideToggle();
    });
});