JSFiddle - React, Tailwind, and code Playground

by Lucas Costa

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<img id="image" width="450" height="350" src="https://orig15.deviantart.net/9b9e/f/2013/185/6/8/682eaa32bcb514ef094d9bc2afd15cbc-d6bzng9.png">

<script>
  $("#image").click(function() {
    toggleFullscreen(this);
  });
  
     function toggleFullscreen(elem) {
     elem = elem || document.documentElement;
     if (!document.fullscreenElement && !document.mozFullScreenElement &&
       !document.webkitFullscreenElement && !document.msFullscreenElement) {
       if (elem.requestFullscreen) {
         elem.requestFullscreen();
       } else if (elem.msRequestFullscreen) {
         elem.msRequestFullscreen();
       } else if (elem.mozRequestFullScreen) {
         elem.mozRequestFullScreen();
       } else if (elem.webkitRequestFullscreen) {
         elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
       }
     } else {
       if (document.exitFullscreen) {
         document.exitFullscreen();
       } else if (document.msExitFullscreen) {
         document.msExitFullscreen();
       } else if (document.mozCancelFullScreen) {
         document.mozCancelFullScreen();
       } else if (document.webkitExitFullscreen) {
         document.webkitExitFullscreen();
       }
     }
   }

</script>

CSS

img:-webkit-full-screen {
  position: fixed; 
  top: 0; 
  left: 0; 
  min-width: 100%;
  min-height: 100%;
}