JSFiddle - React, Tailwind, and code Playground

by Gabe Rogan

HTML

<div class="foo"></div>

CSS

.foo {
  width: 50px;
  height: 50px;
  background-color: yellow;
  transition: opacity .5s;
}

.fadeOut {
  opacity: 0;
}

JavaScript

document.addEventListener('DOMContentLoaded', checkDimensions);
window.addEventListener('resize', checkDimensions);

function checkDimensions() {
	// http://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript
	var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
	var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  var ratio = w/h;
  // console.log(ratio); // check your browser console
  
  if (ratio >= 1 & ratio <= 2) {
  	// fade out
    document.querySelector('.foo').classList.add('fadeOut');
  }
  else {
  	// fade in
    document.querySelector('.foo').classList.remove('fadeOut');
  }
}