JSFiddle - React, Tailwind, and code Playground

HTML

<input id="WarehouseRefex" name="WarehouseRefex" value="LRS.G" type="hidden">
    <input id="WarehouseId" name="WarehouseId" value="7" type="hidden">
    


    <div class="container_16">
        <div class="grid_16">
             
<ul class="nav main">
    <li class="icon"><a title="Entrada" href="/"><span class="ui-icon-invert ui-icon-home"></span></a></li>
    
                <li><a href="">Transporte</a>
        
                    <ul>
        
                        <li><a href="/bookings/events?s.Today=true&amp;s.Top=20">Tracking</a></li>
                         
                        <li><a href="/planning">Planeamento</a></li>
                         
                        <li><a href="/bookings?s.Today=true">Ordens de Serviço</a></li>
                         
                        <li><a href="/rangesheets?s.Today=true">Folhas de Serviço</a></li>
                         
                        <li><a href="/dispatchnotes?s.Today=true">Guias de Remessa</a></li>
                         
                        <li><a href="/expeditions?s.Today=true&amp;s.IntegrationState=0">Expedições</a></li>
                         
                        <li><a href="/expeditionsPlanning">Planeamento Expedição</a></li>
                         
                        <li><a href="/resourceallocation">Alocação de Recursos</a></li>
                         
                        <li><a href="/planningvseffective">Análise de Desvios</a></li>
                         
                        <li><a href="/DeliveryNoteImagingControl?s.Today=true&amp;s.Images=">Controlo de Dig. de GR's</a></li>
                         
                        <li><a href="/RangeSheetControl?s.Today=true">Controlo de Serviços</a></li>
                         
                    </ul>
                    </li>
                    
                <li><a href="">Armazém</a>
        
                    <ul>
        
                        <li><a...