JSFiddle - React, Tailwind, and code Playground

by gizmovation

HTML

<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.css">
<ul id="toolbar" class="portrait">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact us</a></li>
</ul>

CSS

.portrait li {
  display:block;
}

.landscape li {
  display:inline;
}

JavaScript

$(document).ready(function() {

    $('body').on('orientationchange', function() {
        if (window.orientation == 0) {
            // portrait mode
            $('#toolbar').attr('class', 'portrait');
        } else {
            // landscape mode
            $('#toolbar').attr('class', 'landscape');
        }
    });

});