JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<div class="tabs">
    <ul>
      <!-- .tabs-0 & .tabs-1 don't work, since they are not a valid url -->
      <li><a href="" class="tabpanellink">General product info</a></li>
      <li><a href="" class="tabpanellink">End user info</a></li>
    </ul>
    <div class="tabpanel">
      general info for product x.
    </div>
    <div class="tabpanel">
      end user info product x.
    </div>
</div>

JavaScript

$(".tabpanellink").each(
    function(uniqueindex){
        $(this).attr('href', '#tab-' + uniqueindex);
        uniqueindex++;
    }
);
uniqueindex = 0;
$(".tabpanel").each(
    function(uniqueindex){
        $(this).attr('id', 'tab-' + uniqueindex);
        uniqueindex++;
    }
);


$(".tabs").tabs();