JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
            <li>
                <a href="#" title="Our product range">Product</a>
                <ul  style="max-height: 250px; height: 250px; overflow: auto;">
                    <li>
                        <a href="#">Small product (one)</a>
                    </li>
                    <li>
                        <a href="#">Small product (two)</a>
                    </li>
                    <li>
                        <a href="#">Small product (three)</a>
                    </li>
                    <li>
                        <a href="#">Small product (four)</a>
                    </li>
                    <li>
                        <a href="#">Big product (five)</a>
                    </li>
                    <li>
                        <a href="#">Big product (six)</a>
                    </li>
                    <li>
                        <a href="#">Big product (seven)</a>
                    </li>
                    <li>
                        <a href="#">Big product (eight)</a>
                    </li>
                    <li>
                        <a href="#">Enourmous product (nine)</a>
                    </li>
                    <li>
                        <a href="#">Enourmous product (ten)</a>
                    </li>
                    <li>
                        <a href="#">Enourmous product (eleven)</a>
                    </li>
                    <li>
                        <a href="#">Small product (one)</a>
                    </li>
                    <li>
                        <a href="#">Small product (two)</a>
                    </li>
                    <li>
                        <a href="#">Small product (three)</a>
                    </li>
                    <li>
                        <a href="#">Small product (four)</a>
                    </li>
                    <li>
                        <a href="#">Big product (five)</a>
                    </li>
                    <li>
 ...

CSS

/*------------------------------------*\
             RESET
             \*------------------------------------*/
            body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
                margin: 0;
                padding: 0;
            }
            table {
                border-collapse: collapse;
                border-spacing: 0;
            }
            fieldset, img {
                border: 0;
            }
            address, caption, cite, code, dfn, th, var {
                font-style: normal;
                font-weight: normal;
            }
            caption, th {
                text-align: left;
            }
            h1, h2, h3, h4, h5, h6 {
                font-size: 100%;
                font-weight: normal;
            }
            q:before, q:after {
                content: '';
            }
            abbr, acronym {
                border: 0;
            }
            /*------------------------------------*\
             MAIN
             \*------------------------------------*/
            html {
                height: 101%;
                background: #fff url(/img/css/bg.gif) top left repeat-x;
            }
            body {
                font-family: Arial, Verdana, sans-serif;
                font-size: 0.75em;
                color: #333;
                width: 960px;
                margin: 0 auto;
                padding: 10px;
            }
            /*------------------------------------*\
             NAV
             \*------------------------------------*/
            #nav {
                list-style: none;
                font-weight: bold;
                margin-bottom: 10px;
                /* Clear floats */
                float: left;
                width: 100%;
                /* Bring the nav above everything else--uncomment if needed.
                 position:relative;
                 z-index:5;
                 */
      ...