JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="tabUL">
    <li class="selected" id="li_TabMain36"><a class="selected" id="TabMain36" href="#">Test1</a>
    </li>
    <li id="li_TabRel75"><a id="TabRel75" href="#">Test2</a>
    </li>
    <li id="li_TabRel39"><a id="TabRel39" href="#">Test3</a>
    </li>
    <li id="li_TabRel53"><a id="TabRel53" href="#">Test4</a>
    </li>
    <li><a id="Mre" href="#">More â—˘</a>
        <ul class="reltab-moremenu-content" id="tabMore">
            <!--[if IE]><iframe class="cover" src="about:blank"></iframe><![endif]-->
            
            <li id="More_li_TabRel7" class="tablist11"> 
                <a id="TabRel7" href="#">Test A</a>
                
            </li>
            <li id="More_li_TabRel44">
                <a id="TabRel44" href="#">Test B</a>
                 
            </li>
            <li id="More_li_TabRel80">
                <a id="TabRel80" href="#">Test C</a>

            </li>
        </ul>
    </li>
</ul>
<iframe src="http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf" style="width: 100%"></iframe>

CSS

.cover {
        border: none;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -1;
    }
#tabUL {
     border-bottom: 1px solid #d0d0d0;
     margin: 8px 0px 6px 0px;
     padding: 6px 0px 30px 5px;
     font-size: .9em;
     clear: both;
     font-family: tahoma, verdana;
     position: relative;
     font-size: 13px;
 }
 #tabUL li {
     float: left;
     list-style-type: none;
     padding: 0px;
     margin-right: 1px;
     margin-top: 0px;
     margin-bottom: 0px;
     border: 1px solid #AAA;
     background: #D1D1D1;
     background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
     background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
     background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
     background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
     background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
     display: inline-block;
     position: relative;
     z-index: 0;
     border-top-left-radius: 14px;
     border-top-right-radius: 14px;
     /*box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 0px 0 #FFF;*/
     text-shadow: 0 0px #000;
     margin: 0 -0.5px;
     padding: 0 20px;
 }
 #tabUL li a:not(.currentselected) {
     color: black;
 }
 #tabUL a {
     color: #003366;
     float: left;
     line-height: 14px;
     padding: 6px 24px 8px 10px;
     text-decoration: none;
 }
 #tabUL a:hover {
     color: #7f7f7f;
 }
 #tabUL li.selected {
     background: #FFF;
     color: #333;
     z-index: 2;
     border-bottom-color: #FFF;
     box-shadow: -1px 2px 0 #FFF;
 }
 #tabUL li.selected:before {
     box-shadow: 2px 2px 0 #FFF;
 }
 #tabUL li.selected:after {
     box-shadow: -2px 2px 0 #FFF;
 }
 /* To put Scroll in the rel Tab More menu */
 .reltab-moremenu-content {
     /*font-size: 12px;*/
     font-size: 11px;
     display: none;
     width: 150px;
     height: auto;
     max-height: 100px;
     overflow-y: auto;
    ...