From 99ac5c42b224360272aa665b7b7d7a3741a4390e Mon Sep 17 00:00:00 2001
From: Sibiraj <20282546+sibiraj-s@users.noreply.github.com>
Date: Fri, 3 Nov 2023 16:02:42 +0530
Subject: [PATCH] docs: cleanup styles

---
 docs/App.tsx                     |   2 +-
 docs/BrowserDetector.tsx         |  12 +-
 docs/Nav.tsx                     |   4 +-
 docs/UserAgentParser.tsx         |  18 +-
 docs/index.scss                  | 127 +---------
 docs/index.tsx                   |   2 +
 package-lock.json                | 386 +++++++++++++++++++++++++++++++
 package.json                     |   4 +
 postcss.config.js                |   6 +
 tailwind.config.ts               |  13 ++
 vite.config.js => vite.config.ts |   0
 11 files changed, 433 insertions(+), 141 deletions(-)
 create mode 100644 postcss.config.js
 create mode 100644 tailwind.config.ts
 rename vite.config.js => vite.config.ts (100%)

diff --git a/docs/App.tsx b/docs/App.tsx
index 0344327..9a2f4e4 100644
--- a/docs/App.tsx
+++ b/docs/App.tsx
@@ -9,7 +9,7 @@ const App = (): JSX.Element => {
   return (
     <HashRouter>
       <Nav />
-      <div className='container'>
+      <div className='relative h-screen p-4 flex flex-col'>
         <Routes>
           <Route path='/' element={<BrowserDetector />} />
           <Route path='/ua-parser' element={<UserAgentParser />} />
diff --git a/docs/BrowserDetector.tsx b/docs/BrowserDetector.tsx
index 47dea98..123f3fd 100644
--- a/docs/BrowserDetector.tsx
+++ b/docs/BrowserDetector.tsx
@@ -9,21 +9,21 @@ const BrowserDetectorComponent = (): JSX.Element => {
 
   return (
     <React.Fragment>
-      <div className='content justify-center browser-detector'>
+      <div className='m-auto text-center'>
         {isKnownBrowser
           && <React.Fragment>
-            <p className='text'>
+            <p className='text-4xl text-center mb-4'>
               You are viewing this page in -
-              <span className='browser-name'>{'{'}{parsedUA.name as string}{'}'}</span>
+              <span className='text-red-600'>{'{'}{parsedUA.name as string}{'}'}</span>
             </p>
-            <p className='sub-text'>{parsedUA.platform as string}, v{parsedUA.version}</p>
+            <p className='whitespace-nowrap text-red-700 text-lg'>{parsedUA.platform as string}, v{parsedUA.version}</p>
           </React.Fragment>
         }
         {!isKnownBrowser
-          && <p className='text'><span className='browser-name'>{'{ Unknown Browser }'}</span></p>
+          && <p className='text-4xl text-red-600'>{'{ Unknown Browser }'}</p>
         }
       </div>
-      <footer className='footer'>BrowserDetector: v{BrowserDetector.VERSION}</footer>
+      <footer className='absolute bottom-2 left-4 text-sm'>BrowserDetector: v{BrowserDetector.VERSION}</footer>
     </React.Fragment>
   );
 };
diff --git a/docs/Nav.tsx b/docs/Nav.tsx
index ebf9263..a801109 100644
--- a/docs/Nav.tsx
+++ b/docs/Nav.tsx
@@ -19,8 +19,8 @@ const Nav = (): JSX.Element => {
   }, [location]);
 
   return (
-    <nav className='nav'>
-      <Link className='text-crimson' to={goToPath.to}>{goToPath.name}</Link>
+    <nav className='flex justify-end p-4 fixed w-full z-10'>
+      <Link className='text-red-500 underline underline-offset-2' to={goToPath.to}>{goToPath.name}</Link>
     </nav>
   );
 };
diff --git a/docs/UserAgentParser.tsx b/docs/UserAgentParser.tsx
index db701ac..24e1a61 100644
--- a/docs/UserAgentParser.tsx
+++ b/docs/UserAgentParser.tsx
@@ -33,15 +33,15 @@ const UserAgentParserComponent = (): JSX.Element => {
   };
 
   return (
-    <div className='content useragent-parser'>
-      <p className='ua-text'><span className='text-crimson'>{'{'}UserAgent{'}'}</span> Parser</p>
-      <input type='text' className='ua-input' placeholder='Enter useragent string' onChange={handleChange} />
-      <div className='parsed-ua'>
+    <div className='max-w-2xl m-auto'>
+      <p className='text-center text-4xl mb-4'><span className='text-red-600'>{'{'}UserAgent{'}'}</span> Parser</p>
+      <input type='text' className='w-full bg-transparent outline-none px-2 py-3 border-b border-gray-500' placeholder='Enter useragent string' onChange={handleChange} />
+      <div className='bg-white p-2 rounded-md w-full mt-8 text-sm'>
         {isKnownBrowser
-          && <div className='current-ua'>
+          && <div>
             <b>Current UserAgent:</b> {parsedUA.userAgent}
-            <div className='parsed-results'>
-              <p className='parsed-results__title'>Parsed Results:</p>
+            <div className='mt-6'>
+              <p className='font-medium underline mb-2'>Parsed Results:</p>
               <table>
                 <tbody>
                   {uaDisplayTable.map(({ key, name }: DisplayTable) => <tr key={`uaKey__${key}`}><td>{name}</td><td>: {parsedUA[key]?.toString()}</td></tr>)}
@@ -51,8 +51,8 @@ const UserAgentParserComponent = (): JSX.Element => {
           </div>
         }
         {!isKnownBrowser
-          && <div className='current-ua'>
-            <span className='text-crimson'>Error: Unknown browser or Invalid UserAgent</span>
+          && <div>
+            <span className='text-red-600'>Error: Unknown browser or Invalid UserAgent</span>
           </div>
         }
       </div>
diff --git a/docs/index.scss b/docs/index.scss
index 5bb3173..b7f72fe 100644
--- a/docs/index.scss
+++ b/docs/index.scss
@@ -1,131 +1,12 @@
-@import url("https://fonts.googleapis.com/css?family=Inconsolata:400,700");
-
-$crimson: #dc143c;
-
-*,
-:after,
-:before {
-  box-sizing: border-box;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 html,
 body {
-  font-size: 16px;
-  font-family: "Inconsolata", monospace;
-}
-
-@media only screen and (max-width: 600px) {
-  html,
-  body {
-    font-size: 14px;
-  }
-}
-
-.text-crimson {
-  color: $crimson;
+  font-family: "Inconsolata Variable", monospace;
 }
 
 body {
-  margin: 0;
-  padding: 0;
   background: url("./assets/project-paper.png");
 }
-
-.nav {
-  display: flex;
-  justify-content: flex-end;
-  padding: 1rem;
-  position: fixed;
-  width: 100%;
-  z-index: 1;
-}
-
-.container {
-  position: relative;
-  height: 100vh;
-  padding: 1rem;
-
-  .content {
-    height: 100%;
-
-    &.justify-center {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-direction: column;
-    }
-
-    &.browser-detector {
-      .text {
-        font-size: 2.5rem;
-        text-align: center;
-        margin: 0;
-
-        .browser-name {
-          color: $crimson;
-          white-space: nowrap;
-        }
-      }
-
-      .sub-text {
-        font-size: 1.2rem;
-      }
-    }
-
-    &.useragent-parser {
-      padding-top: 5rem;
-      max-width: 700px;
-      margin: auto;
-      font-size: 0.9rem;
-
-      .ua-text {
-        font-size: 2rem;
-        margin-bottom: 1rem;
-        text-align: center;
-      }
-
-      .ua-input {
-        width: 100%;
-        padding: 0.75rem 0.5rem;
-        border: transparent;
-        border-bottom: 1px solid gray;
-        background: transparent;
-        font-size: 1rem;
-        margin-bottom: 2rem;
-
-        &:focus {
-          outline: none;
-        }
-      }
-
-      .parsed-ua {
-        width: 100%;
-        background-color: white;
-        padding: 0.5rem;
-        border-radius: 0.25rem;
-
-        .parsed-results {
-          margin-top: 1.5rem;
-        }
-
-        .parsed-results__title {
-          text-decoration: underline;
-          margin-bottom: 0.2rem;
-          margin-left: 2px;
-          font-weight: 700;
-        }
-      }
-    }
-  }
-
-  .footer {
-    position: absolute;
-    bottom: 0.5rem;
-    left: 1rem;
-    font-size: 0.85rem;
-
-    @media only screen and (max-height: 300px) {
-      display: none;
-    }
-  }
-}
diff --git a/docs/index.tsx b/docs/index.tsx
index c18f2a5..24f871b 100644
--- a/docs/index.tsx
+++ b/docs/index.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
+import '@fontsource-variable/inconsolata';
+
 import App from './App';
 
 import './index.scss';
diff --git a/package-lock.json b/package-lock.json
index e690805..4494715 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,8 +17,10 @@
       "devDependencies": {
         "@commitlint/cli": "^18.2.0",
         "@commitlint/config-conventional": "^18.1.0",
+        "@fontsource-variable/inconsolata": "^5.0.15",
         "@types/react": "^18.2.34",
         "@types/react-dom": "^18.2.14",
+        "autoprefixer": "^10.4.16",
         "eslint": "^8.52.0",
         "eslint-config-pegasus": "^5.0.0",
         "eslint-plugin-react": "^7.33.2",
@@ -27,11 +29,13 @@
         "husky": "^8.0.3",
         "is-ci": "^3.0.1",
         "lint-staged": "^15.0.2",
+        "postcss": "^8.4.31",
         "publint": "^0.2.5",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.18.0",
         "sass": "^1.69.5",
+        "tailwindcss": "^3.3.5",
         "tsup": "^7.2.0",
         "typescript": "^5.2.2",
         "vite": "^4.5.0",
@@ -50,6 +54,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.22.13",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz",
@@ -902,6 +918,12 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fontsource-variable/inconsolata": {
+      "version": "5.0.15",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/inconsolata/-/inconsolata-5.0.15.tgz",
+      "integrity": "sha512-uhkrVQDsG4HVW/nXfOFPhQVZ8zQ8h+84nz9c0MO+xxgJv3Xay+gmo2ytq3sSwXAFXLYXM5Hnd/t9ZS+NOHiccA==",
+      "dev": true
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.13",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
@@ -1531,6 +1553,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -1681,6 +1709,43 @@
         "has-symbols": "^1.0.3"
       }
     },
+    "node_modules/autoprefixer": {
+      "version": "10.4.16",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
+      "integrity": "sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "browserslist": "^4.21.10",
+        "caniuse-lite": "^1.0.30001538",
+        "fraction.js": "^4.3.6",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
@@ -1730,6 +1795,38 @@
         "node": ">=8"
       }
     },
+    "node_modules/browserslist": {
+      "version": "4.22.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.1.tgz",
+      "integrity": "sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001541",
+        "electron-to-chromium": "^1.4.535",
+        "node-releases": "^2.0.13",
+        "update-browserslist-db": "^1.0.13"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
     "node_modules/bundle-require": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/bundle-require/-/bundle-require-4.0.2.tgz",
@@ -1786,6 +1883,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/camelcase-keys": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
@@ -1803,6 +1909,26 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001559",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001559.tgz",
+      "integrity": "sha512-cPiMKZgqgkg5LY3/ntGeLFUpi6tzddBNS58A4tnTgQw1zON7u2sZMU7SzOeVH4tj20++9ggL+V6FDOFMTaFFYA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ]
+    },
     "node_modules/chai": {
       "version": "4.3.10",
       "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.10.tgz",
@@ -2154,6 +2280,18 @@
       "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
       "dev": true
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
@@ -2269,6 +2407,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true
+    },
     "node_modules/diff-sequences": {
       "version": "29.6.3",
       "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
@@ -2290,6 +2434,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -2320,6 +2470,12 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
       "dev": true
     },
+    "node_modules/electron-to-chromium": {
+      "version": "1.4.575",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.575.tgz",
+      "integrity": "sha512-kY2BGyvgAHiX899oF6xLXSIf99bAvvdPhDoJwG77nxCSyWYuRH6e9a9a3gpXBvCs6lj4dQZJkfnW2hdKWHEISg==",
+      "dev": true
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -2927,6 +3083,19 @@
         "is-callable": "^1.1.3"
       }
     },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "node_modules/fs-extra": {
       "version": "11.1.1",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
@@ -4692,6 +4861,12 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
+    "node_modules/node-releases": {
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
+      "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==",
+      "dev": true
+    },
     "node_modules/normalize-package-data": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
@@ -4716,6 +4891,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/npm-bundled": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-2.0.1.tgz",
@@ -4776,6 +4960,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
@@ -5070,6 +5263,15 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/pirates": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
@@ -5118,6 +5320,59 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-import/node_modules/resolve": {
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+      "dev": true,
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
     "node_modules/postcss-load-config": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
@@ -5147,6 +5402,44 @@
         }
       }
     },
+    "node_modules/postcss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
+      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.11"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.13",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
+      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -5320,6 +5613,15 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
     "node_modules/read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -6261,6 +6563,60 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tailwindcss": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.5.tgz",
+      "integrity": "sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA==",
+      "dev": true,
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.0",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.19.1",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/resolve": {
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+      "dev": true,
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/text-extensions": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/text-extensions/-/text-extensions-2.4.0.tgz",
@@ -6588,6 +6944,36 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/update-browserslist-db": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
+      "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "escalade": "^3.1.1",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
diff --git a/package.json b/package.json
index dc20245..547e795 100644
--- a/package.json
+++ b/package.json
@@ -52,8 +52,10 @@
   "devDependencies": {
     "@commitlint/cli": "^18.2.0",
     "@commitlint/config-conventional": "^18.1.0",
+    "@fontsource-variable/inconsolata": "^5.0.15",
     "@types/react": "^18.2.34",
     "@types/react-dom": "^18.2.14",
+    "autoprefixer": "^10.4.16",
     "eslint": "^8.52.0",
     "eslint-config-pegasus": "^5.0.0",
     "eslint-plugin-react": "^7.33.2",
@@ -62,11 +64,13 @@
     "husky": "^8.0.3",
     "is-ci": "^3.0.1",
     "lint-staged": "^15.0.2",
+    "postcss": "^8.4.31",
     "publint": "^0.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.18.0",
     "sass": "^1.69.5",
+    "tailwindcss": "^3.3.5",
     "tsup": "^7.2.0",
     "typescript": "^5.2.2",
     "vite": "^4.5.0",
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..2aa7205
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..6fdeec7
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,13 @@
+import { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: [
+    './docs/**/*.{html,js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+
+export default config;
diff --git a/vite.config.js b/vite.config.ts
similarity index 100%
rename from vite.config.js
rename to vite.config.ts