Stylish Tab Navigation - Copy this Html, Tailwind Component to your project

<! Tailwind CSS > <script src="https://cdn.tailwindcss.com"></script> <! Remix Icon Font > <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet"> <! Tailwind Configuration > <script> tailwind.config = { darkMode: "class", theme: { extend: { colors: { border: "hsl(var( border))", background: "hsl(var( background))", foreground: "hsl(var( foreground))", primary: { DEFAULT: "hsl(var( primary))", foreground: "hsl(var( primary foreground))", }, muted: { DEFAULT: "hsl(var( muted))", foreground: "hsl(var( muted foreground))", }, }, fontFamily: { sans: ['Poppins', 'Arial', 'sans serif'], // Add fallback fonts }, } } } </script> <! Custom Fonts > <style> /* Import Google Fonts with additional weights */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); /* Light Mode Variables */ :root { background: 0 0% 100%; foreground: 0 0% 3.9%; card header: 0 0% 90%; card header foreground: 0 0% 3.9%; card: 0 0% 100%; card foreground: 0 0% 3.9%; popover: 0 0% 100%; popover foreground: 0 0% 3.9%; primary: 222.2 47.4% 11.2%; primary foreground: 0 0% 98%; secondary: 0 0% 96.1%; secondary foreground: 0 0% 9%; muted: 0 0% 96.1%; muted foreground: 0 0% 45.1%; accent: 0 0% 96.1%; accent foreground: 0 0% 9%; destructive: 0 84.2% 60.2%; destructive foreground: 0 0% 98%; border: 0 0% 89.8%; input: 0 0% 89.8%; ring: 0 0% 3.9%; } /* Dark Mode Variables */ .dark { background: 0 0% 3.9%; foreground: 0 0% 98%; card header: 0 0% 3.9%; card header foreground: 0 0% 98%; card: 0 0% 3.9%; card foreground: 0 0% 98%; popover: 0 0% 3.9%; popover foreground: 0 0% 98%; primary: 0 0% 98%; primary foreground: 0 0% 9%; secondary: 0 0% 14.9%; secondary foreground: 0 0% 98%; muted: 0 0% 14.9%; muted foreground: 0 0% 63.9%; accent: 0 0% 14.9%; accent foreground: 0 0% 98%; destructive: 0 62.8% 30.6%; destructive foreground: 0 0% 98%; border: 0 0% 14.9%; input: 0 0% 14.9%; ring: 0 0% 83.1%; } /* Global Font */ body { font family: 'Poppins', sans serif; }<div class="border b border [hsl(var( border))]"> <nav class=" mb px flex space x 8" aria label="Tabs"> <button type="button" class="tab button border transparent text [hsl(var( muted foreground))] hover:text [hsl(var( foreground))] hover:border [hsl(var( border))] whitespace nowrap py 4 px 1 border b 2 font medium text sm border [hsl(var( primary))] text [hsl(var( primary))]" data tab="general"> General </button> <button type="button" class="tab button border transparent text [hsl(var( muted foreground))] hover:text [hsl(var( foreground))] hover:border [hsl(var( border))] whitespace nowrap py 4 px 1 border b 2 font medium text sm" data tab="inventory"> Inventory </button> </nav> </div> i want beautiful tabs background and color and animation border match with my theme and color