JSFiddle - React, Tailwind, and code Playground

by Joe Pigott

HTML

<h1><b>&lt;&lt;Scissor</b>Script&gt;&gt; Tutorials</h1>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Chapter 1</a>

        </li>
        <li><a href="#tabs-2">Chapter 2</a>

        </li>
        <li><a href="#tabs-3">Chapter 3</a>

        </li>
    </ul>
    <div id="tabs-1">
        <p>
            ffff
        </p>
    </div>
    <div id="tabs-2">
        <p>
            ffff
        </p>
    </div>
    <div id="tabs-3">
        <p>
            ffff
        </p>
    </div>
</div>

CSS

h1 {
    color: #96f226
}
body {
    background: #252525;
    color: #87da22
}
.ui-tabs {
    background: #303030;
    color: #96f226;
    border-radius: 0px;
}
.ui-tabs-nav {
    background: #252525;
    border-radius: 0px;
    color: #96f226
}
.ui-tabs-active {
    background: #303030;
    color: #96f226;
    border-radius: 0px;
}
.ui-tabs-panel {
    background: #769577;
    border-radius: 0px;
    color: #96f226
}
.ui-tabs-anchor {
    background: #656565;
    border-radius: 0px;
    color: #96f226
}

JavaScript

$(document).ready(function () {
    $("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
    $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
});