JSFiddle - React, Tailwind, and code Playground

by Caleb Wong

CSS

.portrait {
    background: red;
}
.landscape {
    background: green;
}

JavaScript

matchmedia: function() {
            // Find matches
            var mql = window.matchMedia("(orientation: portrait)");

            // If there are matches, we're in portrait
            if(mql.matches) {
                // Portrait orientation
                $('body').addClass('portrait').removeClass('landscape');
            } else {
                // Landscape orientation
                $('body').addClass('landscape').removeClass('portrait');
            }

            // Add a media query change listener
            mql.addListener(function(m) {
                if(m.matches) {
                    // Changed to portrait
                    $('body').addClass('portrait').removeClass('landscape');
                }
                else {
                    // Changed to landscape
                    $('body').addClass('landscape').removeClass('portrait');
                }
            });
        }

matchmedia();