JSFiddle - React, Tailwind, and code Playground

by Luis Almeida

HTML

<div class="MenuContents">
            <ul class="dropdown-menu">
                <li><a id="index" href="index.html">Home</a></li>
                <li><a id="gamePage" href="gamePage.html">Game</a></li>
                <li><a id="devRolesPage" href="devRolesPage.html">Developer Roles</a></li>
                <li class="float-right"><a id="about" href="about.html">About</a></li>
            </ul>
            <div class="dropdown">
                <button class="dropbtn">Game Design</button>
                <div class="dropdown-content">
                    <a id="GameIdea" href="GameIdea.html">Link 1</a>
                    <a id="GameMechanics" href="GameMechanics.html">Link 2</a>
                    <a id="GameCharacters" href="GameCharacters.html">Link 3</a>
                    <a id="Inspiration" href="Inspiration.html">Link 3</a>
                </div>
            </div>
</div>

CSS

ul.dropdown-menu, .dropdown{
  display: inline-block;
  vertical-align: top;
}