JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="navigation ui-slider-tabs-list">
   <li style="" class="effect selected hide_selected"> <a id="" href="#company-profile">
      Company Profile                                                </a>
   </li>
   <li style="" class="effect"> <a id="" href="#sg-corporate-value">
      SG Corporate Value                                                </a>
   </li>
   <li style="" class="effect"> <a id="" href="#sg-corporate-philosophy">
      SG Corporate Philosophy                                                 </a>
   </li>
   <li style="" class="effect"> <a id="" href="#sg-critical-success-factors">
      SG Critical Success Factors                                                 </a>
   </li>
</ul>

CSS

a {
    text-decoration:none;
}
.selected a {
    text-decoration: underline;
}
.hide_selected a {
    text-decoration: none!important;
}

JavaScript

$(document).ready(function () {

    function fadeItem() {
        $('ul.navigation li:hidden:first').delay(100).fadeIn(fadeItem,function(){
        $(ul.navigation li:hidden:first).removeClass('hide_selected');
        });
    }

    setTimeout(function () {
        // Do something after 1 second 
        fadeItem();     

    }, 1000);
    
    $('.ui-slider-tabs-list li.selected').removeClass('hide_selected');

    $('ul.navigation li').hide();  

});