JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<div class="">
    <img class="Mobile-Menu" src="menu.png" />
    <ul class="Mobile-list">
        <li> <a Id="Mobile-Home" href="#Home-Anchor">Home</a>
        </li>
        <li><a Id="Mobile-What" href="#What-Anchor">What Is Encryption?</a>
        </li>
        <li><a Id="Mobile-Test" href="#Test-Anchor">Test It Yourself</a>
        </li>
        <li><a Id="Mobile-How" href="#How-Anchor">How Does It Work</a>
        </li>
    </ul>
</div>

CSS

.Mobile-Menu {
    display: block;
    position: fixed;
    top: -3px;
    left: 10px;
    z-index: 75;
    width: 100px;
}
.Mobile-list {
    position: fixed;
    display: none;
    top: 90px;
    left: 20px;
    text-align: left;
    background-color: #1b2021;
    font-size: 22pt;
    padding: 2px;
}

JavaScript

$(document).ready(function () {

    $( ".Mobile-Menu" ).click(function() {

        $(".Mobile-list").slideToggle("slow");
    }
    
});