JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
CSS
body::before {
content: "I'm not mobile!";
}
body.mobile::before {
content: "I'm mobile!";
}
JavaScript
$(document).on('click', 'body.mobile .mobileNavButton', function() {
$('.mainNav').toggleClass('active');
$('.mobileNavButton').toggleClass('active');
});
$(document).on('click', 'body.mobile .hasDropdown', function() {
$('.dropdown').toggle('slide');
$('.dropdown').toggleClass('active');
$('.hasDropdown').toggleClass('rotate');
});
$(document).on('click', 'body.mobile .hasSubDropdown', function() {
$('.subDropdown').toggle('slide');
$('.subDropdown').toggleClass('active');
$('.hasSubDropdown').toggleClass('rotate');
});
$(window).resize(function(e) {
if ($(window).width() <= 800) {
$('body').addClass('mobile');
}
else {
$('body').removeClass('mobile');
}
});
$(document).ready(function(){
$(window).resize(); // call once for good measure!
});