JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Tabs">
            <ul>
                <li><a href="#Div1">col-md-2</a></li>
                <li class="end"><a href="#Div2" style="width: 82px !important">col-md-8</a></li>
                <li class="end"><a href="#Div3" style="width: 82px !important">col-md-2</a></li>
            </ul>
            <div>
                <div id="Div1" style="color: Black !important;">
                    <div class="bg">
                        Div 1
                    </div>
                </div>
                <div id="Div2" style="color: Black !important;">
                    <div class="bg">
                        Div 2
                    </div>
                </div>
                <div id="Div3" style="color: Black !important;">
                    <div class="bg">
                        Div 3
                    </div>
                </div>
            </div>
        </div>

JavaScript

$(document).ready(function () {
            $("#Tabs").tabs();

            $("#close").click(function () {
                $("#Tabs").tabs({
                    hide: {
                        effect: "fade",
                        duration: 500
                    },
                    show: {
                        effect: "fade",
                        duration: 500
                    },
                    collapsible: true,
                    active: false
                });
            });
        });