JSFiddle - React, Tailwind, and code Playground

HTML

<html>

   <head>
   <link
  rel="stylesheet"
  href="https://unpkg.com/@freshworks/crayons@v3/css/crayons-min.css"
/>

  <script
  type="module"
  src="https://unpkg.com/@freshworks/crayons@v3/dist/crayons/crayons.esm.js"
></script>
<script
  nomodule
  src="https://unpkg.com/@freshworks/crayons@v3/dist/crayons/crayons.js"
></script>

   </head>

   <body>

     <fw-tabs id="settingsPage">
       <fw-tab slot="tab" id="tab1" panel="freshdesk">Freshdesk configuration</fw-tab>
       <fw-tab slot="tab" id="tab2" panel="mandatory">Mandatory Fields Configuration</fw-tab>
       <fw-tab slot="tab" id="tab3" panel="mappingRule">Mapping Rule Configuration</fw-tab>
       <fw-tab-panel name="freshdesk">
         desk
       </fw-tab-panel>
       <fw-tab-panel name="mandatory">
         mandatory
       </fw-tab-panel>
       <fw-tab-panel name="mappingRule">
         mapping rule
       </fw-tab-panel>
     </fw-tabs>


     <button id="enable" onclick="onbtnCLick()">
        enable
     </button>
     
     <button id="disable" onclick="ondisableClick()">
        enable
     </button>
   </body>

 </html>

JavaScript

/* document.getElementbyId('disable').addEventListner('on') */

function onbtnCLick() {
document.getElementById("settingsPage").querySelector('fw-tab[panel="freshdesk"]').setAttribute("disabled", false);  
}

function ondisableClick() {
document.getElementById("settingsPage").querySelector('fw-tab[panel="freshdesk"]').setAttribute("disabled", true);  
}