<div class="trezo-tabs" id="trezoTabs">
    <ul class="navs mb-[20px] border-b border-gray-100 dark:border-[#172036]">
        <li class="nav-item inline-block ltr:mr-[20px] rtl:ml-[20px]">
            <button type="button" data-tab="tab1" class="nav-link active block pb-[8px] transition-all relative font-medium">
                Tab 1
            </button>
        </li>
        <li class="nav-item inline-block ltr:mr-[20px] rtl:ml-[20px]">
            <button type="button" data-tab="tab2" class="nav-link block pb-[8px] transition-all relative font-medium">
                Tab 2
            </button>
        </li>
        <li class="nav-item inline-block ltr:mr-[20px] rtl:ml-[20px]">
            <button type="button" data-tab="tab3" class="nav-link block pb-[8px] transition-all relative font-medium">
                Tab 3
            </button>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tab1">
            <p>
                Tab 1 - Hello World!
            </p>
        </div>
        <div class="tab-pane" id="tab2">
            <p>
                Tab 2 - Hello World!
            </p>
        </div>
        <div class="tab-pane" id="tab3">
            <p>
                Tab 3 - Hello World!
            </p>
        </div>
    </div>
</div>

<div class="trezo-tabs" id="trezo-tabs">
    <ul class="navs mb-[20px] border-b border-gray-100 dark:border-[#172036]">
        <li class="nav-item inline-block ltr:mr-[20px] rtl:ml-[20px]">
            <button type="button" data-tab="iconTab1" class="nav-link active flex items-center gap-[4px] pb-[8px] transition-all relative font-medium">
                <i class="material-symbols-outlined !text-[20px]">
                    home
                </i>
                Tab 1
            </button>
        </li>
        <li class="nav-item inline-block ltr:mr-[20px] rtl:ml-[20px]">
            <button type="button" data-tab="iconTab2" class="nav-link flex items-center gap-[4px] pb-[8px] transition-all relative font-medium">
                <i class="material-symbols-outlined !text-[20px]">
                    home
                </i>
                Tab 2
            </button>
        </li>
        <li class="nav-item inline-block ltr:mr-[20px] rtl:ml-[20px]">
            <button type="button" data-tab="iconTab3" class="nav-link flex items-center gap-[4px] pb-[8px] transition-all relative font-medium">
                <i class="material-symbols-outlined !text-[20px]">
                    home
                </i>
                Tab 3
            </button>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="iconTab1">
            <p>
                Icon Tab 1 - Hello World!
            </p>
        </div>
        <div class="tab-pane" id="iconTab2">
            <p>
                Icon Tab 2 - Hello World!
            </p>
        </div>
        <div class="tab-pane" id="iconTab3">
            <p>
                Icon Tab 3 - Hello World!
            </p>
        </div>
    </div>
</div>