JSFiddle - React, Tailwind, and code Playground

by Richard

HTML

<button class="button">
  Click to Freeze(for 3s)
</button>
<script src="https://cdn.rawgit.com/alexandruradulescu/FreezeUI/31e2f29d/freeze-ui.js"></script>

CSS

html { height:100%; font-size:10px; -webkit-overflow-scrolling:touch; }

body { height:100%; line-height:1; font-family:"Raleway", "Roboto", Helvetica, Arial, sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; background-color:#343a40; color:#f8f9fa; display:flex; align-items:center; justify-content:center; }

.button { display:inline-block; line-height:4rem; border:.1rem solid #f8f9fa; border-radius:.2rem; color:#f8f9fa; background-color:#343a40; padding:0 1.6rem; font-size:1.4rem; text-transform:uppercase; font-weight:600; margin-bottom:1.6rem; cursor:pointer; transition:color .25s, background-color .25s }

.button:hover { color:#343a40; background-color:#f8f9fa; }

JavaScript

// A simple ES6 event listener on the button
// We will Freeze the page for 3 seconds and then UnFreeze it
document.querySelector('.button').addEventListener('click', () => {
  FreezeUI({text: ''}); //Just call this anywhere and the whole UI will Freeze 
  
  setTimeout(() => {
    UnFreezeUI(); //Call this anywhere and the UI will UnFreeze.
  }, 3000);  
});