Add tabs to lcp-ui js and css

assets/js/lcp-ui.js

@@ -31,4 +31,22 @@ document.addEventListener('DOMContentLoaded', function () {
 
 });
 
-  
+document.addEventListener('DOMContentLoaded', function () {
+    const tabs = document.querySelectorAll('.tab-link');
+    const panes = document.querySelectorAll('.tab-pane');
+
+    tabs.forEach(tab => {
+      tab.addEventListener('click', function (event) {
+        event.preventDefault();
+
+        // Remove active class from all tabs and panes
+        tabs.forEach(link => link.classList.remove('active'));
+        panes.forEach(pane => pane.classList.remove('active'));
+
+        // Add active class to the clicked tab and its corresponding pane
+        tab.classList.add('active');
+        const targetPane = document.querySelector(tab.getAttribute('href'));
+        targetPane.classList.add('active');
+      });
+    });
+  });