update

src/App.js

@@ -68,7 +68,7 @@ function App() {
         {/* <BlogDesign5 /> */}
         {/* <BlogDesign6 /> */}
         {/* <ContactInfoSection /> */}
-        <Testttt />
+        {/* <Testttt /> */}
         {/* <Design2D /> */}
         {/* <Features /> */}
         {/* <Feedback /> */}

src/components/ReactTable3/TabBar.js

@@ -0,0 +1,84 @@
+import React from "react";
+
+const TabBar = () => {
+  const tabs = [
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+  ];
+  return (
+    <ul
+      className="tabbar flex no-scrollbar border-b border-gray-200 dark:border-gray-700 overflow-x-scroll scrolling-touch"
+      onMouseDown={(e) => {
+        const slider = window.document.querySelector(".tabbar");
+        window.isDown = true;
+        window.startX = e.pageX - slider.offsetLeft;
+        window.scrollLeft = slider.scrollLeft;
+      }}
+      onMouseLeave={(e) => {
+        window.isDown = false;
+      }}
+      onMouseUp={(e) => {
+        window.isDown = false;
+      }}
+      onMouseMove={(e) => {
+        const slider = window.document.querySelector(".tabbar");
+        if (!window.isDown) return;
+        e.preventDefault();
+        const x = e.pageX - slider.offsetLeft;
+        const walk = (x - window.startX) * 1;
+        slider.scrollLeft = window.scrollLeft - walk;
+      }}
+    >
+      {tabs.map((el) => (
+        <li className="mr-2 ">
+          <span
+            onClick={(e) => {
+              if (window.isDown) return e.preventDefault();
+              ///do here
+            }}
+            aria-current="page"
+            className="inline-block py-4 px-4 text-sm font-medium text-center text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500"
+          >
+            <span className="p-2">
+              {el} <span className="p-2">x</span>
+            </span>
+          </span>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default TabBar;