JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<input id="mobile-overlay-toggle" type="checkbox">

<label for="mobile-overlay-toggle">☰</label>

<div class="mobile-overlay">
    <div class="mobile-overlay-inside">
        <ul class="menu">
            <li>
                <a href="#item-1">Item 1</a>
                <ul>
                    <li>
                        <a href="#item-1">Sub Item 1.1</a>
                    </li>
                    <li>
                        <a href="#item-2">Sub Item 1.2</a>
                    </li>
                    <li>
                        <a href="#item-3">Sub Item 1.3</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#item-2">Item 2</a>
                <ul>
                    <li>
                        <a href="#item-1">Sub Item 2.1</a>
                    </li>
                    <li>
                        <a href="#item-2">Sub Item 2.2</a>
                    </li>
                    <li>
                        <a href="#item-3">Sub Item 2.3</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#item-3">Item 3</a>
                <ul>
                    <li>
                        <a href="#item-1">Sub Item 3.1</a>
                    </li>
                    <li>
                        <a href="#item-2">Sub Item 3.2</a>
                    </li>
                    <li>
                        <a href="#item-3">Sub Item 3.3</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#item-4">Item 4</a>
                <ul>
                    <li>
                        <a href="#item-1">Sub Item 4.1</a>
                    </li>
                    <li>
                        <a href="#item-2">Sub Item 4.2</a>
                    </li>
                    <li>
                        <a href="#item-3">Sub Item 4.3</a>
                    </li>
                </ul>
          ...

SCSS

html {
    font-size: 18px;
}

ul.menu {
    font-family: Arial, sans-serif;
}
    list-style: none;
    padding: 0;
    margin: 0;
    
    > li > a {
        display: block;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 1rem;
    }
    
    > li > ul {
        display: none;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
}

.mobile-overlay {
    background: #000;
    color: #fff;
    
    .mobile-overlay-inside {
        padding: 2rem;
    }
    
    a {
        color: currentColor;
    }
}