JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <nav>
        <ul>
            <li><a href="#">Home</a>
            </li>
            <li><a href="#">About</a>

                <ul>
                    <li><a href="#">Sub Link 1</a>
                    </li>
                    <li><a href="#">Sub Link 2</a>
                    </li>
                    <li><a href="#">Sub Link 3</a>
                    </li>
                    <li><a href="#">Sub Link 4</a>
                    </li>
                    <li><a href="#">Sub Link 5</a>
                    </li>
                    <li><a href="#">Sub Link 6</a>
                    </li>
                    <li><a href="#">Sub Link 7</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Top Link</a>

                <ul>
                    <li><a href="#">Sub Link 1</a>
                    </li>
                    <li><a href="#">Sub Link 2</a>
                    </li>
                    <li><a href="#">Sub Link 3</a>
                    </li>
                    <li><a href="#">Sub Link 4</a>
                    </li>
                    <li><a href="#">Sub Link 5</a>
                    </li>
                    <li><a href="#">Sub Link 6</a>
                    </li>
                    <li><a href="#">Sub Link 7</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">News</a>

                <ul>
                    <li><a href="#">News Item 1</a>
                    </li>
                    <li><a href="#">News Item 2</a>
                    </li>
                    <li><a href="#">News Item 3</a>
                    </li>
                    <li><a href="#">News Item 4</a>
                    </li>
                    <li><a href="#">News Item 5</a>
                    </li>
                    <li><a href="#">News Item 6</a>
                    </li>
                    <li><a href="#">News Item 7</a>
                    </li>
                   ...

CSS

header {
    border-bottom:1px solid #c6c8c9;
    height:35px;
    width:100%
}
header nav {
    margin:0;
    position:absolute;
    right:0;
    top:0
}
header nav ul {
    list-style:none;
    margin:0;
    text-transform:lowercase;
    width:auto;
    position:relative
}
header nav li {
    float:left;
    margin:0
}
header nav li a {
    font:18px/1'Arial';
    height:23px;
    display:block;
    padding:7px 10px 14px
}
header nav li:first-child a {
    padding:7px 10px 14px 0
}
header nav li:last-child a {
    padding:7px 0 14px 10px
}
header nav li:nth-child(2):hover, header nav li:nth-child(3):hover, header nav li:nth-child(4):hover {
    margin:-1px -1px 0 -1px;
    border:1px solid #c6c8c9;
    border-bottom:1px solid white;
    border-radius:5px 5px 0 0
}
header nav a:link, header nav a:visited, header nav li:hover, header nav li:active {
    text-decoration:none
}
header nav li ul {
    background:#fff;
    position:absolute;
    top:44px;
    width:504px;
    -webkit-transition:max-height 0s;
    -moz-transition:max-height 0s;
    -ms-transition:max-height 0s;
    -o-transition:max-height 0s;
    transition: max-height 0s;
    overflow:hidden;
    max-height:0;
}
header nav li ul li {
   float: left;
   width: 50%;
}
header nav li:hover ul {
    max-height:155px;
    border:1px solid #c6c8c9;
    border-width:0 1px 1px;
    padding:4px 0 10px;
    -webkit-transition: max-height 0.6s;
    -moz-transition: max-height 0.6s;
    -ms-transition: max-height 0.6s;
    -o-transition: max-height 0.6s;
    transition: max-height 0.6s;
    height:140px;
/*     column-count:2;
    -moz-column-count:2;
    -ms-column-count:2;
    -o-column-count:2;
    -webkit-column-count:2;
    column-gap:0;
    -moz-column-gap:0;
    -ms-column-gap:0;
    -o-column-gap:0;
    -webkit-column-gap:0 */
}
header nav li ul {
    right:0
}
header nav li ul li:hover {
    border:none !important;
    margin:0 !important
}
header nav li ul li a {
    font:16px/35px'Arial';
   ...