scrollbar for tabs

package.json

@@ -27,6 +27,7 @@
     "eslint-plugin-react-refresh": "^0.4.7",
     "postcss": "^8.4.38",
     "prettier": "^3.3.2",
+    "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.2.2",
     "vite": "^5.3.1"

src/components/Layout/Navbar.tsx

@@ -26,7 +26,7 @@ export function Navbar() {
           <button className="tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[clamp(16px,16px+(100vw-768px)/832*2,18px)] mobile:max-tablet-figma:text-base font-semibold text-[#ffffff] bg-gradient-to-r from-[#798FFF] to-[#D375FF] border-x border-[#3D425C] tablet:block mobile:hidden px-10">
             Оставить заявку
           </button>
-          {!menuOpen && <LangToggler lang={lang} />}
+          <LangToggler lang={lang} />
           <button
             onClick={() => setMenuOpen(prev => !prev)}
             className="px-6 py-5 min-[1350px]:hidden mobile:block border-[#3D425C] mobile:max-tablet:border-l"

src/components/Main/Availables.tsx

@@ -15,7 +15,8 @@ export function Availables() {
         >
           Многопользовательский
         </span>
-        <br /> режим обучения
+        <br />
+        режим обучения
       </Title>
       <div className="flex mobile:max-desktop:flex-col items-start desktop:w-fit gap-x-4 tablet:pt-5 tablet:border-t border-[#3D425C]">
         <MiniTitle text="возможности" />

src/components/Main/Products.tsx

@@ -23,7 +23,7 @@ export function Products() {
         </span>
       </Title>
       <MiniTitle className="desktop:hidden" text="Продукты" />
-      <div className="flex gax-y-4 bg-[#3D425C4D] bg-opacity-3 rounded-xl p-1 mb-2 w-fit max-w-full overflow-auto [-webkit-scroll-bar:_background-color:_red] tablet:max-desktop:mt-[13px] mobile:mt-6 mobile:max-[912px]:[-webkit-mask-image:_linear-gradient(to_left,rgba(32,35,50,0)_0%,rgba(32,35,50,1)_20%)]">
+      <div className="flex gax-y-4 bg-[#3D425C4D] bg-opacity-3 scrollbar scrollbar-track-inherit scrollbar-thumb-rounded-[4px] scrollbar-h-1 scrollbar-thumb-[#798fff] rounded-xl p-1 mb-2 w-fit max-w-full overflow-auto tablet:max-desktop:mt-[13px] mobile:mt-6 mobile:max-[912px]:[-webkit-mask-image:_linear-gradient(to_left,rgba(32,35,50,0)_0%,rgba(32,35,50,1)_20%)]">
         <TabButton
           className={curTab === 0 ? 'bg-[#798FFF]' : ''}
           onClick={() => setCurTab(0)}
@@ -231,8 +231,9 @@ function SimulatorsTab() {
             }}
           >
             {width < 640 ? (
-              order.map(src => (
+              order.map((src, index) => (
                 <img
+                  key={index}
                   src={src}
                   className="rounded-lg mobile:max-tablet:min-w-[clamp(280px,100vw-80px,559px)] object-cover"
                   alt=""

src/components/Main/Projects.tsx

@@ -154,7 +154,7 @@ function Slider({
         </button>
         <div className="h-1 bg-[#3D425C] w-full">
           <div
-            className="bg-[#ffffff] h-1 duration-400"
+            className="bg-[#ffffff] h-1 duration-500"
             style={{ width: `${((slide + 1) / 3) * 100}%` }}
           />
         </div>

tailwind.config.js

@@ -1,31 +1,30 @@
+import tailwindScrollbar from 'tailwind-scrollbar';
+
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
   theme: {
     extend: {
       screens: {
-        "mobile": '360px',
+        mobile: '360px',
-        "tablet": '640px',
+        tablet: '640px',
-        "tablet-figma": '768px',
+        'tablet-figma': '768px',
-        "desktop": '1024px',
+        desktop: '1024px',
-        "desktop-figma": '1600px',
+        'desktop-figma': '1600px',
       },
       colors: {
-        "text-gradient": '-webkit-linear-gradient(#798FFF, #D375FF)'
+        'text-gradient': '-webkit-linear-gradient(#798FFF, #D375FF)',
-      },      animation: {
+      },
+      animation: {
         'infinite-scroll': 'infinite-scroll 25s linear infinite',
       },
       keyframes: {
         'infinite-scroll': {
           from: { transform: 'translateX(0)' },
           to: { transform: 'translateX(-100%)' },
-        }
-      }   
         },
       },
-  plugins: [],
+    },
-}
+  },
-
+  plugins: [tailwindScrollbar({ nocompatible: true })],
+};

vite.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react'
+import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+});

yarn.lock

@@ -1992,6 +1992,11 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+tailwind-scrollbar@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/tailwind-scrollbar/-/tailwind-scrollbar-3.1.0.tgz#ff7596407b6da5209261d8ff03860ab9206a59e3"
+  integrity sha512-pmrtDIZeHyu2idTejfV59SbaJyvp1VRjYxAjZBH0jnyrPRo6HL1kD5Glz8VPagasqr6oAx6M05+Tuw429Z8jxg==
+
 tailwindcss@^3.4.4:
   version "3.4.4"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.4.tgz#351d932273e6abfa75ce7d226b5bf3a6cb257c05"