JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<div class="mobile-menu-wrap">
    <div id="mobile-menu-open" class="mobile-menu-item" style="background-color: #002874;">Menu</div>
    <div class="mobile-menu-item mobile-menu-hide" style="background-color: #00c700;">About</div>
    <div class="mobile-menu-item mobile-menu-hide" style="background-color: #ffc400;">Past Developments</div>
    <div class="mobile-menu-item mobile-menu-hide" style="background-color: #36c5c8;">Present Developments</div>
    <div class="mobile-menu-item mobile-menu-hide" style="background-color: #f1634a;">Progress Developments</div>
    <div class="mobile-menu-item mobile-menu-hide" style="background-color: #ffc400;">Future Developments</div>
    <div class="mobile-menu-item mobile-menu-hide" style="background-color: #36c5c8;">Press</div>
    <div class="mobile-menu-item mobile-menu-hide" style="background-color: #f1634a;">Team</div>
    <div class="mobile-menu-item mobile-menu-hide" style="background-color: #ffc400;">Contact</div>
</div>

CSS

.mobile-menu-wrap {
    position: relative;
    width: 100%;
    height: auto;
    display: block !important;
}
.mobile-menu-item {
    position: relative;
    display: block;
    width: 100%;
    height: 60px;
    text-indent: 20px;
    font-family:'Ne';
    font-weight: normal;
    font-style: normal;
    font-size: 40px;
    line-height: 68px;
    text-transform: uppercase;
    color: #ffffff;
    cursor: pointer;
}
.mobile-menu-item a {
    color: #ffffff;
}
.mobile-menu-hide {
    display: none;
}

JavaScript

$(document).ready(function () {
	    $('#mobile-menu-open').toggle(

	    function () {
	        $('.mobile-menu-hide').slideDown();
	        $('#mobile-menu-open').html("Close");
	    },

	    function () {
	        $('.mobile-menu-hide').slideUp();
	        $('#mobile-menu-open').html("Menu");
	    });

	});