JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fscontainer" class="container">
  <div class="helper">
    <div class="content">
      <img class="fsElement" height="375" width="500" src="http://s3.amazonaws.com/rapgenius/filepicker%2FvCleswcKTpuRXKptjOPo_kitten.jpg" id="kittenPic">
      
    </div>
  </div>
</div>

<br />
<button onclick="goFullscreen('fscontainer'); return false">Click Me To Go Fullscreen!</button>

CSS

.container:-moz-full-screen {display: table; height: 100%; position:absolute; overflow: hidden;width:100%;}
.container:-moz-full-screen .helper {#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;}
.container:-moz-full-screen .content {#position: relative; #top: -50%;margin:0 auto;width:500px;}

JavaScript

function goFullscreen(id) {
      // Get the element that we want to take into fullscreen mode
      var element = document.getElementById(id);

      // These function will not exist in the browsers that don't support fullscreen mode yet, 
      // so we'll have to check to see if they're available before calling them.

      if (element.mozRequestFullScreen) {
          // This is how to go into fullscren mode in Firefox
          element.mozRequestFullScreen();
      } else if (element.webkitRequestFullScreen) {
          // This is how to go into fullscreen mode in Chrome and Safari
          // Both of those browsers are based on the Webkit project, hence the same prefix.
          element.webkitRequestFullScreen();
      }
      // Hooray, now we're in fullscreen mode!
  }