JSFiddle - React, Tailwind, and code Playground

by Andrey K

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.6/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.6/semantic.min.css">
<div id="custom-tabs" class="ui segment">
  <a class="active item" data-tab="first">First</a>
  <a class="item" data-tab="second">Second</a>
  <a class="item" data-tab="third">Third</a>
</div>
<div class="ui segment">
  <div id="my-context">
    <div class="ui active tab" data-tab="first">
      First
    </div>
    <div class="ui tab" data-tab="second">
      Second
    </div>
    <div class="ui tab" data-tab="third">
      Third
    </div>
  </div>

</div>

JavaScript

$('#custom-tabs .item')
  .tab({
		context: $("#my-context"),
    childrenOnly: true
  });