JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/NawaMan/LayoutMode/master/layout-mode.js"></script>
<h3>Current Mode</h3> 
<p class='show-mode-compact'>Compact mode</p>
<p class='show-mode-compact'> ... try making the windows <b>larger</b> than 600px</p>
<p class='show-mode-spacious'>Spacious mode</p>
<p class='show-mode-spacious'> ... try making the windows <b>smaller</b> than 600px</p>

<h3>Change mode</h3>
<button class='to-compact' onclick='toCompact()'>To compact mode</button>
<button class='to-spacious' onclick='toSpacious()'>To spacious mode</button>
<br/>
<button class='to-clear' onclick='toClear()'>Clear modes</button>

CSS

/* Default and selection setting */
body > .css-layout-mode-selector > div.mode-compact {
    display: block;
}
@media(min-width: 600px) {
    body > .css-layout-mode-selector > div.mode-compact { display: none; }
    body > .css-layout-mode-selector > div.mode-spacious { display: block; }
}

/* Current mode */
.show-mode-compact,
.show-mode-spacious {
  /* By default this is the style. */
  display: none;
}
body.mode-spacious .show-mode-spacious,
body.mode-compact .show-mode-compact {
  /* Styles when selected. */
  display: block;
}

/* Mode change */
button{
  cursor: pointer;
}
body.mode-spacious .to-spacious,
body.mode-compact .to-compact {
        cursor: not-allowed;
        pointer-events: none;
        color: #c0c0c0;
        background-color: #ffffff;
}

JavaScript

var layoutMode = LayoutMode.init(['compact', 'spacious'])

layoutMode.watch(function(modes) {
    //alert('You are now in ' + modes + ' mode')
})

window.toCompact = function() {
	layoutMode.changeModes(['compact'])
}

window.toSpacious = function() {
	layoutMode.changeModes(['spacious'])
}

window.toClear = function() {
	layoutMode.clearModes()
}