JSFiddle - React, Tailwind, and code Playground

HTML

<article class="main home">
            <img class="heroLogo" src="media/TM-Logo-4.png">
                <nav>
                    <div class="menuIcon"></div>
                    <ul>
                        <li><a href="http://www.google.com">About</a></li>
                        <li><a href="http://www.google.com">Sleep</a></li>
                        <li><a href="http://www.google.com">Imbibe</a></li>
                        <li><a href="http://www.google.com">Tierra Magnifica</a></li>
                        <li><a href="http://www.google.com">Relax</a></li>
                        <li><a href="http://www.google.com">Play</a></li>
                        <li><a href="http://www.google.com">Party</a></li>
                    </ul>
                </nav>
        </article>

CSS

.menuIcon {
        display: none;
    }
    
    nav, nav:hover {
        width: 80%;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0 auto;
        font-size: 1.2em;
        text-align: center;
    }

    nav ul, nav:hover ul, nav ul.clicked, nav ul.none {
        width: 100%;
        display: block;
        text-align: center;
        text-align: justify;
    }

    nav ul:after {
        content: '';
        display: inline-block;
        width: 100%;
    }

    nav li {
        width: 100%;
        display: inline;
        padding: 0;
        margin: 0;
    }