JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <!-- Navigation -->
    <ul class="dropdownMenu">
        <li><a href="show">Home</a>

        </li>
        <li><a href="#">New Article</a>

        </li>
        <li><a href="#">Categories</a>

            <ul class="droprightMenu">
                <li><a href="#">All</a>

                    <ul class="droprightMenu">
                        <li><a href="#">Sports</a>

                            <ul class="droprightMenu">
                                <li><a href="#">Football</a>

                                    <ul class="droprightMenu"></ul>
                                </li>
                                <li><a href="#">Basketball</a>

                                    <ul class="droprightMenu"></ul>
                                </li>
                                <li><a href="#">Hockey</a>

                                    <ul class="droprightMenu"></ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Politics</a>

                            <ul class="droprightMenu"></ul>
                        </li>
                        <li><a href="#">IT</a>

                            <ul class="droprightMenu">
                                <li><a href="#">Software</a>

                                    <ul class="droprightMenu"></ul>
                                </li>
                                <li><a href="#">Hardware</a>

                                    <ul class="droprightMenu"></ul>
                                </li>
                                <li><a href="#">Programming</a>

                                    <ul class="droprightMenu">
                                        <li><a href="#">Java</a>

                                        </li>
                                        <li><a href="#">C#</a>

                                        </li>
                                    </ul>
              ...

CSS

header, footer, nav, article {
     display: block;
 }
 /* Width of the body is defined as 940px and is centered 
 */
 body {
     width: 940px;
     margin: 0 auto;
     font: 16px/24px Helvetica, Arial, sans-serif;
     color: #445369;
     background: #f0f0f0;
 }
 h2 {
     font-size: 28px;
     line-height: 44px;
     padding: 22px 0;
 }
 h3 {
     font-size: 18px;
     line-height: 22px;
     padding: 11px 0;
 }
 p {
     padding-bottom: 22px;
 }
 a {
     color: #445369;
 }
 /*------------------------------
 = NAVIGATION
 ------------------------------*/
 .dropdownMenu {
     background: #efefef;
     background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
     background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
     background: -webkit-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
     box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
     border-radius: 10px;
     list-style: none;
     position: relative;
     /* allow us to absolutely position the sub menus according to this main nav bar */
     display: block;
 }
 .dropdownMenu:after {
     content:"";
     clear: both;
     display: block;
 }
 .dropdownMenu li {
     float: left;
     display:block;
     line-height:50px;
     text-align:center;
     vertical-align:top;
     width:120px;
 }
 .dropdownMenu li:hover > ul {
     /* reappear sub menus on hover*/
     display: block;
 }
 .dropdownMenu li a {
     display: block;
     text-decoration: none;
 }
 .dropdownMenu li:hover {
     background: #4b545f;
     background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
     background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
     background: -webkit-linear-gradient(top, #4f5964 0%, #5f6975 40%);
 }
 .dropdownMenu li:hover a {
     color: #fff;
 }
 .droprightMenu {
     display: none;
     /* hide the sub menus */
     background: #5f6975;
     border-radius: 0px;
     padding: 0;
     position: absolute;
     top: 100%;
 }
 .droprightMenu li {
     float: none;
    ...