JSFiddle - React, Tailwind, and code Playground

by webwakko

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="tabs">
  <ul id="adminTabs"></ul>
  <div id="adminContentBlocks"></div>
</div>

CSS

#adminTabs li a::first-letter {
  text-transform: uppercase;
}

JavaScript

var adminSections = ['first','second','third','fourth'];

  $.each(adminSections, function(index,val) {
    $('#adminTabs').append('<li><a href="#dashtab-'+index+'">'+val+'</a></li>');
    $("#adminContentBlocks").append(
      '<div id="dashtab-'+index+'">'
      +'<p>Info about '+val+'</p>'
      +'</div>'
    );
  });