From 575e6999d24d023c109a01f5801ad12acf33d85f Mon Sep 17 00:00:00 2001
From: Anton Medvedev <anton@medv.io>
Date: Thu, 12 Dec 2024 22:20:19 +0100
Subject: [PATCH] wip

---
 finder.js                               |   75 +-
 finder.ts                               |   96 +-
 package.json                            |    8 +
 tests/__snapshots__/finder.test.js.snap |    6 +
 tests/finder.test.js                    |   65 +-
 tests/pages/deployer.org.html           |  665 +++--
 tests/pages/google.com.html             | 3281 +++++++++++++++++++++++
 tests/pages/stripe.com.html             | 3094 ++++++++++++---------
 tests/pages/tailwindcss.html            | 3103 ++++++++++++++-------
 tsconfig.json                           |    5 +-
 10 files changed, 7772 insertions(+), 2626 deletions(-)
 create mode 100644 tests/pages/google.com.html

diff --git a/finder.js b/finder.js
index 2a7eab5..061c02d 100644
--- a/finder.js
+++ b/finder.js
@@ -14,7 +14,7 @@ export function finder(input, options) {
         idName: wordLike,
         className: wordLike,
         tagName: (name) => true,
-        attr: (name, value) => false,
+        attr: (name, value) => wordLike(name) && wordLike(value),
         seedMinLength: 2,
         optimizedMinLength: 2,
         timeoutMs: 1000,
@@ -26,7 +26,7 @@ export function finder(input, options) {
     let foundPath;
     let current = input;
     let i = 0;
-    while (current) {
+    while (current && current !== rootDocument) {
         const level = tie(current, config);
         for (let node of level) {
             node.level = i;
@@ -36,7 +36,7 @@ export function finder(input, options) {
         i++;
         paths.push(...combinations(stack));
         if (i >= config.seedMinLength) {
-            foundPath = search(paths, config, rootDocument, startTime);
+            foundPath = search(paths, config, input, rootDocument, startTime);
             if (foundPath) {
                 break;
             }
@@ -44,27 +44,43 @@ export function finder(input, options) {
         }
     }
     if (paths.length > 0) {
-        foundPath = search(paths, config, rootDocument, startTime);
+        foundPath = search(paths, config, input, rootDocument, startTime);
     }
     if (!foundPath) {
         throw new Error(`Selector was not found.`);
     }
-    const optimized = [...optimize(foundPath, input, config, rootDocument, startTime)];
+    const optimized = [
+        ...optimize(foundPath, input, config, rootDocument, startTime),
+    ];
     optimized.sort(byPenalty);
     if (optimized.length > 0) {
         return selector(optimized[0]);
     }
     return selector(foundPath);
 }
-function search(paths, config, rootDocument, startTime) {
+export function wordLike(name) {
+    if (/^[a-z0-9\-]{3,}$/i.test(name)) {
+        const words = name.split(/-|[A-Z]/);
+        for (const word of words) {
+            if (word.length <= 2) {
+                return false;
+            }
+            if (/[^aeiou]{4,}/i.test(word)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    return false;
+}
+function search(paths, config, input, rootDocument, startTime) {
     paths.sort(byPenalty);
     for (const candidate of paths) {
         const elapsedTimeMs = new Date().getTime() - startTime.getTime();
         if (elapsedTimeMs > config.timeoutMs) {
-            for (let i = paths.length - 1; i >= paths.length - 10 && i >= 0; i--) {
-                if (unique(paths[i], rootDocument)) {
-                    return paths[i];
-                }
+            const path = fallbackToNthChild(input, rootDocument);
+            if (path) {
+                return path;
             }
             throw new Error(`Timeout: Can't find a unique selector after ${elapsedTimeMs}ms`);
         }
@@ -73,20 +89,26 @@ function search(paths, config, rootDocument, startTime) {
         }
     }
 }
-function wordLike(name) {
-    if (/^[a-z0-9\-]{3,}$/i.test(name)) {
-        const words = name.split(/-|[A-Z]/);
-        for (const word of words) {
-            if (word.length <= 2) {
-                return false;
-            }
-            if (/[^aeiou]{4,}/i.test(word)) {
-                return false;
-            }
+function fallbackToNthChild(input, rootDocument) {
+    let i = 0;
+    let current = input;
+    const path = [];
+    while (current && current !== rootDocument) {
+        const index = indexOf(current);
+        if (index === undefined) {
+            return;
         }
-        return true;
+        path.push({
+            name: `:nth-child(${index})`,
+            penalty: 0,
+            level: i,
+        });
+        current = current.parentElement;
+        i++;
+    }
+    if (unique(path, rootDocument)) {
+        return path;
     }
-    return false;
 }
 function tie(element, config) {
     const level = [];
@@ -170,9 +192,9 @@ function indexOf(input, tagName) {
     }
     let i = 0;
     while (child) {
-        if (child.nodeType === Node.ELEMENT_NODE
-            && (tagName === undefined
-                || child.tagName.toLowerCase() === tagName)) {
+        if (child.nodeType === Node.ELEMENT_NODE &&
+            (tagName === undefined ||
+                child.tagName.toLowerCase() === tagName)) {
             i++;
         }
         if (child === input) {
@@ -221,7 +243,8 @@ function* optimize(path, input, config, rootDocument, startTime) {
             }
             const newPath = [...path];
             newPath.splice(i, 1);
-            if (unique(newPath, rootDocument) && rootDocument.querySelector(selector(newPath)) === input) {
+            if (unique(newPath, rootDocument) &&
+                rootDocument.querySelector(selector(newPath)) === input) {
                 yield newPath;
                 yield* optimize(newPath, input, config, rootDocument, startTime);
             }
diff --git a/finder.ts b/finder.ts
index d131c16..4762a7f 100644
--- a/finder.ts
+++ b/finder.ts
@@ -32,13 +32,13 @@ export function finder(input: Element, options?: Partial<Options>): string {
     idName: wordLike,
     className: wordLike,
     tagName: (name: string) => true,
-    attr: (name: string, value: string) => false,
+    attr: (name: string, value: string) => wordLike(name) && wordLike(value),
     seedMinLength: 2,
     optimizedMinLength: 2,
     timeoutMs: 1000,
   }
 
-  const config = {...defaults, ...options}
+  const config = { ...defaults, ...options }
   const rootDocument = findRootDocument(config.root, defaults)
 
   const stack: Knot[][] = []
@@ -46,7 +46,7 @@ export function finder(input: Element, options?: Partial<Options>): string {
   let foundPath: Knot[] | undefined
   let current: Element | null = input
   let i = 0
-  while (current) {
+  while (current && current !== rootDocument) {
     const level = tie(current, config)
     for (let node of level) {
       node.level = i
@@ -58,7 +58,7 @@ export function finder(input: Element, options?: Partial<Options>): string {
     paths.push(...combinations(stack))
 
     if (i >= config.seedMinLength) {
-      foundPath = search(paths, config, rootDocument, startTime)
+      foundPath = search(paths, config, input, rootDocument, startTime)
       if (foundPath) {
         break
       }
@@ -67,14 +67,16 @@ export function finder(input: Element, options?: Partial<Options>): string {
   }
 
   if (paths.length > 0) {
-    foundPath = search(paths, config, rootDocument, startTime)
+    foundPath = search(paths, config, input, rootDocument, startTime)
   }
 
   if (!foundPath) {
     throw new Error(`Selector was not found.`)
   }
 
-  const optimized = [...optimize(foundPath, input, config, rootDocument, startTime)]
+  const optimized = [
+    ...optimize(foundPath, input, config, rootDocument, startTime),
+  ]
   optimized.sort(byPenalty)
   if (optimized.length > 0) {
     return selector(optimized[0])
@@ -82,17 +84,40 @@ export function finder(input: Element, options?: Partial<Options>): string {
   return selector(foundPath)
 }
 
-function search(paths: Knot[][], config: Options, rootDocument: Element | Document, startTime: Date) {
+export function wordLike(name: string): boolean {
+  if (/^[a-z0-9\-]{3,}$/i.test(name)) {
+    const words = name.split(/-|[A-Z]/)
+    for (const word of words) {
+      if (word.length <= 2) {
+        return false
+      }
+      if (/[^aeiou]{4,}/i.test(word)) {
+        return false
+      }
+    }
+    return true
+  }
+  return false
+}
+
+function search(
+  paths: Knot[][],
+  config: Options,
+  input: Element,
+  rootDocument: Element | Document,
+  startTime: Date,
+) {
   paths.sort(byPenalty)
   for (const candidate of paths) {
     const elapsedTimeMs = new Date().getTime() - startTime.getTime()
     if (elapsedTimeMs > config.timeoutMs) {
-      for (let i = paths.length - 1; i >= paths.length - 10 && i >= 0; i--) {
-        if (unique(paths[i], rootDocument)) {
-          return paths[i]
-        }
+      const path = fallbackToNthChild(input, rootDocument)
+      if (path) {
+        return path
       }
-      throw new Error(`Timeout: Can't find a unique selector after ${elapsedTimeMs}ms`)
+      throw new Error(
+        `Timeout: Can't find a unique selector after ${elapsedTimeMs}ms`,
+      )
     }
     if (unique(candidate, rootDocument)) {
       return candidate
@@ -100,20 +125,26 @@ function search(paths: Knot[][], config: Options, rootDocument: Element | Docume
   }
 }
 
-function wordLike(name: string) {
-  if (/^[a-z0-9\-]{3,}$/i.test(name)) {
-    const words = name.split(/-|[A-Z]/)
-    for (const word of words) {
-      if (word.length <= 2) {
-        return false
-      }
-      if (/[^aeiou]{4,}/i.test(word)) {
-        return false
-      }
+function fallbackToNthChild(input: Element, rootDocument: Element | Document) {
+  let i = 0
+  let current: Element | null = input
+  const path: Knot[] = []
+  while (current && current !== rootDocument) {
+    const index = indexOf(current)
+    if (index === undefined) {
+      return
     }
-    return true
+    path.push({
+      name: `:nth-child(${index})`,
+      penalty: 0,
+      level: i,
+    })
+    current = current.parentElement
+    i++
+  }
+  if (unique(path, rootDocument)) {
+    return path
   }
-  return false
 }
 
 function tie(element: Element, config: Options): Knot[] {
@@ -209,11 +240,9 @@ function indexOf(input: Element, tagName?: string): number | undefined {
   let i = 0
   while (child) {
     if (
-      child.nodeType === Node.ELEMENT_NODE
-      && (
-        tagName === undefined
-        || (child as Element).tagName.toLowerCase() === tagName
-      )
+      child.nodeType === Node.ELEMENT_NODE &&
+      (tagName === undefined ||
+        (child as Element).tagName.toLowerCase() === tagName)
     ) {
       i++
     }
@@ -249,9 +278,7 @@ function unique(path: Knot[], rootDocument: Element | Document) {
   const css = selector(path)
   switch (rootDocument.querySelectorAll(css).length) {
     case 0:
-      throw new Error(
-        `Can't select any node with this selector: ${css}`,
-      )
+      throw new Error(`Can't select any node with this selector: ${css}`)
     case 1:
       return true
     default:
@@ -274,7 +301,10 @@ function* optimize(
       }
       const newPath = [...path]
       newPath.splice(i, 1)
-      if (unique(newPath, rootDocument) && rootDocument.querySelector(selector(newPath)) === input) {
+      if (
+        unique(newPath, rootDocument) &&
+        rootDocument.querySelector(selector(newPath)) === input
+      ) {
         yield newPath
         yield* optimize(newPath, input, config, rootDocument, startTime)
       }
diff --git a/package.json b/package.json
index 1d9ead2..c9805a2 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
     "*.js"
   ],
   "scripts": {
+    "fmt": "prettier --write **/*.{js,ts}",
+    "fmt:check": "prettier --check **/*.{js,ts}",
     "build": "tsc",
     "test": "tsc && vitest",
     "release": "release-it --access public"
@@ -17,10 +19,16 @@
   "devDependencies": {
     "css.escape": "^1.5.1",
     "jsdom": "^25.0.1",
+    "prettier": "^3.4.2",
     "release-it": "^17.10.0",
     "typescript": "5.7.2",
     "vitest": "^2.1.8"
   },
+  "prettier": {
+    "semi": false,
+    "singleQuote": true,
+    "endOfLine": "lf"
+  },
   "author": "Anton Medvedev <anton@medv.io>",
   "license": "MIT",
   "homepage": "https://github.com/antonmedv/finder",
diff --git a/tests/__snapshots__/finder.test.js.snap b/tests/__snapshots__/finder.test.js.snap
index d64d0af..590b801 100644
--- a/tests/__snapshots__/finder.test.js.snap
+++ b/tests/__snapshots__/finder.test.js.snap
@@ -732,6 +732,12 @@ exports[`github 1`] = `
 ]
 `;
 
+exports[`google 1`] = `
+[
+  ":nth-child(1) > :nth-child(2) > :nth-child(6) > :nth-child(1) > :nth-child(14) > :nth-child(1) > :nth-child(1) > :nth-child(2) > :nth-child(2) > :nth-child(1) > :nth-child(2) > :nth-child(10) > :nth-child(1) > :nth-child(1) > :nth-child(1) > :nth-child(1) > :nth-child(1) > :nth-child(1) > :nth-child(1)",
+]
+`;
+
 exports[`stripe 1`] = `
 [
   "html",
diff --git a/tests/finder.test.js b/tests/finder.test.js
index 0f28d41..8aaca1f 100644
--- a/tests/finder.test.js
+++ b/tests/finder.test.js
@@ -1,60 +1,77 @@
-import {test, assert, expect} from 'vitest'
-import {JSDOM} from 'jsdom'
-import {readFileSync} from 'node:fs'
-import {fileURLToPath} from 'node:url'
-import {dirname} from 'node:path'
-import {finder} from '../finder.js'
+import { test, assert, expect } from 'vitest'
+import { JSDOM } from 'jsdom'
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import path from 'node:path'
+import { finder } from '../finder.js'
 
 import 'css.escape'
 
 const __filename = fileURLToPath(import.meta.url)
-const __dirname = dirname(__filename)
+const __dirname = path.dirname(__filename)
 
-function check(html, config = {}) {
-  const dom = new JSDOM(html)
+function check({ file, html, target }, config = {}) {
+  const dom = file
+    ? new JSDOM(readFileSync(path.join(__dirname, file), 'utf8'))
+    : new JSDOM(html)
   globalThis.document = dom.window.document
   globalThis.Node = dom.window.Node
   const selectors = []
-  for (let node of document.querySelectorAll('*')) {
+  for (let node of document.querySelectorAll(target ?? '*')) {
     let css
     try {
       css = finder(node, config)
     } catch (err) {
-      assert.ok(false, err.toString() + '\n    Node: ' + node.outerHTML.substring(0, 100))
+      assert.ok(
+        false,
+        err.toString() + '\n    Node: ' + node.outerHTML.substring(0, 100),
+      )
     }
-    assert.equal(document.querySelectorAll(css).length, 1, `Selector "${css}" selects more then one node.`)
-    assert.equal(document.querySelector(css), node, `Selector "${css}" selects another node.`)
+    assert.equal(
+      document.querySelectorAll(css).length,
+      1,
+      `Selector "${css}" selects more then one node.`,
+    )
+    assert.equal(
+      document.querySelector(css),
+      node,
+      `Selector "${css}" selects another node.`,
+    )
     selectors.push(css)
   }
-  return selectors
+  expect(selectors).toMatchSnapshot()
 }
 
 test('github', () => {
-  const selectors = check(readFileSync(__dirname + '/pages/github.com.html', 'utf8'))
-  expect(selectors).toMatchSnapshot()
+  check({ file: 'pages/github.com.html' })
 })
 
 test('stripe', () => {
-  const selectors = check(readFileSync(__dirname + '/pages/stripe.com.html', 'utf8'))
-  expect(selectors).toMatchSnapshot()
+  check({ file: 'pages/stripe.com.html' })
 })
 
 test('deployer', () => {
-  const selectors = check(readFileSync(__dirname + '/pages/deployer.org.html', 'utf8'))
-  expect(selectors).toMatchSnapshot()
+  check({ file: 'pages/deployer.org.html' })
 })
 
 test('tailwindcss', () => {
-  const selectors = check(readFileSync(__dirname + '/pages/tailwindcss.html', 'utf8'))
-  expect(selectors).toMatchSnapshot()
+  check({ file: 'pages/tailwindcss.html' })
+})
+
+test('google', () => {
+  check({
+    file: 'pages/google.com.html',
+    target: '[href="https://github.com/antonmedv/finder"]',
+  })
 })
 
 test('duplicate', () => {
   const html = `
+
   <div id="foo"></div>
   <div id="foo"></div>
   `
-  expect(check(html)).toMatchSnapshot()
+  check({ html })
 })
 
 test('duplicate:sub-nodes', () => {
@@ -62,5 +79,5 @@ test('duplicate:sub-nodes', () => {
   <div id="foo"><i></i></div>
   <div id="foo"><i></i></div>
   `
-  expect(check(html)).toMatchSnapshot()
+  check({ html })
 })
diff --git a/tests/pages/deployer.org.html b/tests/pages/deployer.org.html
index 4f0e1df..efdd7d6 100644
--- a/tests/pages/deployer.org.html
+++ b/tests/pages/deployer.org.html
@@ -1,70 +1,104 @@
-
 <!doctype html>
 <html>
-<head>
-    <meta charset="utf-8">
+  <head>
+    <meta charset="utf-8" />
     <title>Deployer &mdash; Deployment Tool for PHP</title>
-    <meta name="author" content="Anton Medvedev">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description"
-          content="A deployment tool written in PHP with support for popular frameworks out of the box.">
-    <meta name="keywords" content="deployer, deployment, deploy, php, phar, parallel">
+    <meta name="author" content="Anton Medvedev" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="A deployment tool written in PHP with support for popular frameworks out of the box."
+    />
+    <meta
+      name="keywords"
+      content="deployer, deployment, deploy, php, phar, parallel"
+    />
 
-    <meta property="og:url" content="https://deployer.org">
-    <meta property="og:type" content="website">
-    <meta property="og:title" content="Deployment Tool for PHP">
-    <meta property="og:description" content="A deployment tool written in PHP with support for popular frameworks out of the box.">
-    <meta property="og:image" content="https://deployer.org/images/opengraph-v4.png">
-    <meta property="og:image:width" content="1200">
-    <meta property="og:image:height" content="630">
+    <meta property="og:url" content="https://deployer.org" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Deployment Tool for PHP" />
+    <meta
+      property="og:description"
+      content="A deployment tool written in PHP with support for popular frameworks out of the box."
+    />
+    <meta
+      property="og:image"
+      content="https://deployer.org/images/opengraph-v4.png"
+    />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
 
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:site" content="@antonmedv">
-    <meta name="twitter:creator" content="@antonmedv">
-    <meta name="twitter:title" content="Deployment Tool for PHP">
-    <meta name="twitter:description" content="A deployment tool written in PHP with support for popular frameworks out of the box.">
-    <meta name="twitter:image" content="https://deployer.org/images/opengraph-v4.png">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@antonmedv" />
+    <meta name="twitter:creator" content="@antonmedv" />
+    <meta name="twitter:title" content="Deployment Tool for PHP" />
+    <meta
+      name="twitter:description"
+      content="A deployment tool written in PHP with support for popular frameworks out of the box."
+    />
+    <meta
+      name="twitter:image"
+      content="https://deployer.org/images/opengraph-v4.png"
+    />
 
-    <link rel="canonical" href="https://deployer.org">
+    <link rel="canonical" href="https://deployer.org" />
 
-    <link rel="shortcut icon" href="/favicon.png" type="image/png">
-    <link rel="stylesheet" href="/bundle.097e6aa5.css">
+    <link rel="shortcut icon" href="/favicon.png" type="image/png" />
+    <link rel="stylesheet" href="/bundle.097e6aa5.css" />
     <script>
-      (function (i, s, o, g, r, a, m) {
-        i['GoogleAnalyticsObject'] = r;
-        i[r] = i[r] || function () {
-          (i[r].q = i[r].q || []).push(arguments)
-        }, i[r].l = 1 * new Date();
-        a = s.createElement(o),
-          m = s.getElementsByTagName(o)[0];
-        a.async = 1;
-        a.src = g;
+      ;(function (i, s, o, g, r, a, m) {
+        i['GoogleAnalyticsObject'] = r
+        ;(i[r] =
+          i[r] ||
+          function () {
+            ;(i[r].q = i[r].q || []).push(arguments)
+          }),
+          (i[r].l = 1 * new Date())
+        ;(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0])
+        a.async = 1
+        a.src = g
         m.parentNode.insertBefore(a, m)
-      })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
+      })(
+        window,
+        document,
+        'script',
+        '//www.google-analytics.com/analytics.js',
+        'ga',
+      )
 
-      ga('create', 'UA-58919878-1', 'auto');
-      ga('send', 'pageview');
+      ga('create', 'UA-58919878-1', 'auto')
+      ga('send', 'pageview')
     </script>
     <script>
       if (window.navigator.userAgent.indexOf('Windows') != -1) {
-        document.documentElement.className = '-windows';
+        document.documentElement.className = '-windows'
       } else {
-        document.documentElement.className = '-macos';
+        document.documentElement.className = '-macos'
       }
     </script>
-</head>
-<body>
-
-<header class="-home">
-    <nav>
+  </head>
+  <body>
+    <header class="-home">
+      <nav>
         <a class="logo" href="/">
-            <svg viewBox="0 0 242 195" xmlns="http://www.w3.org/2000/svg">
-                <g stroke="#fff" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-rule="evenodd">
-                    <path d="M129.855 148.486l-33.32 38.02 13.524-49.694 98.148 56.985L241.455 1.469 110.06 136.813"/>
-                    <path d="M96.41 186.885l-13.74-62.3L241.07 1.282.07 102.447l82.6 22.139"/>
-                </g>
-            </svg>
-            Deployer
+          <svg viewBox="0 0 242 195" xmlns="http://www.w3.org/2000/svg">
+            <g
+              stroke="#fff"
+              stroke-width="7"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              fill="none"
+              fill-rule="evenodd"
+            >
+              <path
+                d="M129.855 148.486l-33.32 38.02 13.524-49.694 98.148 56.985L241.455 1.469 110.06 136.813"
+              />
+              <path
+                d="M96.41 186.885l-13.74-62.3L241.07 1.282.07 102.447l82.6 22.139"
+              />
+            </g>
+          </svg>
+          Deployer
         </a>
         <a href="/docs">Documentation</a>
         <a href="/download">Download</a>
@@ -72,287 +106,396 @@
         <a href="/discuss">Discuss</a>
         <a href="/blog">Blog</a>
         <a href="https://github.com/deployphp/deployer">GitHub</a>
-    </nav>
-    <div class="container">
-        <a class="github-ribbon" href="https://github.com/deployphp/deployer" title="Fork me on GitHub">Fork me on GitHub</a>
+      </nav>
+      <div class="container">
+        <a
+          class="github-ribbon"
+          href="https://github.com/deployphp/deployer"
+          title="Fork me on GitHub"
+          >Fork me on GitHub</a
+        >
 
-        <h1>
-            Deployer &mdash; Deployment tool for PHP
-        </h1>
+        <h1>Deployer &mdash; Deployment tool for PHP</h1>
 
         <div class="terminal">
-            <div class="macos">
-                <div class="x"></div>
-                <div class="minus"></div>
-                <div class="plus"></div>
-            </div>
-            <div class="windows">
-                <div class="minimize"></div>
-                <div class="maximize"></div>
-                <div class="close">
-                    <svg width="13" height="11" viewBox="0 0 13 11" xmlns="http://www.w3.org/2000/svg"><g stroke="#fff" fill="none" fill-rule="evenodd"><path d="M1 0l11 11M12 0L1 11"/></g></svg>
-                </div>
-            </div>
-            <div class="scroll">
-                <div class="log">Press enter to submit commands.</div>
-                <form>
-                    <label for="input">&gt;</label>
-                    <input id="input" type="text" value="" tabindex="1" autocomplete="off">
-                </form>
+          <div class="macos">
+            <div class="x"></div>
+            <div class="minus"></div>
+            <div class="plus"></div>
+          </div>
+          <div class="windows">
+            <div class="minimize"></div>
+            <div class="maximize"></div>
+            <div class="close">
+              <svg
+                width="13"
+                height="11"
+                viewBox="0 0 13 11"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g stroke="#fff" fill="none" fill-rule="evenodd">
+                  <path d="M1 0l11 11M12 0L1 11" />
+                </g>
+              </svg>
             </div>
+          </div>
+          <div class="scroll">
+            <div class="log">Press enter to submit commands.</div>
+            <form>
+              <label for="input">&gt;</label>
+              <input
+                id="input"
+                type="text"
+                value=""
+                tabindex="1"
+                autocomplete="off"
+              />
+            </form>
+          </div>
         </div>
-    </div>
-    <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=deployerorg" id="_carbonads_js"></script>
-</header>
+      </div>
+      <script
+        async
+        type="text/javascript"
+        src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=deployerorg"
+        id="_carbonads_js"
+      ></script>
+    </header>
 
-<div class="try-pro">
-    <a href="/pro/continuous-integration" onclick="ga('send', 'event', 'pro_link', 'click');">
-        Try The New <span class="name">Deployer <strong>Pro</strong></span> <em>continuous integration</em> and <em>continuous delivery</em> service
+    <div class="try-pro">
+      <a
+        href="/pro/continuous-integration"
+        onclick="ga('send', 'event', 'pro_link', 'click');"
+      >
+        Try The New <span class="name">Deployer <strong>Pro</strong></span>
+        <em>continuous integration</em> and <em>continuous delivery</em> service
         <span class="find-out-more">Find out more</span>
-    </a>
-</div>
-<section class="getting-started">
-    <h2>Getting Started</h2>
-    <div class="grid">
+      </a>
+    </div>
+    <section class="getting-started">
+      <h2>Getting Started</h2>
+      <div class="grid">
         <div class="cell">
-            <p>
-                &nbsp;
-            </p>
-            <p class="download">
-                <a href="/deployer.phar" onclick="ga('send', 'event', 'button', 'download', 'index');"
-                   class="button">Download deployer.phar (6.0.5)</a>
-                <br>
-                <a href="/download" class="download-link">or download a different version</a>
-            </p>
-            <div class="github-stars">
-                <a class="github-button" href="https://github.com/deployphp/deployer" data-style="mega"
-                   data-count-href="/deployphp/deployer/stargazers"
-                   data-count-api="/repos/deployphp/deployer#stargazers_count"
-                   data-count-aria-label="# stargazers on GitHub"
-                   aria-label="Star deployphp/deployer on GitHub">Star</a>
-                &nbsp;&nbsp;&nbsp;
-                <a class="github-button" href="https://github.com/deployphp/deployer/fork" data-style="mega"
-                   data-count-href="/deployphp/deployer/network"
-                   data-count-api="/repos/deployphp/deployer#forks_count"
-                   data-count-aria-label="# forks on GitHub"
-                   aria-label="Fork deployphp/deployer on GitHub">Fork</a>
-                <script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
-            </div>
-            <p style="text-align:center;">
-                <a href="/docs/getting-started">Getting Started</a>
-            </p>
+          <p>&nbsp;</p>
+          <p class="download">
+            <a
+              href="/deployer.phar"
+              onclick="ga('send', 'event', 'button', 'download', 'index');"
+              class="button"
+              >Download deployer.phar (6.0.5)</a
+            >
+            <br />
+            <a href="/download" class="download-link"
+              >or download a different version</a
+            >
+          </p>
+          <div class="github-stars">
+            <a
+              class="github-button"
+              href="https://github.com/deployphp/deployer"
+              data-style="mega"
+              data-count-href="/deployphp/deployer/stargazers"
+              data-count-api="/repos/deployphp/deployer#stargazers_count"
+              data-count-aria-label="# stargazers on GitHub"
+              aria-label="Star deployphp/deployer on GitHub"
+              >Star</a
+            >
+            &nbsp;&nbsp;&nbsp;
+            <a
+              class="github-button"
+              href="https://github.com/deployphp/deployer/fork"
+              data-style="mega"
+              data-count-href="/deployphp/deployer/network"
+              data-count-api="/repos/deployphp/deployer#forks_count"
+              data-count-aria-label="# forks on GitHub"
+              aria-label="Fork deployphp/deployer on GitHub"
+              >Fork</a
+            >
+            <script
+              async
+              defer
+              id="github-bjs"
+              src="https://buttons.github.io/buttons.js"
+            ></script>
+          </div>
+          <p style="text-align: center">
+            <a href="/docs/getting-started">Getting Started</a>
+          </p>
         </div>
         <div class="cell">
-            <p>
-                Run the following commands in the console:
-            </p>
-            <pre><code class="language-bash">curl -LO https://deployer.org/deployer.phar
+          <p>Run the following commands in the console:</p>
+          <pre><code class="language-bash">curl -LO https://deployer.org/deployer.phar
 mv deployer.phar /usr/local/bin/dep
-chmod +x /usr/local/bin/dep</code></pre>                <p>
-            Or you can install it with composer:
-        </p>
-            <pre><code class="language-bash">composer require deployer/deployer</code></pre>            </div>
-    </div>
-</section>
+chmod +x /usr/local/bin/dep</code></pre>
+          <p>Or you can install it with composer:</p>
+          <pre><code class="language-bash">composer require deployer/deployer</code></pre>
+        </div>
+      </div>
+    </section>
 
-<section class="features">
-    <h2>Deployer Features</h2>
-    <div class="grid -of3 -gutters">
+    <section class="features">
+      <h2>Deployer Features</h2>
+      <div class="grid -of3 -gutters">
         <div class="cell">
-            <h3>Fast</h3>
-            <p>
-                Deployer is packed with time-saving features and optimisations, best for performance and
-                development.
-            </p>
+          <h3>Fast</h3>
+          <p>
+            Deployer is packed with time-saving features and optimisations, best
+            for performance and development.
+          </p>
         </div>
         <div class="cell">
-            <h3>Modular</h3>
-            <p>
-                Create your own deployment script based on our modular blocks called "recipes".</p>
+          <h3>Modular</h3>
+          <p>
+            Create your own deployment script based on our modular blocks called
+            "recipes".
+          </p>
         </div>
         <div class="cell">
-            <h3>Clean code</h3>
-            <p>
-                Deployer has very clean and well tested code. The repository is watched by many code quality tools, and
-                every pull request is also checked by QA tools.
-            </p>
+          <h3>Clean code</h3>
+          <p>
+            Deployer has very clean and well tested code. The repository is
+            watched by many code quality tools, and every pull request is also
+            checked by QA tools.
+          </p>
         </div>
         <div class="cell">
-            <h3>Rollbacks</h3>
-            <p>
-                If something is wrong, a simple rollback to the previous release is possible.
-            </p>
+          <h3>Rollbacks</h3>
+          <p>
+            If something is wrong, a simple rollback to the previous release is
+            possible.
+          </p>
         </div>
         <div class="cell">
-            <h3>Atomic deploys</h3>
-            <p>
-                Prepare codebase, warm cache, do other stuff, and then deploy them with symlinks!
-            </p>
+          <h3>Atomic deploys</h3>
+          <p>
+            Prepare codebase, warm cache, do other stuff, and then deploy them
+            with symlinks!
+          </p>
         </div>
         <div class="cell">
-            <h3>Parallel tasks</h3>
-            <p>
-                Deployer can run tasks in parallel, no other extension is required!
-            </p>
+          <h3>Parallel tasks</h3>
+          <p>
+            Deployer can run tasks in parallel, no other extension is required!
+          </p>
         </div>
         <div class="cell">
-            <h3>Consistency</h3>
-            <p>
-                Deployer keeps consistency between servers, even in parallel mode! If one task fails, subsequent
-                tasks
-                will not be executed on all servers.
-            </p>
+          <h3>Consistency</h3>
+          <p>
+            Deployer keeps consistency between servers, even in parallel mode!
+            If one task fails, subsequent tasks will not be executed on all
+            servers.
+          </p>
         </div>
         <div class="cell">
-            <h3>Community Support</h3>
-            <p>
-                If you are having problems, you can ask for help on our <a href="/discuss">community chats</a>.
-            </p>
+          <h3>Community Support</h3>
+          <p>
+            If you are having problems, you can ask for help on our
+            <a href="/discuss">community chats</a>.
+          </p>
         </div>
-    </div>
-</section>
+      </div>
+    </section>
 
-<section class="builtin">
-    <h2>Works with</h2>
-    <div class="grid -gutters -of4">
+    <section class="builtin">
+      <h2>Works with</h2>
+      <div class="grid -gutters -of4">
         <div class="cell">
-            <img src="/images/logos/symfony.png" alt="Symfony Deployment">
+          <img src="/images/logos/symfony.png" alt="Symfony Deployment" />
         </div>
         <div class="cell">
-            <img src="/images/logos/laravel.png" alt="Laravel Deployment">
+          <img src="/images/logos/laravel.png" alt="Laravel Deployment" />
         </div>
         <div class="cell">
-            <img src="/images/logos/yii.png" alt="Yii Deployment">
+          <img src="/images/logos/yii.png" alt="Yii Deployment" />
         </div>
         <div class="cell">
-            <img src="/images/logos/zend-framework.jpg" alt="Zend Framework Deployment">
+          <img
+            src="/images/logos/zend-framework.jpg"
+            alt="Zend Framework Deployment"
+          />
         </div>
         <div class="cell">
-            <img src="/images/logos/cakephp.png" alt="CakePHP Deployment">
+          <img src="/images/logos/cakephp.png" alt="CakePHP Deployment" />
         </div>
         <div class="cell">
-            <img src="/images/logos/codeigniter.svg" alt="CodeIgniter Deployment">
+          <img
+            src="/images/logos/codeigniter.svg"
+            alt="CodeIgniter Deployment"
+          />
         </div>
         <div class="cell">
-            <img src="/images/logos/composer.png" alt="Composer Integration">
+          <img src="/images/logos/composer.png" alt="Composer Integration" />
         </div>
         <div class="cell">
-            <img src="/images/logos/drupal.png" alt="Drupal Deployment">
+          <img src="/images/logos/drupal.png" alt="Drupal Deployment" />
         </div>
         <div class="cell">
-            <img src="/images/logos/fuelphp.png" alt="FuelPHP Deployment">
+          <img src="/images/logos/fuelphp.png" alt="FuelPHP Deployment" />
         </div>
         <div class="cell">
-            <img src="/images/logos/magento.jpg" alt="Magento Deployment">
+          <img src="/images/logos/magento.jpg" alt="Magento Deployment" />
         </div>
         <div class="cell">
-            <img src="/images/logos/typo3.png" alt="TYPO3 Deployment">
+          <img src="/images/logos/typo3.png" alt="TYPO3 Deployment" />
         </div>
         <div class="cell">
-            <img src="/images/logos/wordpress.png" alt="WordPress Deployment">
+          <img src="/images/logos/wordpress.png" alt="WordPress Deployment" />
         </div>
         <div class="cell">
-            <img src="/images/logos/cloudflare.png" alt="CloudFlare Integration">
+          <img
+            src="/images/logos/cloudflare.png"
+            alt="CloudFlare Integration"
+          />
         </div>
         <div class="cell">
-            <img src="/images/logos/hipchat.png" alt="Hipchat Integration">
+          <img src="/images/logos/hipchat.png" alt="Hipchat Integration" />
         </div>
         <div class="cell">
-            <img src="/images/logos/newrelic.svg" alt="NewRelic Integration">
+          <img src="/images/logos/newrelic.svg" alt="NewRelic Integration" />
         </div>
         <div class="cell">
-            <img src="/images/logos/slack.png" alt="Slack Integration">
+          <img src="/images/logos/slack.png" alt="Slack Integration" />
         </div>
-    </div>
-</section>
+      </div>
+    </section>
 
-<section class="support">
-    <div class="grid -gutters -of2">
+    <section class="support">
+      <div class="grid -gutters -of2">
         <div class="cell">
-            <h2>Support</h2>
-            <p>
-                Deployer is an open source project.
-                If you want to support the development of Deployer visit our <a href="https://www.patreon.com/deployer">patreon page</a>.
-            </p>
-            <p>
-                <a href="https://www.patreon.com/deployer" class="button -become-a-backer">Become a Backer</a>
-            </p>
+          <h2>Support</h2>
+          <p>
+            Deployer is an open source project. If you want to support the
+            development of Deployer visit our
+            <a href="https://www.patreon.com/deployer">patreon page</a>.
+          </p>
+          <p>
+            <a
+              href="https://www.patreon.com/deployer"
+              class="button -become-a-backer"
+              >Become a Backer</a
+            >
+          </p>
         </div>
         <div class="cell">
-            <h2>Deployer Stickers</h2>
-            <div class="sticker">
-                <a class="preview" href="http://www.stickermule.com/marketplace/11261-deployer" target="_blank">
-                    <img src="/images/deployer-sticker.png" alt="Deployer Sticker">
-                </a>
-                <a class="button sticker-buy" href="http://www.stickermule.com/marketplace/11261-deployer"
-                   target="_blank">Buy $4.64</a>
-            </div>
-            <div class="sticker">
-                <a class="preview" href="https://www.stickermule.com/marketplace/11262-deployer" target="_blank">
-                    <img src="/images/deployer-sticker-gray.png" alt="Deployer Sticker">
-                </a>
-                <a class="button sticker-buy" href="https://www.stickermule.com/marketplace/11262-deployer"
-                   target="_blank">Buy $4.65</a>
-            </div>
-            <div class="sticker">
-                <a class="preview" href="https://www.stickermule.com/marketplace/11496-php7" target="_blank">
-                    <img src="/images/php7-sticker.png" alt="PHP7 Sticker">
-                </a>
-                <a class="button sticker-buy" href="https://www.stickermule.com/marketplace/11496-php7"
-                   target="_blank">Buy $4.10</a>
-            </div>
+          <h2>Deployer Stickers</h2>
+          <div class="sticker">
+            <a
+              class="preview"
+              href="http://www.stickermule.com/marketplace/11261-deployer"
+              target="_blank"
+            >
+              <img src="/images/deployer-sticker.png" alt="Deployer Sticker" />
+            </a>
+            <a
+              class="button sticker-buy"
+              href="http://www.stickermule.com/marketplace/11261-deployer"
+              target="_blank"
+              >Buy $4.64</a
+            >
+          </div>
+          <div class="sticker">
+            <a
+              class="preview"
+              href="https://www.stickermule.com/marketplace/11262-deployer"
+              target="_blank"
+            >
+              <img
+                src="/images/deployer-sticker-gray.png"
+                alt="Deployer Sticker"
+              />
+            </a>
+            <a
+              class="button sticker-buy"
+              href="https://www.stickermule.com/marketplace/11262-deployer"
+              target="_blank"
+              >Buy $4.65</a
+            >
+          </div>
+          <div class="sticker">
+            <a
+              class="preview"
+              href="https://www.stickermule.com/marketplace/11496-php7"
+              target="_blank"
+            >
+              <img src="/images/php7-sticker.png" alt="PHP7 Sticker" />
+            </a>
+            <a
+              class="button sticker-buy"
+              href="https://www.stickermule.com/marketplace/11496-php7"
+              target="_blank"
+              >Buy $4.10</a
+            >
+          </div>
         </div>
-    </div>
-</section>
+      </div>
+    </section>
 
-<footer class="">
-    <div class="container">
-        <span class="copy">
-            &copy; 2013 &mdash; 2018 Deployer
-        </span>
+    <footer class="">
+      <div class="container">
+        <span class="copy"> &copy; 2013 &mdash; 2018 Deployer </span>
         <div class="with-love">
-            Made with
-            <svg class="icon-love" width="21" height="17" viewBox="0 0 21 17" xmlns="http://www.w3.org/2000/svg"><title>love</title><path d="M14.725.032a5.31 5.31 0 0 0-4.687 2.814 5.312 5.312 0 0 0-10 2.498c0 4.763 5.834 7.397 10 11.564 4.306-4.306 10-6.76 10-11.563A5.312 5.312 0 0 0 14.725.032z" fill="#E82F2F" fill-rule="evenodd"></path></svg>
-            by
-            <a href="https://github.com/antonmedv">Anton</a>
+          Made with
+          <svg
+            class="icon-love"
+            width="21"
+            height="17"
+            viewBox="0 0 21 17"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <title>love</title>
+            <path
+              d="M14.725.032a5.31 5.31 0 0 0-4.687 2.814 5.312 5.312 0 0 0-10 2.498c0 4.763 5.834 7.397 10 11.564 4.306-4.306 10-6.76 10-11.563A5.312 5.312 0 0 0 14.725.032z"
+              fill="#E82F2F"
+              fill-rule="evenodd"
+            ></path>
+          </svg>
+          by
+          <a href="https://github.com/antonmedv">Anton</a>
         </div>
-    </div>
-</footer>
+      </div>
+    </footer>
 
-<script src="/bundle.345ff268.js"></script>
-<script type="text/javascript">
-  (function (d, w, c) {
-    (w[c] = w[c] || []).push(function () {
-      try {
-        w.yaCounter28042872 = new Ya.Metrika({
-          id: 28042872,
-          webvisor: true,
-          clickmap: true,
-          trackLinks: true,
-          accurateTrackBounce: true
-        });
-      } catch (e) {
-      }
-    });
+    <script src="/bundle.345ff268.js"></script>
+    <script type="text/javascript">
+      ;(function (d, w, c) {
+        ;(w[c] = w[c] || []).push(function () {
+          try {
+            w.yaCounter28042872 = new Ya.Metrika({
+              id: 28042872,
+              webvisor: true,
+              clickmap: true,
+              trackLinks: true,
+              accurateTrackBounce: true,
+            })
+          } catch (e) {}
+        })
 
-    var n = d.getElementsByTagName("script")[0],
-      s = d.createElement("script"),
-      f = function () {
-        n.parentNode.insertBefore(s, n);
-      };
-    s.type = "text/javascript";
-    s.async = true;
-    s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js";
+        var n = d.getElementsByTagName('script')[0],
+          s = d.createElement('script'),
+          f = function () {
+            n.parentNode.insertBefore(s, n)
+          }
+        s.type = 'text/javascript'
+        s.async = true
+        s.src =
+          (d.location.protocol == 'https:' ? 'https:' : 'http:') +
+          '//mc.yandex.ru/metrika/watch.js'
 
-    if (w.opera == "[object Opera]") {
-      d.addEventListener("DOMContentLoaded", f, false);
-    } else {
-      f();
-    }
-  })(document, window, "yandex_metrika_callbacks");
-</script>
-<noscript>
-    <div><img src="//mc.yandex.ru/watch/28042872" style="position:absolute; left:-9999px;" alt=""/></div>
-</noscript>
-</body>
+        if (w.opera == '[object Opera]') {
+          d.addEventListener('DOMContentLoaded', f, false)
+        } else {
+          f()
+        }
+      })(document, window, 'yandex_metrika_callbacks')
+    </script>
+    <noscript>
+      <div>
+        <img
+          src="//mc.yandex.ru/watch/28042872"
+          style="position: absolute; left: -9999px"
+          alt=""
+        />
+      </div>
+    </noscript>
+  </body>
 </html>
diff --git a/tests/pages/google.com.html b/tests/pages/google.com.html
new file mode 100644
index 0000000..b2eb5fe
--- /dev/null
+++ b/tests/pages/google.com.html
@@ -0,0 +1,3281 @@
+<html itemscope="" itemtype="http://schema.org/SearchResultsPage" lang="en-CH">
+<head>
+    <meta charset="UTF-8"></meta>
+    <meta content="origin" name="referrer"></meta>
+    <meta http-equiv="origin-trial"></meta>
+    <meta content="/images/branding/googleg/1x/googleg_standard_color_128dp.png" itemprop="image"></meta>
+    <title>css selectors generator - Google Search</title></head>
+<body jsmodel="hspDDf " class="srp" jscontroller="Eox39d" marginheight="3" topmargin="3" id="gsr">
+<noscript>
+    <style>table, div, span, p {
+      display: none
+    }</style>
+    <meta
+        content="0;url=/search?q=css+selectors+generator&amp;sca_esv=fa27aa6c1a2c9000&amp;gbv=1&amp;sei=VhlbZ97QO6u79u8PtZve0AE"
+        http-equiv="refresh">
+    <div style="display:block">Please click <a
+        href="/search?q=css+selectors+generator&amp;sca_esv=fa27aa6c1a2c9000&amp;gbv=1&amp;sei=VhlbZ97QO6u79u8PtZve0AE">here</a>
+        if you are not redirected within a few seconds.
+    </div>
+</noscript>
+<h1 class="bNg8Rb OhScic zsYMMe BBwThe">Accessibility links</h1>
+<div jscontroller="EufiNb" class="wYq63b">
+    <div class="S6VXfe"><a jsname="BKxS1e" class="gyPpGe" role="link" tabindex="0" jsaction="i3viod"
+                           data-ved="0ahUKEwje05373KKKAxWrnf0HHbWNFxoQ67oDCAU">Skip to main content</a><a
+        jsname="KI37ad" class="gyPpGe" href="https://support.google.com/websearch/answer/181196?hl=en-CH">Accessibility
+        help</a>
+        <div>
+            <div jscontroller="EkevXb" style="display:none" jsaction="rcuQ6b:npT2md"></div>
+            <div id="duf3-78" data-jiis="up" data-async-type="duffy3" class="yp"
+                 data-ved="0ahUKEwje05373KKKAxWrnf0HHbWNFxoQ-0EIBw"></div>
+            <a jsname="JUypV" class="gyPpGe" data-async-trigger="duf3-78" role="link" tabindex="0"
+               jsaction="trigger.szjOR">Accessibility feedback</a></div>
+    </div>
+</div>
+<div class="CvDJxb YNk70c" jscontroller="tIj4fb" jsaction="rcuQ6b:npT2md;" id="searchform">
+    <div class="sfbg"></div>
+    <div class="NDnoQ P3mIxe">
+        <form class="tsf" action="/search" id="tsf" autocomplete="off" data-submitfalse="q" method="GET" name="f"
+              role="search">
+            <div jsmodel="b5W85 vNzKHd" jsdata="MuIEvd;_;Ah5zlE">
+                <div jscontroller="cnjECf"
+                     jsmodel="VYkzu kjkykd EPRt9d LM7wx Qlyryb EtCx8b Ip3Erc L97mud m6IAKb          " class="A8SBwf"
+                     data-alt="true" data-biboe="false" data-efaql="false" data-hp="false" data-mht="200" data-nvshe="1"
+                     data-nvshk="1" data-nvshp="q,sclient" data-pfl="5" jsdata="LVplcb;_;">
+                    <div class="logo Ib7Efc"><a
+                        href="https://www.google.com/webhp?hl=en&ictx=2&sa=X&ved=0ahUKEwje05373KKKAxWrnf0HHbWNFxoQPQgI"
+                        data-hveid="8"><img style="text-indent:100%;white-space:nowrap;overflow:hidden"
+                                            alt="Seasonal Holidays 2024" height="33"
+                                            src="/logos/doodles/2024/seasonal-holidays-2024-6753651837110333.4-s.png"
+                                            title="Seasonal Holidays 2024" width="92" border="0"
+                                            data-csiid="VhlbZ97QO6u79u8PtZve0AE_1" data-atf="1"></img></a></div>
+                    <div jsname="RNNXgb" class="RNNXgb"><a class="FgNLaf"
+                                                           href="https://www.google.com/webhp?hl=en&ictx=0&sa=X&ved=0ahUKEwje05373KKKAxWrnf0HHbWNFxoQpYkNCAo"
+                                                           id="_VhlbZ97QO6u79u8PtZve0AE_1" data-hveid="10">
+                        <svg class="lJpQBb" aria-label="Go to Google Home" height="24" width="24" focusable="false"
+                             viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <path fill="#4285f4"></path>
+                            <path fill="#34a853"></path>
+                            <path fill="#fbbc04"></path>
+                            <path fill="#ea4335"></path>
+                        </svg>
+                    </a>
+                        <div class="SDkEP">
+                            <div jsname="uFMOof" class="iblpc">
+                                <div class="CcAdNb"><span class="QCzoEc z1asCe MZy1Rb"
+                                                          style="height:20px;line-height:20px;width:20px"><svg
+                                    focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path></path></svg></span>
+                                </div>
+                            </div>
+                            <div jscontroller="vZr2rb" jsname="gLFyf" class="a4bIc" data-hpmde="false" data-mnr="4"
+                                 jsaction="h5M12e;input:d3sQLd;blur:jI3wzf">
+                                <div jsname="vdLsw" class="YacQv"></div>
+                                <div jsname="aJyGR" jscontroller="xMclgd" class="gLFyf i4ySpb" jsaction="rcuQ6b:npT2md">
+                                    <g-snackbar jsname="nH91he" jscontroller="OZLguc" style="display:none"
+                                                data-dismiss="" jsshadow="" jsaction="rcuQ6b:npT2md" id="ow12"
+                                                __is_owner="true">
+                                        <div jsname="Ng57nc" class="Wu0v9b v0rrvd"
+                                             data-ved="0ahUKEwje05373KKKAxWrnf0HHbWNFxoQ4G8ICw" jsowner="ow12">
+                                            <div class="b77HKf">
+                                                <div class="rIxsve" jsslot=""><span class="Txngnb wHYlTd yUTMj Sxjlmb">Press <span
+                                                    class="qfY0Jf">/</span> to jump to the search box</span></div>
+                                            </div>
+                                        </div>
+                                        <div jsname="sM5MNb" aria-live="polite" class="jhZvod"></div>
+                                    </g-snackbar>
+                                </div>
+                                <textarea class="gLFyf" aria-controls="Alh6id" aria-owns="Alh6id"
+                                          value="css selectors generator"
+                                          jsaction="paste:puy29d; mouseenter:MJEKMe; mouseleave:iFHZnf;"
+                                          aria-label="Search" placeholder="" aria-autocomplete="both"
+                                          aria-expanded="false" aria-haspopup="false" autocapitalize="off"
+                                          autocomplete="off" autocorrect="off" id="APjFqb" maxlength="2048" name="q"
+                                          role="combobox" rows="1" spellcheck="false"
+                                          data-ved="0ahUKEwje05373KKKAxWrnf0HHbWNFxoQ39UDCAw">css selectors generator</textarea>
+                            </div>
+                            <div class="fM33ce dRYYxd">
+                                <div jscontroller="PymCCe" jsname="RP0xob" class="BKRPef">
+                                    <div class="M2vV3 vOY7J" tabindex="0" jsname="pkjasb" aria-label="Clear"
+                                         role="button" jsaction="AVsnlb;rcuQ6b:npT2md"
+                                         data-ved="0ahUKEwje05373KKKAxWrnf0HHbWNFxoQ05YFCA0"><span jsname="itVqKe"
+                                                                                                   class="ExCKkf z1asCe rzyADb"><svg
+                                        focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path></path></svg></span>
+                                    </div>
+                                    <span jsname="s1VaRe" class="ACRAdd M2vV3"></span></div>
+                                <div jscontroller="unV4T" jsname="F7uqIe" class="XDyW0e" aria-label="Search by voice"
+                                     role="button" tabindex="0" jsaction="h5M12e;rcuQ6b:npT2md"
+                                     data-ved="0ahUKEwje05373KKKAxWrnf0HHbWNFxoQvs8DCA4">
+                                    <svg class="goxjub" focusable="false" viewBox="0 0 24 24"
+                                         xmlns="http://www.w3.org/2000/svg">
+                                        <path fill="#4285f4"></path>
+                                        <path fill="#34a853" d="m11 18.08h2v3.92h-2z"></path>
+                                        <path fill="#fbbc04"
+                                              d="m7.05 16.87c-1.27-1.33-2.05-2.83-2.05-4.87h2c0 1.45 0.56 2.42 1.47 3.38v0.32l-1.15 1.18z"></path>
+                                        <path fill="#ea4335"></path>
+                                    </svg>
+                                </div>
+                                <div jscontroller="lpsUAf" class="nDcEnd" data-base-lens-url="https://lens.google.com"
+                                     data-image-processor-enabled="true" data-is-images-mode="false"
+                                     data-preferred-mime-type="image/jpeg" data-propagated-experiment-ids=""
+                                     jsname="R5mgy" aria-label="Search by image" role="button" tabindex="0"
+                                     jsaction="rcuQ6b:npT2md;h5M12e"
+                                     data-ved="0ahUKEwje05373KKKAxWrnf0HHbWNFxoQhqEICA8">
+                                    <svg class="Gdd5U" focusable="false" viewBox="0 0 192 192"
+                                         xmlns="http://www.w3.org/2000/svg">
+                                        <rect fill="none" height="192" width="192"></rect>
+                                        <g>
+                                            <circle fill="#34a853" cx="144.07" cy="144" r="16"></circle>
+                                            <circle fill="#4285f4" cx="96.07" cy="104" r="24"></circle>
+                                            <path fill="#ea4335"
+                                                  d="M24,135.2c0,18.11,14.69,32.8,32.8,32.8H96v-16l-40.1-0.1c-8.8,0-15.9-8.19-15.9-17.9v-18H24V135.2z"></path>
+                                            <path fill="#fbbc04"
+                                                  d="M168,72.8c0-18.11-14.69-32.8-32.8-32.8H116l20,16c8.8,0,16,8.29,16,18v30h16V72.8z"></path>
+                                            <path fill="#4285f4"
+                                                  d="M112,24l-32,0L68,40H56.8C38.69,40,24,54.69,24,72.8V92h16V74c0-9.71,7.2-18,16-18h80L112,24z"></path>
+                                        </g>
+                                    </svg>
+                                </div>
+                            </div>
+                        </div>
+                        <button class="HZVG1b Tg7LZd" jsname="Tg7LZd" aria-label="Search" type="submit"
+                                data-ved="0ahUKEwje05373KKKAxWrnf0HHbWNFxoQ4dUDCBA">
+                            <div class="zgAlFc"><span class="KlpaXd z1asCe MZy1Rb"><svg focusable="false"
+                                                                                        xmlns="http://www.w3.org/2000/svg"
+                                                                                        viewBox="0 0 24 24"><path></path></svg></span>
+                            </div>
+                        </button>
+                        <div jsname="mvaK7d" class="M8H8pb" data-ved="0ahUKEwje05373KKKAxWrnf0HHbWNFxoQ4d8ICBE"></div>
+                    </div>
+                    <div id="_VhlbZ97QO6u79u8PtZve0AE_3">
+                        <div jscontroller="Dvn7fe" jsname="UUbT9" class="UUbT9 EyBRub" style="display:none"
+                             jsaction="mouseout:ItzDCd;mouseleave:MWfikb;hBEIVb:nUZ9le;YMFC3:VKssTb;vklu5c:k02QY;ldyIye:CmVOgc"
+                             data-ved="0ahUKEwje05373KKKAxWrnf0HHbWNFxoQ4tUDCBI">
+                            <div jscontroller="Wo3n8" jsname="aadvhe" jsmodel="d5EhJe" data-bkt="searchbox" data-eas=""
+                                 data-fhs="" data-pid="5010715" jsdata="vST7rb;_;Ah5zlI zEIyGd;_;">
+                                <div id="_VhlbZ97QO6u79u8PtZve0AE_5">
+                                    <div jsname="GkjeIf" id="_VhlbZ97QO6u79u8PtZve0AE_8" data-jiis="up"
+                                         data-async-type="kp_feedback" class="yp"
+                                         data-ved="0ahUKEwje05373KKKAxWrnf0HHbWNFxoQ68cECBM"></div>
+                                </div>
+                            </div>
+                            <div jscontroller="P10Owf" class="YB4h9 ky4hfd"
+                                 aria-label="Choose what you’re giving feedback on" jsdata="vST7rb;_;Ah5zlI"
+                                 role="dialog" jsaction="kPzEO:MlP2je;qjLxRc:MlP2je;w8f1fc:hRwSgb;kq2wxf:s5CUif"
+                                 data-ved="0ahUKEwje05373KKKAxWrnf0HHbWNFxoQlokGCBQ">
+                                <div id="_VhlbZ97QO6u79u8PtZve0AE_10"><span class="Job8vb z1asCe wuXmqc"
+                                                                            aria-label="Close Choose what you’re giving feedback on"
+                                                                            role="button" tabindex="0" jsaction="kEOk4d"
+                                                                            style="height:20px;line-height:20px;width:20px"
+                                                                            data-ved="0ahUKEwje05373KKKAxWrnf0HHbWNFxoQmIkGCBU"><svg
+                                    focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path></path></svg></span>
+                                    <div class="C85rO" aria-level="1" role="heading">Choose what you’re giving feedback
+                                        on
+                                    </div>
+                                </div>
+                            </div>
+                            <div jsname="RjPuVb" class="RjPuVb"></div>
+                            <div jsname="aajZCb" class="aajZCb">
+                                <div class="xtSCL"></div>
+                                <div class="mkHrUc" id="Alh6id" role="presentation">
+                                    <div jsname="erkvQe" class="erkvQe"></div>
+                                    <div jsname="tovEib" class="rLrQHf" role="presentation"></div>
+                                </div>
+                                <div jsname="E80e9e" class="OBMEnb" id="shJ2Vb" role="presentation">
+                                    <ul jsname="bw4e9b" class="G43f7e" role="listbox"></ul>
+                                </div>
+                                <div class="ynRric" id="ynRric" role="presentation"></div>
+                                <li data-view-type="1" class="sbct PZPZlf" id="YMXe" role="presentation"
+                                    data-attrid="AutocompletePrediction"
+                                    data-entityid="autocomplete_user_feedback_kp_id">
+                                    <div class="eIPGRd">
+                                        <div class="sbic"></div>
+                                        <div class="pcTkSc">
+                                            <div class="lnnVSe" aria-atomic="true" role="option">
+                                                <div class="wM6W7d"><span></span></div>
+                                                <div class="ClJ9Yb"><span></span></div>
+                                                <div class="a5RLac"><span></span></div>
+                                            </div>
+                                            <div class="TfeWfb"></div>
+                                        </div>
+                                        <div class="AQZ9Vd" aria-atomic="true" role="button">
+                                            <div class="sbai" role="presentation">Delete</div>
+                                        </div>
+                                    </div>
+                                </li>
+                                <div class="xAmryf" id="bgeLZd"><span class="jtAOgd"></span></div>
+                                <li class="AB2Fdd" data-view-type="9" id="d6ItKb" role="presentation">
+                                    <div class="eIPGRd">
+                                        <div class="ZDHp" style="display:none" id="fU0xAb" role="presentation">
+                                            <div class="kZtr1b">
+                                                <div class="lnnVSe" aria-atomic="true" role="option">
+                                                    <div class="SHFPkb"></div>
+                                                    <div class="bTSf5c"></div>
+                                                    <div class="PnfqLc"></div>
+                                                    <div class="HrUlUc"></div>
+                                                </div>
+                                                <div class="Tnv2td" style="display:none" aria-label="Word pronunciation"
+                                                     aria-atomic="true" role="button"><span
+                                                    class="z76Rnb z1asCe JKu1je"><svg focusable="false"
+                                                                                      xmlns="http://www.w3.org/2000/svg"
+                                                                                      viewBox="0 0 24 24"><path></path></svg></span>
+                                                </div>
+                                                <div class="xAmryf" id="bgeLZd"><span class="jtAOgd"></span></div>
+                                                <div class="TfeWfb" role="presentation" style="display:none"></div>
+                                                <div class="kSFCof MagqMc U48fD" style="display:none"
+                                                     aria-label="See more" role="button" tabindex="0">
+                                                    <hr class="Bi9oQd" aria-hidden="true"></hr>
+                                                    <div class="ZFiwCf"><span class="LGwnxb">See more</span><span
+                                                        class="w2fKdd z1asCe" aria-hidden="true"
+                                                        style="height:20px;line-height:20px;width:20px"><svg
+                                                        focusable="false" xmlns="http://www.w3.org/2000/svg"
+                                                        viewBox="0 0 24 24"><path
+                                                        d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"></path></svg></span>
+                                                    </div>
+                                                </div>
+                                                <div class="Vlt3wb" style="display:none"></div>
+                                            </div>
+                                            <span class="XAFD5c" style="display:none"></span>
+                                            <div class="j0GJWd" style="display:none">
+                                                <div><img class="uHGFVd AZNDm" alt="" style="display:none"></img></div>
+                                                <div class="iQxPRb"><img class="uHGFVd EOLKOc" alt=""
+                                                                         style="display:none"></img><img
+                                                    class="uHGFVd EOLKOc" alt="" style="display:none"></img></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li class="W3CMNd" data-view-type="10" id="JglY8e" role="option">
+                                    <div class="eIPGRd" role="presentation">
+                                        <div class="AsqS6c" style="display:none" id="GTYqfc" role="presentation">
+                                            <div class="gfT7kc">
+                                                <div class="cJpYle">
+                                                    <div class="lnnVSe" aria-atomic="true" role="option">
+                                                        <div class="SHFPkb"></div>
+                                                        <div class="bTSf5c"></div>
+                                                        <div class="PnfqLc"></div>
+                                                        <div class="HrUlUc"></div>
+                                                    </div>
+                                                    <div class="Tnv2td" style="display:none"
+                                                         aria-label="Word pronunciation" aria-atomic="true"
+                                                         role="button"><span class="z76Rnb z1asCe JKu1je"><svg
+                                                        focusable="false" xmlns="http://www.w3.org/2000/svg"
+                                                        viewBox="0 0 24 24"><path></path></svg></span></div>
+                                                    <span class="XAFD5c" style="display:none"></span></div>
+                                                <div class="gTtFDd">
+                                                    <div class="lnnVSe" aria-atomic="true" role="option">
+                                                        <div class="SHFPkb"></div>
+                                                        <div class="bTSf5c"></div>
+                                                        <div class="PnfqLc"></div>
+                                                        <div class="HrUlUc"></div>
+                                                    </div>
+                                                    <div class="Tnv2td" style="display:none"
+                                                         aria-label="Word pronunciation" aria-atomic="true"
+                                                         role="button"><span class="z76Rnb z1asCe JKu1je"><svg
+                                                        focusable="false" xmlns="http://www.w3.org/2000/svg"
+                                                        viewBox="0 0 24 24"><path></path></svg></span></div>
+                                                    <span class="XAFD5c" style="display:none"></span></div>
+                                            </div>
+                                            <div class="xAmryf" id="bgeLZd"><span class="jtAOgd"></span></div>
+                                            <div class="TfeWfb" role="presentation" style="display:none"></div>
+                                            <div class="Vlt3wb" style="display:none"></div>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li data-view-type="8" class="sbct PZPZlf" id="mitGyb" role="presentation"
+                                    data-attrid="AutocompletePrediction"
+                                    data-entityid="autocomplete_user_feedback_kp_id">
+                                    <div class="eIPGRd hdt0ld">
+                                        <div class="sbic"></div>
+                                        <div class="pcTkSc">
+                                            <div>
+                                                <div class="wM6W7d"><span></span></div>
+                                                <div class="ClJ9Yb"><span></span></div>
+                                            </div>
+                                        </div>
+                                        <div class="AQZ9Vd" aria-atomic="true" role="button">
+                                            <div class="sbai" role="presentation">Delete</div>
+                                        </div>
+                                    </div>
+                                </li>
+                                <div class="ZDHp" style="display:none" id="fU0xAb" role="presentation">
+                                    <div class="kZtr1b">
+                                        <div class="lnnVSe" aria-atomic="true" role="option">
+                                            <div class="SHFPkb"></div>
+                                            <div class="bTSf5c"></div>
+                                            <div class="PnfqLc"></div>
+                                            <div class="HrUlUc"></div>
+                                        </div>
+                                        <div class="Tnv2td" style="display:none" aria-label="Word pronunciation"
+                                             aria-atomic="true" role="button"><span class="z76Rnb z1asCe JKu1je"><svg
+                                            focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path></path></svg></span>
+                                        </div>
+                                        <div class="xAmryf" id="bgeLZd"><span class="jtAOgd"></span></div>
+                                        <div class="TfeWfb" role="presentation" style="display:none"></div>
+                                        <div class="kSFCof MagqMc U48fD" style="display:none" aria-label="See more"
+                                             role="button" tabindex="0">
+                                            <hr class="Bi9oQd" aria-hidden="true"></hr>
+                                            <div class="ZFiwCf"><span class="LGwnxb">See more</span><span
+                                                class="w2fKdd z1asCe" aria-hidden="true"
+                                                style="height:20px;line-height:20px;width:20px"><svg focusable="false"
+                                                                                                     xmlns="http://www.w3.org/2000/svg"
+                                                                                                     viewBox="0 0 24 24"><path
+                                                d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"></path></svg></span>
+                                            </div>
+                                        </div>
+                                        <div class="Vlt3wb" style="display:none"></div>
+                                    </div>
+                                    <span class="XAFD5c" style="display:none"></span>
+                                    <div class="j0GJWd" style="display:none">
+                                        <div><img class="uHGFVd AZNDm" alt="" style="display:none"></img></div>
+                                        <div class="iQxPRb"><img class="uHGFVd EOLKOc" alt=""
+                                                                 style="display:none"></img><img class="uHGFVd EOLKOc"
+                                                                                                 alt=""
+                                                                                                 style="display:none"></img>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="AsqS6c" style="display:none" id="GTYqfc" role="presentation">
+                                    <div class="gfT7kc">
+                                        <div class="cJpYle">
+                                            <div class="lnnVSe" aria-atomic="true" role="option">
+                                                <div class="SHFPkb"></div>
+                                                <div class="bTSf5c"></div>
+                                                <div class="PnfqLc"></div>
+                                                <div class="HrUlUc"></div>
+                                            </div>
+                                            <div class="Tnv2td" style="display:none" aria-label="Word pronunciation"
+                                                 aria-atomic="true" role="button"><span class="z76Rnb z1asCe JKu1je"><svg
+                                                focusable="false" xmlns="http://www.w3.org/2000/svg"
+                                                viewBox="0 0 24 24"><path></path></svg></span></div>
+                                            <span class="XAFD5c" style="display:none"></span></div>
+                                        <div class="gTtFDd">
+                                            <div class="lnnVSe" aria-atomic="true" role="option">
+                                                <div class="SHFPkb"></div>
+                                                <div class="bTSf5c"></div>
+                                                <div class="PnfqLc"></div>
+                                                <div class="HrUlUc"></div>
+                                            </div>
+                                            <div class="Tnv2td" style="display:none" aria-label="Word pronunciation"
+                                                 aria-atomic="true" role="button"><span class="z76Rnb z1asCe JKu1je"><svg
+                                                focusable="false" xmlns="http://www.w3.org/2000/svg"
+                                                viewBox="0 0 24 24"><path></path></svg></span></div>
+                                            <span class="XAFD5c" style="display:none"></span></div>
+                                    </div>
+                                    <div class="xAmryf" id="bgeLZd"><span class="jtAOgd"></span></div>
+                                    <div class="TfeWfb" role="presentation" style="display:none"></div>
+                                    <div class="Vlt3wb" style="display:none"></div>
+                                </div>
+                                <li class="IDVnvc PZPZlf" data-view-type="6" id="TN4rFf" role="presentation"
+                                    data-attrid="AutocompletePrediction"
+                                    data-entityid="autocomplete_user_feedback_kp_id">
+                                    <div class="cRV9hb">
+                                        <div class="aVbWac">
+                                            <div class="sbic"></div>
+                                        </div>
+                                        <div class="pcTkSc" role="presentation">
+                                            <div class="lnnVSe" aria-atomic="true" role="option">
+                                                <div class="wM6W7d"><span></span></div>
+                                                <div class="ClJ9Yb"><span></span></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </li>
+                                <a jsname="lh87ke" class="lh87ke"
+                                   href="https://support.google.com/websearch/answer/106230?hl=en-CH">Learn more</a>
+                            </div>
+                            <div jsname="JUypV">
+                                <div class="WzNHm mWcf0e" jscontroller="gSZvdb" data-dccl="false" role="button"
+                                     tabindex="0" jsdata="vST7rb;_;Ah5zlI" jsaction="i5KCU;kVBCVd:yM1YJe"
+                                     data-ved="0ahUKEwje05373KKKAxWrnf0HHbWNFxoQ6scECBg">
+                                    <div class="VfL2Y LRZwuc">Report inappropriate predictions</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div style="background:url(/images/searchbox/desktop_searchbox_sprites318_hr.webp)"></div>
+            </div>
+            <div id="tophf"><input name="sca_esv" value="fa27aa6c1a2c9000" type="hidden"></input><input
+                value="VhlbZ97QO6u79u8PtZve0AE" name="ei" type="hidden"></input></div>
+        </form>
+        <div class="Q3DXx Efnghe"><span class="gb" style="display:none"></span>
+            <div jscontroller="SJpD2c" jsname="uZkjhb" jsaction="rcuQ6b:npT2md;YQNWc:MMAZpe;zWO23b:FPeyVe">
+                <header class="gb_x gb_Id" id="gb" role="none">
+                    <div class="gb_I gb_bd gb_Z" data-ogsr-fb="true" data-ogsr-alt="" id="gbwa">
+                        <div class="gb_C"><a class="gb_A" aria-label="Google apps"
+                                             href="https://www.google.ch/intl/en/about/products?tab=wh"
+                                             aria-expanded="false" role="button" tabindex="0">
+                            <svg class="gb_E" focusable="false" viewBox="0 0 24 24">
+                                <path></path>
+                                <image src="https://ssl.gstatic.com/gb/images/bar/al-icon.png" alt="" height="24"
+                                       width="24" style="border:none;display:none \\9"></image>
+                            </svg>
+                        </a></div>
+                    </div>
+                    <div class="gb_y" data-ogsr-up=""><a class="gb_A gb_Xa"
+                                                         aria-label="Google Account: Anton Medvedev  \n(anton@cerrion.com)"
+                                                         aria-expanded="false" role="button" tabindex="0"><img
+                        class="gb_O"
+                        src="https://lh3.googleusercontent.com/ogw/AF2bZyj2a4CTzirn3StgfQBcJnykcUV5RMXXr9Xf3nQBVwQcmw=s32-c-mo"
+                        alt="" aria-hidden="true" data-noaft="" data-csiid="VhlbZ97QO6u79u8PtZve0AE_2"
+                        data-atf="1"></img>
+                        <div class="gb_P gb_Q" aria-hidden="true">
+                            <svg class="gb_Ja" height="14" viewBox="0 0 14 14" width="14"
+                                 xmlns="http://www.w3.org/2000/svg">
+                                <circle class="gb_Ka" cx="7" cy="7" r="7"></circle>
+                                <path class="gb_Ma" d="M6 10H8V12H6V10ZM6 2H8V8H6V2Z"></path>
+                            </svg>
+                        </div>
+                    </a>
+                        <div aria-hidden="true">
+                            <iframe role="presentation" frameborder="0" scrolling="no" name="app"
+                                    style="height: 100%; width: 100%; color-scheme: light; visibility: hidden;"></iframe>
+                        </div>
+                        <div></div>
+                        <div></div>
+                    </div>
+                </header>
+                <div jsname="hJoEPd" style="display:none" data-ved="0ahUKEwje05373KKKAxWrnf0HHbWNFxoQxMIJCBk"></div>
+                <div jsname="micRse" style="display:none" data-ved="0ahUKEwje05373KKKAxWrnf0HHbWNFxoQ7JsICBo"></div>
+                <div jsname="t5CbBf" style="display:none" data-ved="0ahUKEwje05373KKKAxWrnf0HHbWNFxoQraQMCBs"></div>
+                <div jsname="Du1Fsb" style="display:none" data-ved="0ahUKEwje05373KKKAxWrnf0HHbWNFxoQzegNCBw"></div>
+                <div jsname="NG1V7d" style="display:none" data-ved="0ahUKEwje05373KKKAxWrnf0HHbWNFxoQ8JsICB0"></div>
+                <div jsname="IZKNDc" style="display:none" data-ved="0ahUKEwje05373KKKAxWrnf0HHbWNFxoQ8ZsICB4"></div>
+                <div jsname="tP7ayb" style="display:none" data-ved="0ahUKEwje05373KKKAxWrnf0HHbWNFxoQ65sICB8"></div>
+                <div jsname="uO6mde" style="display:none" data-ved="0ahUKEwje05373KKKAxWrnf0HHbWNFxoQ8psICCA"></div>
+                <g-snackbar jsname="PWj1Zb" jscontroller="OZLguc" style="display:none" jsshadow=""
+                            jsaction="rcuQ6b:npT2md" id="ow13" __is_owner="true">
+                    <div jsname="Ng57nc" class="yK6jqe" data-ved="0ahUKEwje05373KKKAxWrnf0HHbWNFxoQ4G8IIQ"
+                         jsowner="ow13">
+                        <div class="b77HKf">
+                            <div class="rIxsve" jsslot=""><span class="Txngnb wHYlTd yUTMj">Something went wrong. Your history wasn't deleted.</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div jsname="sM5MNb" aria-live="polite" class="LH3wG"></div>
+                </g-snackbar>
+            </div>
+        </div>
+    </div>
+</div>
+<span class="kpshf line gsr bilit big mdm" style="display:none"></span>
+<div class="main" id="main">
+    <div jsmodel=" ROaKxe" class="e9EfHf" id="cnt">
+        <div class="dodTBe" id="sfcnt"></div>
+        <div class="JryvJ">
+            <div class="ym1pid qS9jbf KLEmSd"></div>
+        </div>
+        <div class="rfiSsc wtAAQb YNk70c">
+            <div class="sBbkle y3NyWc P3mIxe" role="navigation">
+                <div class="TrmO7"></div>
+            </div>
+        </div>
+        <div class="rfiSsc YNk70c">
+            <div class="sBbkle P3mIxe" role="navigation">
+                <div class="xhjkHe">
+                    <div class="TrmO7" data-st-cnt="mode">
+                        <div aria-labelledby="_VhlbZ97QO6u79u8PtZve0AE_24" data-st-tgt="mode" role="navigation">
+                            <div jsname="IZrYQ" class="ZeeOc">
+                                <div id="bqHHPb" class="bqHHPb">
+                                    <div jscontroller="GElbSc" jsmodel="sGwFce" data-d="" data-mpc="4" data-o=""
+                                         data-rlp="14" data-rsi="8" data-shbg="var(--xhUGwc)" data-sz="0" data-tfr=""
+                                         id="hdtb-sc" jsaction="rcuQ6b:npT2md; YcfJ:rWvwbc; sIMx0:PSOd0d;"
+                                         jsdata="MzDsve;_;Ah5zlg" data-id="trc" class="fMHynf Jb8vdb"
+                                         data-hveid="CAgQAA" data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ96AJegQICBAA">
+                                        <h1 class="bNg8Rb OhScic zsYMMe BBwThe" id="_VhlbZ97QO6u79u8PtZve0AE_24">Filters
+                                            and topics</h1>
+                                        <div class="PHj8of">
+                                            <div class="qogDvd" data-hveid="CAgQAQ"
+                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQjMEKegQICBAB">
+                                                <div class="crJ18e">
+                                                    <div role="list" style="display:contents">
+                                                        <div jsname="VIftV" class="Ap1Qsc" role="listitem"
+                                                             data-hveid="CBgQAA"
+                                                             data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQtoAJegQIGBAA"><a
+                                                            class="nPDzT" aria-current="page" aria-disabled="true"
+                                                            role="link" tabindex="-1" data-hveid="CBgQAQ"
+                                                            data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ2Z0MegQIGBAB">
+                                                            <div selected="" jsname="bVqjv" class="YmvwI">All</div>
+                                                        </a></div>
+                                                        <div role="listitem" data-hveid="CBcQAA"
+                                                             data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQtoAJKAB6BAgXEAA">
+                                                            <a class="nPDzT T3FoJb" jsname="VIftV" role="link"
+                                                               data-hveid="CBcQAQ"
+                                                               data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQtKgLegQIFxAB">
+                                                                <div jsname="bVqjv" class="YmvwI">Images</div>
+                                                            </a></div>
+                                                        <div role="listitem" data-hveid="CA4QAA"
+                                                             data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQtoAJKAB6BAgOEAA">
+                                                            <a class="nPDzT T3FoJb" jsname="VIftV" role="link"
+                                                               data-hveid="CA4QAQ"
+                                                               data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQtKgLegQIDhAB">
+                                                                <div jsname="bVqjv" class="YmvwI">Videos</div>
+                                                            </a></div>
+                                                        <div role="listitem" data-hveid="CBUQAA"
+                                                             data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQtoAJKAB6BAgVEAA">
+                                                            <a class="nPDzT T3FoJb" jsname="VIftV" role="link"
+                                                               data-hveid="CBUQAQ"
+                                                               data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQs6gLegQIFRAB">
+                                                                <div jsname="bVqjv" class="YmvwI">Web</div>
+                                                            </a></div>
+                                                        <div role="listitem" data-hveid="CBIQAA"
+                                                             data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQtoAJKAB6BAgSEAA">
+                                                            <a class="LatpMc nPDzT T3FoJb" jsname="VIftV" role="link"
+                                                               data-hveid="CBIQAQ"
+                                                               data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ0pQJegQIEhAB">
+                                                                <div jsname="bVqjv" class="YmvwI">News</div>
+                                                            </a></div>
+                                                        <div role="listitem" data-hveid="CBQQAA"
+                                                             data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQtoAJKAB6BAgUEAA">
+                                                            <a class="LatpMc nPDzT T3FoJb" jsname="VIftV" role="link"
+                                                               data-hveid="CBQQAQ"
+                                                               data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ0pQJegQIFBAB">
+                                                                <div jsname="bVqjv" class="YmvwI">Books</div>
+                                                            </a></div>
+                                                        <div role="listitem" data-hveid="CA0QAA"
+                                                             data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQtoAJKAB6BAgNEAA">
+                                                            <a class="LatpMc nPDzT T3FoJb" jsname="VIftV" role="link"
+                                                               data-hveid="CA0QAQ"
+                                                               data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQi6AMegQIDRAB">
+                                                                <div jsname="bVqjv" class="YmvwI">Maps</div>
+                                                            </a></div>
+                                                        <div jscontroller="xdV1C" class="SF7xd" role="listitem"
+                                                             jsaction="rcuQ6b:npT2md;KyPa0e:Y0y4c">
+                                                            <g-popup jsname="V68bde" class="CzKhHb" jscontroller="DPreE"
+                                                                     jsaction="A05xBd:IYtByb;EOZ57e:WFrRFb;"
+                                                                     jsdata="mVjAjf;_;Ah5zlk" id="ow18"
+                                                                     __is_owner="true">
+                                                                <div jsname="oYxtQd" class="CcNe6e"
+                                                                     aria-expanded="false" aria-haspopup="true"
+                                                                     role="button" tabindex="0"
+                                                                     jsaction="WFrRFb;keydown:uYT2Vb">
+                                                                    <div class="Lu57id"><span
+                                                                        style="height:16px;line-height:16px;width:16px"
+                                                                        class="z1asCe SaPW2b"><svg focusable="false"
+                                                                                                   xmlns="http://www.w3.org/2000/svg"
+                                                                                                   viewBox="0 0 24 24"><path></path></svg></span>More
+                                                                    </div>
+                                                                </div>
+                                                                <div jsname="V68bde" class="UjBGL iRQHZe"
+                                                                     style="display:none;z-index:200" jsowner="ow18">
+                                                                    <div jsname="xl07Ob" class="CybWFf"
+                                                                         id="_VhlbZ97QO6u79u8PtZve0AE_25" tabindex="-1">
+                                                                        <div class="LtmTod"
+                                                                             id="VhlbZ97QO6u79u8PtZve0AE__10">
+                                                                            <div role="listitem" data-hveid="CE4QAA"
+                                                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQtoAJKAB6BAhOEAA">
+                                                                                <a class="LatpMc d4DFfb nPDzT T3FoJb"
+                                                                                   jsname="VIftV" role="link"
+                                                                                   data-hveid="CE4QAQ"
+                                                                                   data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQi6AMegQIThAB">
+                                                                                    <div class="eJWNqc YmvwI"
+                                                                                         jsname="bVqjv">Flights
+                                                                                    </div>
+                                                                                </a></div>
+                                                                        </div>
+                                                                        <div class="LtmTod"
+                                                                             id="VhlbZ97QO6u79u8PtZve0AE__11">
+                                                                            <div role="listitem" data-hveid="CE8QAA"
+                                                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQtoAJKAB6BAhPEAA">
+                                                                                <a class="LatpMc d4DFfb nPDzT T3FoJb"
+                                                                                   jsname="VIftV" role="link"
+                                                                                   data-hveid="CE8QAQ"
+                                                                                   data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ0pQJegQITxAB">
+                                                                                    <div class="eJWNqc YmvwI"
+                                                                                         jsname="bVqjv">Finance
+                                                                                    </div>
+                                                                                </a></div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </g-popup>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="T7Ko6" id="tools_VhlbZ97QO6u79u8PtZve0AE_1" data-noaftde="">
+                                                    <div class="BaegVc YmvwI" id="hdtb-tls" aria-controls="hdtbMenus"
+                                                         aria-expanded="false" role="button" tabindex="0" jsname="bVqjv"
+                                                         data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ2x96BAgIEAQ">Tools
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div jsname="wKal9e"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <span class="wtAAQb"></span>
+        <div data-st-cnt="ee" id="easter-egg">
+            <div class="YNk70c" data-st-tgt="ee"></div>
+        </div>
+        <div jscontroller="HYSCof" class="gke0pe" data-push-down-results="true" data-st-u="top_nav" id="top_nav"
+             jsdata="Z1JpA;_;Ah5zlM" jsaction="rcuQ6b:npT2md">
+            <div class="GLcBOb" id="hdtb">
+                <div class="pZvJc jf0C1c YNk70c" id="hdtbMenus" data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ3B96BAgFEAE">
+                    <div class="SLPe5b y6UnXe">
+                        <div class="BfdGL ZkEmPc" id="tn_VhlbZ97QO6u79u8PtZve0AE_1"><span jscontroller="nabPbb"
+                                                                                          data-ffp="false"
+                                                                                          jsaction="KyPa0e:Y0y4c;BVfjhf:VFzweb;wjOG7e:gDkf4c;"><g-popup
+                            jsname="V68bde" jscontroller="DPreE" jsaction="A05xBd:IYtByb;EOZ57e:WFrRFb;"
+                            jsdata="mVjAjf;_;Ah5zlQ"><div jsname="oYxtQd" class="CcNe6e" aria-expanded="false"
+                                                          aria-haspopup="true" role="button" tabindex="0"
+                                                          jsaction="WFrRFb;keydown:uYT2Vb"><div jsname="LgbsSe"><div
+                            class="AozSsc Yg3U7e"><div class="KTBKoe">Any time</div><span
+                            class="gTl8xb"></span></div></div></div><div jsname="V68bde" class="UjBGL pkWBse iRQHZe"
+                                                                         style="display:none;z-index:200"><g-menu
+                            jsname="xl07Ob" class="cF4V5c Tlae9d yTik0 PBn44e iQXTJe wplJBd" jscontroller="WlNQGd"
+                            role="menu" tabindex="-1"
+                            jsaction="PSl28c;focus:h06R8;keydown:uYT2Vb;mouseenter:WOQqYb;mouseleave:Tx5Rb;mouseover:IgJl9c"><g-menu-item
+                            jsname="NNJLud" class="nvELY EpPYLd GZnQqe" jscontroller="CnSW2d" role="none"
+                            data-short-label="" jsdata="zPXzie;_;Ah5zlU"><div jsname="ibnC6b"
+                                                                              class="YpcDnf OSrXXb HG1dvd" role="none"><div
+                            class="y0fQ9c" aria-checked="true" role="menuitemradio"
+                            tabindex="0">Any time</div></div></g-menu-item><g-menu-item jsname="NNJLud"
+                                                                                        jscontroller="CnSW2d"
+                                                                                        class="EpPYLd GZnQqe"
+                                                                                        role="none" data-short-label=""
+                                                                                        jsdata="zPXzie;_;Ah5zlU"><div
+                            jsname="ibnC6b" class="YpcDnf OSrXXb HG1dvd" role="none"><a aria-checked="false"
+                                                                                        role="menuitemradio">Past hour</a></div></g-menu-item><g-menu-item
+                            jsname="NNJLud" jscontroller="CnSW2d" class="EpPYLd GZnQqe" role="none" data-short-label=""
+                            jsdata="zPXzie;_;Ah5zlU"><div jsname="ibnC6b" class="YpcDnf OSrXXb HG1dvd" role="none"><a
+                            aria-checked="false" role="menuitemradio">Past 24 hours</a></div></g-menu-item><g-menu-item
+                            jsname="NNJLud" jscontroller="CnSW2d" class="EpPYLd GZnQqe" role="none" data-short-label=""
+                            jsdata="zPXzie;_;Ah5zlU"><div jsname="ibnC6b" class="YpcDnf OSrXXb HG1dvd" role="none"><a
+                            aria-checked="false" role="menuitemradio">Past week</a></div></g-menu-item><g-menu-item
+                            jsname="NNJLud" jscontroller="CnSW2d" class="EpPYLd GZnQqe" role="none" data-short-label=""
+                            jsdata="zPXzie;_;Ah5zlU"><div jsname="ibnC6b" class="YpcDnf OSrXXb HG1dvd" role="none"><a
+                            aria-checked="false" role="menuitemradio">Past month</a></div></g-menu-item><g-menu-item
+                            jsname="NNJLud" jscontroller="CnSW2d" class="EpPYLd GZnQqe" role="none" data-short-label=""
+                            jsdata="zPXzie;_;Ah5zlU"><div jsname="ibnC6b" class="YpcDnf OSrXXb HG1dvd" role="none"><a
+                            aria-checked="false" role="menuitemradio">Past year</a></div></g-menu-item><g-menu-item
+                            jsname="NNJLud" jscontroller="CnSW2d" class="EpPYLd GZnQqe" role="none" data-short-label=""
+                            jsdata="zPXzie;_;Ah5zlU"><div jsname="ibnC6b" class="YpcDnf OSrXXb HG1dvd" role="none"><div
+                            class="y0fQ9c" jscontroller="VD4Qme"><span role="menuitem" tabindex="-1" jsaction="EEGHee"
+                                                                       data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQpwV6BAgFEAw">Custom range...</span><g-dialog
+                            jsname="Fg3TAc" jscontroller="VEbNoe"
+                            jsaction="jxvro:Imgh9b;dBhwS:TvD9Pc;mLt3mc;KyPa0e:cRhSI;wjOG7e:cRhSI"
+                            jsdata="gctHtc;_;Ah5zlY" jsshadow=""><div jsname="XKSfm"><div jsname="bF1uUb"
+                                                                                          class="kJFf0c KUf18"></div><div
+                            class="mcPPZ nP0TDe xg7rAe" jsaction="trigger.dBhwS"><div class="LjfRsf" aria-hidden="true"
+                                                                                      role="button" tabindex="0"
+                                                                                      jsaction="focus:sT2f3e"></div><span
+                            jsslot="" jsaction="mLt3mc"><div class="qk7LXc TUOsUe Fb1AKc J6UZg" role="dialog"
+                                                             jsname="b6oohe"><div class="Jy9Ore" role="heading">Customised date range</div><label
+                            jsname="kJX8be" class="Qtsmnf tmDYm" for="OouJcb">From</label><label jsname="RltH6b"
+                                                                                                 class="Qtsmnf iWBKNe"
+                                                                                                 for="rzG2be">To</label><div
+                            class="Gwgzqd" aria-label="Close" role="button" tabindex="0" jsaction="trigger.dBhwS"></div><div
+                            class="NwEGxd"><div class="qomYCd"></div><form action="/search" class="T3kYXe" id="T3kYXe"
+                                                                           method="get"><input name="q"
+                                                                                               value="css selectors generator"
+                                                                                               type="hidden"></input><input
+                            name="sca_esv" value="fa27aa6c1a2c9000" type="hidden"></input><input name="source"
+                                                                                                 type="hidden"
+                                                                                                 value="lnt"></input><input
+                            value="cdr:1,cd_min:x,cd_max:x" id="HjtPBb" name="tbs" type="hidden"></input><input value=""
+                                                                                                                name="tbm"
+                                                                                                                type="hidden"></input><input
+                            class="OouJcb" type="text" value="" autocomplete="off" id="OouJcb" jsaction="focus:daRB0b"
+                            spellcheck="false" data-ms-editor="true"></input><input class="rzG2be" type="text" value=""
+                                                                                    autocomplete="off" id="rzG2be"
+                                                                                    jsaction="focus:daRB0b"
+                                                                                    spellcheck="false"
+                                                                                    data-ms-editor="true"></input><g-button
+                            class="Ru1Ao BwGU8e fE5Rge" jsaction="hNEEAb" role="button" tabindex="0">Go</g-button><input
+                            type="submit" jsaction="zbvklb" style="display:none"></input></form></div></div></span><div
+                            class="LjfRsf" aria-hidden="true" role="button" tabindex="0" jsaction="focus:tuePCd"></div></div></div></g-dialog></div></div></g-menu-item></g-menu></div></g-popup></span><span
+                            jscontroller="nabPbb" data-ffp="false" jsaction="KyPa0e:Y0y4c;BVfjhf:VFzweb;wjOG7e:gDkf4c;"><g-popup
+                            jsname="V68bde" jscontroller="DPreE" jsaction="A05xBd:IYtByb;EOZ57e:WFrRFb;"
+                            jsdata="mVjAjf;_;Ah5zlQ"><div jsname="oYxtQd" class="CcNe6e" aria-expanded="false"
+                                                          aria-haspopup="true" role="button" tabindex="0"
+                                                          jsaction="WFrRFb;keydown:uYT2Vb"><div jsname="LgbsSe"><div
+                            class="AozSsc"><div class="KTBKoe">All results</div><span class="gTl8xb"></span></div></div></div><div
+                            jsname="V68bde" class="UjBGL pkWBse iRQHZe" style="display:none;z-index:200"><g-menu
+                            jsname="xl07Ob" class="cF4V5c Tlae9d yTik0 PBn44e iQXTJe wplJBd" jscontroller="WlNQGd"
+                            role="menu" tabindex="-1"
+                            jsaction="PSl28c;focus:h06R8;keydown:uYT2Vb;mouseenter:WOQqYb;mouseleave:Tx5Rb;mouseover:IgJl9c"><g-menu-item
+                            jsname="NNJLud" class="nvELY EpPYLd GZnQqe" jscontroller="CnSW2d" role="none"
+                            data-short-label="" jsdata="zPXzie;_;Ah5zlU"><div jsname="ibnC6b"
+                                                                              class="YpcDnf OSrXXb HG1dvd" role="none"><div
+                            class="y0fQ9c" aria-checked="true" role="menuitemradio" tabindex="0">All results</div></div></g-menu-item><g-menu-item
+                            jsname="NNJLud" jscontroller="CnSW2d" class="EpPYLd GZnQqe" role="none" data-short-label=""
+                            jsdata="zPXzie;_;Ah5zlU"><div jsname="ibnC6b" class="YpcDnf OSrXXb HG1dvd" role="none"><a
+                            aria-checked="false"
+                            role="menuitemradio">Verbatim</a></div></g-menu-item></g-menu></div></g-popup></span><span> <a> <div
+                            class="AozSsc"><span class="KTBKoe">Advanced Search</span></div> </a> </span></div>
+                        <div class="AQudDd">
+                            <div class="LHJvCe">
+                                <div id="result-stats">About 6’010’000 results
+                                    <nobr> (0.23 seconds) </nobr>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="before-appbar">
+            <div id="_VhlbZ97QO6u79u8PtZve0AE_12">
+                <div>
+                    <div jscontroller="KSk4yc" data-dl="0" data-mcl="1250" data-mwl="-1"
+                         jsaction="PQkOHc:dK6tkc;fFzSRc:v9xSwd;lgFTO:Geh74d;kPzEO:MlP2je;qo5q4d:VvZoSb;LImAlc:VvZoSb;rcuQ6b:npT2md"
+                         class="EyBRub">
+                        <div jsname="suEOdc" class="t4wgMc" style="display:none;opacity:0;transform:scale(0.1)"
+                             aria-hidden="true" data-hveid="CAQQAA"
+                             data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQrOkHegQIBBAA">
+                            <div jsname="V4zgDf" data-jiis="up" data-async-type="ctxm" id="nFiyle" class="yp"
+                                 data-hveid="CAQQAQ" data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQqukHegQIBBAB"></div>
+                            <svg jsname="ojBOCb" class="kdCulb">
+                                <polyline points="0,6 6,0 12,6"></polyline>
+                            </svg>
+                            <svg jsname="GV5nwf" class="LIxbuc">
+                                <polyline points="0,0 6,6 12,0"></polyline>
+                            </svg>
+                            <div jsname="Uo0pef" class="p2Tgt" style="display:none">Ctrl+Shift+X to select</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="gTMtLb fp-nh" id="lb"></div>
+        <div class="appbar" data-st-cnt="appbar" id="appbar">
+            <div data-st-tgt="appbar">
+                <div id="tU52Vb">
+                    <div style="position:relative">
+                        <div class="WE0UJf" id="slim_appbar"></div>
+                    </div>
+                </div>
+                <div jscontroller="sYEX8b" jsname="GGAcbc" class="AeB7Sc" data-eif="1" data-escd="1" data-kulima="1"
+                     id="spic_VhlbZ97QO6u79u8PtZve0AE_1" aria-label="Search settings" role="dialog" tabindex="-1"
+                     jsaction="rcuQ6b:npT2md;Lhx8ef:hZ2GLc;UVNdjb;keydown:mivSOc"
+                     data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQzNQJegQIBhAC">
+                    <div jsname="TItCJc" class="CbAZb" id="elPddd" tabindex="-1" jsaction="mLt3mc"
+                         data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQzpwIegQIBhAD">
+                        <div class="cQ2awd"><img class="bsfygf"
+                                                 src="https://fonts.gstatic.com/s/i/productlogos/googleg/v6/24px.svg"
+                                                 alt="Google"></img>
+                            <h1 class="S8wJ3">Search settings</h1><span class="bepeF z1asCe wuXmqc" aria-label="Close"
+                                                                        role="button" tabindex="0" jsaction="UVNdjb"
+                                                                        data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQy9QJegQIBhAE"><svg
+                                focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path></path></svg></span>
+                        </div>
+                        <div class="q0yked"><a
+                            href="https://myactivity.google.com/product/search?utm_source=google&utm_campaign=quick_settings&hl=en"><span
+                            class="z1asCe dAmgBb"><svg focusable="false" xmlns="http://www.w3.org/2000/svg"
+                                                       viewBox="0 0 24 24"><path></path><path
+                            d="M13 12V6h-2v7l4.97 3.49 1.26-1.55z"></path></svg></span>
+                            <div class="uXoAyd"><span class="ZI7elf">Search history</span><span class="kQEH5b"><span
+                                data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQopYJegQIBhAG">Not saving</span></span></div>
+                        </a></div>
+                        <div class="q0yked"><a><span class="z1asCe"><svg height="24" viewBox="0 -960 960 960" width="24"
+                                                                         xmlns="http://www.w3.org/2000/svg"><path></path></svg></span>
+                            <div class="uXoAyd"><span class="ZI7elf">SafeSearch</span><span
+                                class="kQEH5b">Blurring on</span></div>
+                        </a></div>
+                        <div class="q0yked"><a style="display:flex"><span class="z1asCe Rxk5mb"><svg focusable="false"
+                                                                                                     xmlns="http://www.w3.org/2000/svg"
+                                                                                                     viewBox="0 0 24 24"><path></path></svg></span>
+                            <div class="uXoAyd">
+                                <div class="ZI7elf UCGAnb">Language</div>
+                                <span class="kQEH5b">English</span></div>
+                        </a></div>
+                        <div class="q0yked"><a><span class="z1asCe tSAV7"><svg focusable="false"
+                                                                               xmlns="http://www.w3.org/2000/svg"
+                                                                               enable-background="new 0 0 24 24"
+                                                                               height="24" viewBox="0 0 24 24"
+                                                                               width="24"><rect fill="none" height="24"
+                                                                                                width="24"></rect><path></path></svg></span>
+                            <div class="uXoAyd"><span class="ZI7elf UCGAnb">Dark theme</span><span class="kQEH5b">Device default</span>
+                            </div>
+                        </a></div>
+                        <a class="tGS0Nc" tabindex="0">More settings<span class="z1asCe GNeCNe"><svg focusable="false"
+                                                                                                     xmlns="http://www.w3.org/2000/svg"
+                                                                                                     viewBox="0 0 24 24"><path
+                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></svg></span></a>
+                        <div class="m0uvVb fgc1P">
+                            <div class="q0yked">
+                                <div jsname="QTykS" class="S4xgid" role="button" tabindex="0" jsaction="VsgDoc"
+                                     data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ85sIegQIBhAL"><span
+                                    style="color:#5f6368" class="z1asCe dC6Tmc"><svg focusable="false"
+                                                                                     xmlns="http://www.w3.org/2000/svg"
+                                                                                     viewBox="0 0 24 24"><path></path><path
+                                    d="M11 12h2v2h-2zm0-6h2v4h-2z"></path></svg></span><span class="ZI7elf">Send feedback</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="kzt0Nc"><a href="https://support.google.com/websearch/?p=dsrp_search_hc&hl=en-CH">Help</a> • <a
+                            href="https://policies.google.com/privacy?hl=en-CH&fg=1">Privacy</a> • <a
+                            href="https://policies.google.com/terms?hl=en-CH&fg=1">Terms</a></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="_VhlbZ97QO6u79u8PtZve0AE_14">
+            <div jsname="rSAM5d">
+                <div style="opacity:0" id="arc-stev" data-jiis="up" data-async-type="arc"
+                     data-async-context-required="arc_id,q" class="yp" data-async-rclass="search"></div>
+            </div>
+            <div jsname="UefMMd" class="wEjo2 s6JM6d" style="display:none">
+                <div class="o7umif" aria-valuetext="Loading..." role="progressbar">
+                    <div class="zXoz0d Ww4FFb vt6azd">
+                        <div class="HkhOR">
+                            <div class="LktFoc"></div>
+                            <div class="Cil8Ad"></div>
+                        </div>
+                        <div class="oa4Sce">
+                            <div class="w6s2kb"></div>
+                        </div>
+                    </div>
+                    <div class="zXoz0d Ww4FFb vt6azd">
+                        <div class="HkhOR">
+                            <div class="LktFoc"></div>
+                            <div class="Cil8Ad"></div>
+                        </div>
+                        <div class="oa4Sce">
+                            <div class="w6s2kb"></div>
+                        </div>
+                    </div>
+                    <div class="zXoz0d Ww4FFb vt6azd">
+                        <div class="HkhOR">
+                            <div class="LktFoc"></div>
+                            <div class="Cil8Ad"></div>
+                        </div>
+                        <div class="oa4Sce">
+                            <div class="w6s2kb"></div>
+                        </div>
+                    </div>
+                    <div class="zXoz0d Ww4FFb vt6azd">
+                        <div class="HkhOR">
+                            <div class="LktFoc"></div>
+                            <div class="Cil8Ad"></div>
+                        </div>
+                        <div class="oa4Sce">
+                            <div class="w6s2kb"></div>
+                        </div>
+                    </div>
+                    <div class="zXoz0d Ww4FFb vt6azd">
+                        <div class="HkhOR">
+                            <div class="LktFoc"></div>
+                            <div class="Cil8Ad"></div>
+                        </div>
+                        <div class="oa4Sce">
+                            <div class="w6s2kb"></div>
+                        </div>
+                    </div>
+                    <div class="zXoz0d Ww4FFb vt6azd">
+                        <div class="HkhOR">
+                            <div class="LktFoc"></div>
+                            <div class="Cil8Ad"></div>
+                        </div>
+                        <div class="oa4Sce">
+                            <div class="w6s2kb"></div>
+                        </div>
+                    </div>
+                    <div class="ak9vu"></div>
+                </div>
+            </div>
+            <template jsname="RuLM0e"></template>
+        </div>
+        <div id="YUIDDb" style="display:none"></div>
+        <div class="YNk70c CuvrIe">
+            <div class="UFQ0Gb">
+                <div class="SLPe5b">
+                    <div data-iatvcap="1" data-st-cnt="atvcap" id="atvcap"></div>
+                </div>
+            </div>
+        </div>
+        <div class="YNk70c GyAeWb" id="rcnt">
+            <div class="UFQ0Gb SLPe5b" id="w7tRq">
+                <div class="s6JM6d ufC5Cb" id="center_col" role="main">
+                    <div id="taw">
+                        <div id="oFNiHe" data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQL3oECAQQBA"></div>
+                        <div id="tvcap">
+                            <div data-aqid="VxlbZ9HOBNaHjuwPkair8AE" id="tads" role="region"
+                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQGHoECAQQBQ">
+                                <div></div>
+                                <div></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="eqAnXb" id="res">
+                        <div id="topstuff"></div>
+                        <div id="search">
+                            <div data-hveid="CAQQBw" data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQGnoECAQQBw"><h1
+                                class="bNg8Rb OhScic zsYMMe BBwThe">Search Results</h1>
+                                <div class="dURPMd" eid="VhlbZ97QO6u79u8PtZve0AE"
+                                     data-async-context="query:css%20selectors%20generator" id="rso">
+                                    <div class="hlcw0c">
+                                        <div class="MjjYud">
+                                            <div jscontroller="SC7lYd" class="g Ww4FFb vt6azd tF2Cxc asEBEc" lang="en"
+                                                 style="width:inherit"
+                                                 jsaction="QyLbLe:OMITjf;ewaord:qsYrDe;xd28Mb:A6j43c"
+                                                 data-hveid="CB4QAA"
+                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQFSgAegQIHhAA">
+                                                <div class="N54PNb BToiNc" data-snc="hIfKod">
+                                                    <div class="kb0PBd A9Y9g jGGQ5e" data-snf="x5WNvb" data-snhf="0">
+                                                        <div class="yuRUbf">
+                                                            <div><span jscontroller="msmzHf"
+                                                                       jsaction="rcuQ6b:npT2md;PYDNKe:bLV6Bd;mLt3mc"><a
+                                                                jsname="UWckNb"
+                                                                href="https://css-selector-builder.alexvipond.dev/"
+                                                                data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQFnoECAwQAQ"><br></br><h3
+                                                                class="LC20lb MBeuO DKV0Md">CSS Selector Builder</h3><div
+                                                                class="notranslate HGLrXd NJjxre iUh30 ojE3Fb"><div
+                                                                class="q0vns"><span class="H9lube fJOpI"><div
+                                                                class="eqA2re NjwKYd Vwoesf" aria-hidden="true"><span
+                                                                class="Jj3Uob XNo5Ab z1asCe"
+                                                                style="height:18px;line-height:18px;width:18px"><svg
+                                                                focusable="false" xmlns="http://www.w3.org/2000/svg"
+                                                                viewBox="0 0 24 24"><path></path></svg></span></div></span><div
+                                                                class="CA5RN"><div><span class="VuuXrf">CSS Selector Builder</span></div><div
+                                                                class="byrV5b"><cite class="tjvcx GvPZzd cHaqb"
+                                                                                     role="text">https://css-selector-builder.alexvipond.dev</cite></div></div></div></div><span
+                                                                jscontroller="IX53Tb" jsaction="rcuQ6b:npT2md"
+                                                                style="display:none"></span></a></span>
+                                                                <div class="B6fmyf byrV5b Mg1HEd">
+                                                                    <div class="HGLrXd iUh30 ojE3Fb">
+                                                                        <div class="q0vns"><span class="H9lube fJOpI"><div
+                                                                            class="eqA2re NjwKYd"
+                                                                            style="height:18px;width:18px"></div></span>
+                                                                            <div class="CA5RN">
+                                                                                <div><span class="VuuXrf">CSS Selector Builder</span>
+                                                                                </div>
+                                                                                <div class="byrV5b"><cite
+                                                                                    class="tjvcx GvPZzd cHaqb"
+                                                                                    role="text">https://css-selector-builder.alexvipond.dev</cite>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="csDOgf BCF2pd ezY6nb L48a4c">
+                                                                        <div jscontroller="gOTY1"
+                                                                             data-id="atritem-https://css-selector-builder.alexvipond.dev/"
+                                                                             jsdata="PFrTzf;_;Ah5zlo"
+                                                                             data-viewer-group="1"
+                                                                             jsaction="rcuQ6b:npT2md;aevozb:T2P31d;vcOT6c:C6KsF;k7WJpc:beCLof;jH1Skf:sCDZjb">
+                                                                            <div>
+                                                                                <div jsdata="l7Bhpb;_;Ah5zl8"
+                                                                                     jscontroller="PbHo4e" jsshadow=""
+                                                                                     jsaction="rcuQ6b:npT2md;h5M12e;jGQF0b:kNqZ1c;"
+                                                                                     data-viewer-entrypoint="1"
+                                                                                     data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ2esEegQIDBAJ">
+                                                                                    <div jsslot="">
+                                                                                        <div jsname="I3kE2c"
+                                                                                             class="MJ8UF iTPLzd rNSxBe eY4mx lUn2nc"
+                                                                                             style="position:absolute"
+                                                                                             aria-label="About this result"
+                                                                                             role="button" tabindex="0">
+                                                                                            <span jsname="czHhOd"
+                                                                                                  class="D6lY4c mBswFe"><span
+                                                                                                jsname="Bil8Ae"
+                                                                                                class="xTFaxe z1asCe"
+                                                                                                style="height:18px;line-height:18px;width:18px"><svg
+                                                                                                focusable="false"
+                                                                                                xmlns="http://www.w3.org/2000/svg"
+                                                                                                viewBox="0 0 24 24"><path></path></svg></span></span>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="kb0PBd A9Y9g" data-snf="nke7rc" data-sncf="1">
+                                                        <div class="VwiC3b yXK7lf p4wth r025kc hJNv6b Hdw6tb"
+                                                             style="-webkit-line-clamp:2">Copied! I'm looking for an
+                                                            element...
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <span id="z9PoV" data-csim="" lta="1734023511218"></span></div>
+                                    </div>
+                                    <div class="MjjYud"></div>
+                                    <div class="MjjYud">
+                                        <div jscontroller="SC7lYd" class="g Ww4FFb vt6azd tF2Cxc asEBEc" lang="en"
+                                             style="width:inherit" jsaction="QyLbLe:OMITjf;ewaord:qsYrDe;xd28Mb:A6j43c"
+                                             data-hveid="CBkQAA"
+                                             data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQFSgAegQIGRAA">
+                                            <div class="N54PNb BToiNc" data-snc="iIRhcf">
+                                                <div class="kb0PBd A9Y9g jGGQ5e" data-snf="x5WNvb" data-snhf="0">
+                                                    <div class="yuRUbf">
+                                                        <div><span jscontroller="msmzHf"
+                                                                   jsaction="rcuQ6b:npT2md;PYDNKe:bLV6Bd;mLt3mc"><a
+                                                            jsname="UWckNb"
+                                                            href="https://www.npmjs.com/package/css-selector-generator"
+                                                            data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQFnoECAoQAQ"><br></br><h3
+                                                            class="LC20lb MBeuO DKV0Md">css-selector-generator</h3><div
+                                                            class="notranslate HGLrXd NJjxre iUh30 ojE3Fb"><div
+                                                            class="q0vns"><span class="DDKf1c"><div
+                                                            class="eqA2re UnOTSe Vwoesf" aria-hidden="true"><img
+                                                            class="XNo5Ab" style="height:26px;width:26px" alt=""
+                                                            data-csiid="VhlbZ97QO6u79u8PtZve0AE_3"
+                                                            data-atf="1"></img></div></span><div class="CA5RN"><div><span
+                                                            class="VuuXrf">NPM</span></div><div class="byrV5b"><cite
+                                                            class="qLRx3b tjvcx GvPZzd cHaqb" role="text">https://www.npmjs.com<span
+                                                            class="ylgVCe ob9lvb" role="text"> › package › css-selector-genera...</span></cite></div></div></div></div><span
+                                                            jscontroller="IX53Tb" jsaction="rcuQ6b:npT2md"
+                                                            style="display:none"></span></a></span>
+                                                            <div class="B6fmyf byrV5b Mg1HEd">
+                                                                <div class="HGLrXd iUh30 ojE3Fb">
+                                                                    <div class="q0vns"><span class="DDKf1c"><div
+                                                                        class="eqA2re UnOTSe"
+                                                                        style="height:26px;width:26px"></div></span>
+                                                                        <div class="CA5RN">
+                                                                            <div><span class="VuuXrf">NPM</span></div>
+                                                                            <div class="byrV5b"><cite
+                                                                                class="qLRx3b tjvcx GvPZzd cHaqb"
+                                                                                role="text">https://www.npmjs.com<span
+                                                                                class="ylgVCe ob9lvb" role="text"> › package › css-selector-genera...</span></cite>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="csDOgf BCF2pd ezY6nb L48a4c">
+                                                                    <div jscontroller="gOTY1"
+                                                                         data-id="atritem-https://www.npmjs.com/package/css-selector-generator"
+                                                                         jsdata="PFrTzf;_;Ah5zlo" data-viewer-group="1"
+                                                                         jsaction="rcuQ6b:npT2md;aevozb:T2P31d;vcOT6c:C6KsF;k7WJpc:beCLof;jH1Skf:sCDZjb">
+                                                                        <div>
+                                                                            <div jsdata="l7Bhpb;_;Ah5zlw"
+                                                                                 jscontroller="PbHo4e" jsshadow=""
+                                                                                 jsaction="rcuQ6b:npT2md;h5M12e;jGQF0b:kNqZ1c;"
+                                                                                 data-viewer-entrypoint="1"
+                                                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ2esEegQIChAJ">
+                                                                                <div jsslot="">
+                                                                                    <div jsname="I3kE2c"
+                                                                                         class="MJ8UF iTPLzd rNSxBe eY4mx lUn2nc"
+                                                                                         style="position:absolute"
+                                                                                         aria-label="About this result"
+                                                                                         role="button" tabindex="0">
+                                                                                        <span jsname="czHhOd"
+                                                                                              class="D6lY4c mBswFe"><span
+                                                                                            jsname="Bil8Ae"
+                                                                                            class="xTFaxe z1asCe"
+                                                                                            style="height:18px;line-height:18px;width:18px"><svg
+                                                                                            focusable="false"
+                                                                                            xmlns="http://www.w3.org/2000/svg"
+                                                                                            viewBox="0 0 24 24"><path></path></svg></span></span>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="kb0PBd A9Y9g" data-snf="nke7rc" data-sncf="1">
+                                                    <div class="VwiC3b yXK7lf p4wth r025kc hJNv6b Hdw6tb"
+                                                         style="-webkit-line-clamp:2"><span class="LEwnzc Sqrs4e"><span>24 Oct 2024</span> — </span><span>JavaScript object that creates a unique <em>CSS selector</em> for a given DOM element or multiple DOM elements. It also generates shorter selectors ...</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="MjjYud">
+                                        <div jscontroller="SC7lYd" class="g Ww4FFb vt6azd tF2Cxc asEBEc" lang="en"
+                                             style="width:inherit" jsaction="QyLbLe:OMITjf;ewaord:qsYrDe;xd28Mb:A6j43c"
+                                             data-hveid="CBwQAA"
+                                             data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQFSgAegQIHBAA">
+                                            <div class="N54PNb BToiNc" data-snc="HxbXR">
+                                                <div class="kb0PBd A9Y9g jGGQ5e" data-snf="x5WNvb" data-snhf="0">
+                                                    <div class="yuRUbf">
+                                                        <div><span jscontroller="msmzHf"
+                                                                   jsaction="rcuQ6b:npT2md;PYDNKe:bLV6Bd;mLt3mc"><a
+                                                            jsname="UWckNb"
+                                                            href="https://chromewebstore.google.com/detail/css-selector-helper/gddgceinofapfodcekopkjjelkbjodin?hl=en"
+                                                            data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQFnoECBAQAQ"><br></br><h3
+                                                            class="LC20lb MBeuO DKV0Md">CSS Selector Helper - Chrome Web Store</h3><div
+                                                            class="notranslate HGLrXd NJjxre iUh30 ojE3Fb"><div
+                                                            class="q0vns"><span class="DDKf1c"><div
+                                                            class="eqA2re UnOTSe Vwoesf" aria-hidden="true"><img
+                                                            class="XNo5Ab" style="height:26px;width:26px" alt=""
+                                                            data-csiid="VhlbZ97QO6u79u8PtZve0AE_4"
+                                                            data-atf="1"></img></div></span><div class="CA5RN"><div><span
+                                                            class="VuuXrf">Chrome Web Store</span></div><div
+                                                            class="byrV5b"><cite class="qLRx3b tjvcx GvPZzd cHaqb"
+                                                                                 role="text">https://chromewebstore.google.com<span
+                                                            class="ylgVCe ob9lvb"
+                                                            role="text"> › css-selector-helper</span></cite></div></div></div></div><span
+                                                            jscontroller="IX53Tb" jsaction="rcuQ6b:npT2md"
+                                                            style="display:none"></span></a></span>
+                                                            <div class="B6fmyf byrV5b Mg1HEd">
+                                                                <div class="HGLrXd iUh30 ojE3Fb">
+                                                                    <div class="q0vns"><span class="DDKf1c"><div
+                                                                        class="eqA2re UnOTSe"
+                                                                        style="height:26px;width:26px"></div></span>
+                                                                        <div class="CA5RN">
+                                                                            <div><span
+                                                                                class="VuuXrf">Chrome Web Store</span>
+                                                                            </div>
+                                                                            <div class="byrV5b"><cite
+                                                                                class="qLRx3b tjvcx GvPZzd cHaqb"
+                                                                                role="text">https://chromewebstore.google.com<span
+                                                                                class="ylgVCe ob9lvb" role="text"> › css-selector-helper</span></cite>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="csDOgf BCF2pd ezY6nb L48a4c">
+                                                                    <div jscontroller="gOTY1" jsdata="PFrTzf;_;Ah5zlo"
+                                                                         data-viewer-group="1"
+                                                                         jsaction="rcuQ6b:npT2md;aevozb:T2P31d;vcOT6c:C6KsF;k7WJpc:beCLof;jH1Skf:sCDZjb">
+                                                                        <div>
+                                                                            <div jsdata="l7Bhpb;_;Ah5zl0"
+                                                                                 jscontroller="PbHo4e" jsshadow=""
+                                                                                 jsaction="rcuQ6b:npT2md;h5M12e;jGQF0b:kNqZ1c;"
+                                                                                 data-viewer-entrypoint="1"
+                                                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ2esEegQIEBAJ">
+                                                                                <div jsslot="">
+                                                                                    <div jsname="I3kE2c"
+                                                                                         class="MJ8UF iTPLzd rNSxBe eY4mx lUn2nc"
+                                                                                         style="position:absolute"
+                                                                                         aria-label="About this result"
+                                                                                         role="button" tabindex="0">
+                                                                                        <span jsname="czHhOd"
+                                                                                              class="D6lY4c mBswFe"><span
+                                                                                            jsname="Bil8Ae"
+                                                                                            class="xTFaxe z1asCe"
+                                                                                            style="height:18px;line-height:18px;width:18px"><svg
+                                                                                            focusable="false"
+                                                                                            xmlns="http://www.w3.org/2000/svg"
+                                                                                            viewBox="0 0 24 24"><path></path></svg></span></span>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="kb0PBd A9Y9g" data-snf="nke7rc" data-sncf="1">
+                                                    <div class="VwiC3b yXK7lf p4wth r025kc hJNv6b Hdw6tb"
+                                                         style="-webkit-line-clamp:2"><span><em>CSS Selector</em> Helper makes finding the right <em>CSS selector</em> on a web page much quicker and easier than digging through the HTML.</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="MjjYud">
+                                        <div jscontroller="SC7lYd" class="g Ww4FFb vt6azd tF2Cxc asEBEc" lang="en"
+                                             style="width:inherit" jsaction="QyLbLe:OMITjf;ewaord:qsYrDe;xd28Mb:A6j43c"
+                                             data-hveid="CB8QAA"
+                                             data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQFSgAegQIHxAA">
+                                            <div class="N54PNb BToiNc" data-snc="V9v3Yd">
+                                                <div class="kb0PBd A9Y9g jGGQ5e" data-snf="x5WNvb" data-snhf="0">
+                                                    <div class="yuRUbf">
+                                                        <div><span jscontroller="msmzHf"
+                                                                   jsaction="rcuQ6b:npT2md;PYDNKe:bLV6Bd;mLt3mc"><a
+                                                            jsname="UWckNb"
+                                                            href="https://www.geeksforgeeks.org/how-to-generate-css-selector-automatically/"
+                                                            data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQFnoECAkQAQ"><br></br><h3
+                                                            class="LC20lb MBeuO DKV0Md">How to Generate CSS Selector Automatically</h3><div
+                                                            class="notranslate HGLrXd NJjxre iUh30 ojE3Fb"><div
+                                                            class="q0vns"><span class="DDKf1c"><div
+                                                            class="eqA2re UnOTSe Vwoesf" aria-hidden="true"><img
+                                                            class="XNo5Ab" style="height:26px;width:26px" alt=""
+                                                            data-csiid="VhlbZ97QO6u79u8PtZve0AE_5"
+                                                            data-atf="1"></img></div></span><div class="CA5RN"><div><span
+                                                            class="VuuXrf">GeeksforGeeks</span></div><div
+                                                            class="byrV5b"><cite class="qLRx3b tjvcx GvPZzd cHaqb"
+                                                                                 role="text">https://www.geeksforgeeks.org<span
+                                                            class="ylgVCe ob9lvb" role="text"> › how-to-generate-css-s...</span></cite></div></div></div></div><span
+                                                            jscontroller="IX53Tb" jsaction="rcuQ6b:npT2md"
+                                                            style="display:none"></span></a></span>
+                                                            <div class="B6fmyf byrV5b Mg1HEd">
+                                                                <div class="HGLrXd iUh30 ojE3Fb">
+                                                                    <div class="q0vns"><span class="DDKf1c"><div
+                                                                        class="eqA2re UnOTSe"
+                                                                        style="height:26px;width:26px"></div></span>
+                                                                        <div class="CA5RN">
+                                                                            <div><span
+                                                                                class="VuuXrf">GeeksforGeeks</span>
+                                                                            </div>
+                                                                            <div class="byrV5b"><cite
+                                                                                class="qLRx3b tjvcx GvPZzd cHaqb"
+                                                                                role="text">https://www.geeksforgeeks.org<span
+                                                                                class="ylgVCe ob9lvb" role="text"> › how-to-generate-css-s...</span></cite>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="csDOgf BCF2pd ezY6nb L48a4c">
+                                                                    <div jscontroller="gOTY1"
+                                                                         data-id="atritem-https://www.geeksforgeeks.org/how-to-generate-css-selector-automatically/"
+                                                                         jsdata="PFrTzf;_;Ah5zlo" data-viewer-group="1"
+                                                                         jsaction="rcuQ6b:npT2md;aevozb:T2P31d;vcOT6c:C6KsF;k7WJpc:beCLof;jH1Skf:sCDZjb">
+                                                                        <div>
+                                                                            <div jsdata="l7Bhpb;_;Ah5zmE"
+                                                                                 jscontroller="PbHo4e" jsshadow=""
+                                                                                 jsaction="rcuQ6b:npT2md;h5M12e;jGQF0b:kNqZ1c;"
+                                                                                 data-viewer-entrypoint="1"
+                                                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ2esEegQICRAJ">
+                                                                                <div jsslot="">
+                                                                                    <div jsname="I3kE2c"
+                                                                                         class="MJ8UF iTPLzd rNSxBe eY4mx lUn2nc"
+                                                                                         style="position:absolute"
+                                                                                         aria-label="About this result"
+                                                                                         role="button" tabindex="0">
+                                                                                        <span jsname="czHhOd"
+                                                                                              class="D6lY4c mBswFe"><span
+                                                                                            jsname="Bil8Ae"
+                                                                                            class="xTFaxe z1asCe"
+                                                                                            style="height:18px;line-height:18px;width:18px"><svg
+                                                                                            focusable="false"
+                                                                                            xmlns="http://www.w3.org/2000/svg"
+                                                                                            viewBox="0 0 24 24"><path></path></svg></span></span>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="kb0PBd A9Y9g" data-snf="nke7rc" data-sncf="1">
+                                                    <div class="VwiC3b yXK7lf p4wth r025kc hJNv6b Hdw6tb"
+                                                         style="-webkit-line-clamp:2"><span class="LEwnzc Sqrs4e"><span>6 May 2024</span> — </span><span>Locate the specific HTML element you want to generate a <em>CSS selector</em> for. The selected element will be highlighted in the Elements panel. Right- ...</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="hlcw0c">
+                                        <div class="MjjYud">
+                                            <div jscontroller="SC7lYd" class="g Ww4FFb vt6azd tF2Cxc asEBEc" lang="en"
+                                                 style="width:inherit"
+                                                 jsaction="QyLbLe:OMITjf;ewaord:qsYrDe;xd28Mb:A6j43c"
+                                                 data-hveid="CBoQAA"
+                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQFSgAegQIGhAA">
+                                                <div class="N54PNb BToiNc" data-snc="JfJTP">
+                                                    <div class="kb0PBd A9Y9g jGGQ5e" data-snf="x5WNvb" data-snhf="0">
+                                                        <div class="yuRUbf">
+                                                            <div><span jscontroller="msmzHf"
+                                                                       jsaction="rcuQ6b:npT2md;PYDNKe:bLV6Bd;mLt3mc"><a
+                                                                jsname="UWckNb"
+                                                                href="https://www.ranorex.com/selocity/browser-extension/"
+                                                                data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQFnoECBEQAQ"><br></br><h3
+                                                                class="LC20lb MBeuO DKV0Md">Ranorex Selocity - Your Smart CSS Selector Generator</h3><div
+                                                                class="notranslate HGLrXd NJjxre iUh30 ojE3Fb"><div
+                                                                class="q0vns"><span class="DDKf1c"><div
+                                                                class="eqA2re UnOTSe Vwoesf" aria-hidden="true"><img
+                                                                class="XNo5Ab" style="height:26px;width:26px" alt=""
+                                                                data-csiid="VhlbZ97QO6u79u8PtZve0AE_6"
+                                                                data-atf="1"></img></div></span><div class="CA5RN"><div><span
+                                                                class="VuuXrf">Ranorex</span></div><div
+                                                                class="byrV5b"><cite class="qLRx3b tjvcx GvPZzd cHaqb"
+                                                                                     role="text">https://www.ranorex.com<span
+                                                                class="ylgVCe ob9lvb"
+                                                                role="text"> › Selocity</span></cite></div></div></div></div><span
+                                                                jscontroller="IX53Tb" jsaction="rcuQ6b:npT2md"
+                                                                style="display:none"></span></a></span>
+                                                                <div class="B6fmyf byrV5b Mg1HEd">
+                                                                    <div class="HGLrXd iUh30 ojE3Fb">
+                                                                        <div class="q0vns"><span class="DDKf1c"><div
+                                                                            class="eqA2re UnOTSe"
+                                                                            style="height:26px;width:26px"></div></span>
+                                                                            <div class="CA5RN">
+                                                                                <div><span class="VuuXrf">Ranorex</span>
+                                                                                </div>
+                                                                                <div class="byrV5b"><cite
+                                                                                    class="qLRx3b tjvcx GvPZzd cHaqb"
+                                                                                    role="text">https://www.ranorex.com<span
+                                                                                    class="ylgVCe ob9lvb" role="text"> › Selocity</span></cite>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="csDOgf BCF2pd ezY6nb L48a4c">
+                                                                        <div jscontroller="gOTY1"
+                                                                             data-id="atritem-https://www.ranorex.com/selocity/browser-extension/"
+                                                                             jsdata="PFrTzf;_;Ah5zlo"
+                                                                             data-viewer-group="1"
+                                                                             jsaction="rcuQ6b:npT2md;aevozb:T2P31d;vcOT6c:C6KsF;k7WJpc:beCLof;jH1Skf:sCDZjb">
+                                                                            <div>
+                                                                                <div jsdata="l7Bhpb;_;Ah5zls"
+                                                                                     jscontroller="PbHo4e" jsshadow=""
+                                                                                     jsaction="rcuQ6b:npT2md;h5M12e;jGQF0b:kNqZ1c;"
+                                                                                     data-viewer-entrypoint="1"
+                                                                                     data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ2esEegQIERAJ">
+                                                                                    <div jsslot="">
+                                                                                        <div jsname="I3kE2c"
+                                                                                             class="MJ8UF iTPLzd rNSxBe eY4mx lUn2nc"
+                                                                                             style="position:absolute"
+                                                                                             aria-label="About this result"
+                                                                                             role="button" tabindex="0">
+                                                                                            <span jsname="czHhOd"
+                                                                                                  class="D6lY4c mBswFe"><span
+                                                                                                jsname="Bil8Ae"
+                                                                                                class="xTFaxe z1asCe"
+                                                                                                style="height:18px;line-height:18px;width:18px"><svg
+                                                                                                focusable="false"
+                                                                                                xmlns="http://www.w3.org/2000/svg"
+                                                                                                viewBox="0 0 24 24"><path></path></svg></span></span>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="kb0PBd A9Y9g" data-snf="nke7rc" data-sncf="1">
+                                                        <div class="VwiC3b yXK7lf p4wth r025kc hJNv6b Hdw6tb"
+                                                             style="-webkit-line-clamp:2"><span>Download the free <em>CSS selector generator</em> extension for Chrome DevTools from Ranorex for improved selector quality and faster test creation time.</span>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="MjjYud">
+                                        <div jscontroller="Da4hkd" jsname="bq0EGf" class="cUnQKe"
+                                             data-initq="css selectors generator"
+                                             data-qc="Chdjc3Mgc2VsZWN0b3JzIGdlbmVyYXRvchAAfRU3Az8" data-ulkwtsb="1"
+                                             jsdata="Dmybpc;_;Ah5zmc"
+                                             jsaction="HUiaHb:mlZWMd;FmigO:OKc46b;rcuQ6b:QyrbTd" data-hveid="CDcQAA"
+                                             data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQuU4oAHoECDcQAA">
+                                            <srpx-bugfix></srpx-bugfix>
+                                            <div class="Wt5Tfe">
+                                                <srpx-bugfix></srpx-bugfix>
+                                                <div class="eJH8qe adDDi">
+                                                    <div class="T6zPgb YC72Wc">
+                                                        <div aria-level="2" role="heading"><span
+                                                            class="mgAbYb OSrXXb RES9jf IFnjPb"><span>People also ask</span></span>
+                                                        </div>
+                                                    </div>
+                                                    <span class="YR2tRd"><div jscontroller="gOTY1" data-id="atritem-"
+                                                                              jsdata="PFrTzf;_;Ah5zlo"
+                                                                              data-viewer-group="1"
+                                                                              jsaction="rcuQ6b:npT2md;aevozb:T2P31d;vcOT6c:C6KsF;k7WJpc:beCLof;jH1Skf:sCDZjb"><div><div
+                                                        jsdata="l7Bhpb;_;Ah5zmg" jscontroller="PbHo4e" jsshadow=""
+                                                        jsaction="rcuQ6b:npT2md;h5M12e;jGQF0b:kNqZ1c;"
+                                                        data-viewer-entrypoint="1"
+                                                        data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ2esEegQINxAC"><div
+                                                        jsslot=""><div jsname="I3kE2c"
+                                                                       class="iTPLzd rNSxBe eY4mx lUn2nc"
+                                                                       style="position:absolute"
+                                                                       aria-label="About this result" role="button"
+                                                                       tabindex="0"><span jsname="czHhOd"
+                                                                                          class="D6lY4c mBswFe"><span
+                                                        jsname="Bil8Ae" class="xTFaxe z1asCe"
+                                                        style="height:18px;line-height:18px;width:18px"><svg
+                                                        focusable="false" xmlns="http://www.w3.org/2000/svg"
+                                                        viewBox="0 0 24 24"><path></path></svg></span></span></div></div></div></div></div></span>
+                                                </div>
+                                                <div jsname="N760b" class="LQCGqc" data-sgrd="true"
+                                                     id="_VhlbZ97QO6u79u8PtZve0AE_42">
+                                                    <div jsname="yEVEwb">
+                                                        <div id="VhlbZ97QO6u79u8PtZve0AE__46">
+                                                            <div jscontroller="xfmZMb"
+                                                                 class="wQiwMc related-question-pair"
+                                                                 data-lk="Ghxob3cgdG8gZ2VuZXJhdGUgY3NzIHNlbGVjdG9y"
+                                                                 data-q="How to generate a CSS selector?"
+                                                                 decode-data-ved="1"
+                                                                 jsaction="rcuQ6b:npT2md;aVMkAb:o7YQ2;I4dl7e:MbYi2e;uUCWgf:NlNJyb;lpDHCb:XBVdTe"
+                                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQq7kBKAB6BAgvEAA">
+                                                                <div jsname="YrZdPb"
+                                                                     class="roMIYb o3PDvf HYvwY cS7M8 oST1qe g7pt6d ilulF h373nd"
+                                                                     data-dic="" data-ullb="" jscontroller="aD8OEe"
+                                                                     data-g="" data-sm="" jsshadow=""
+                                                                     jsaction="rcuQ6b:npT2md;C0pONd:mhSdVe;A0VnDe:rXa5ib;IKGI6b:VrL1hd">
+                                                                    <div jsname="clz4Ic" class="ysxiae iRPzcb"></div>
+                                                                    <div data-hveid="CC8QAQ"
+                                                                         data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQj7gIegQILxAB">
+                                                                        <div jsname="tJHJj" class="dnXCYb"
+                                                                             aria-controls="_VhlbZ97QO6u79u8PtZve0AE_40"
+                                                                             aria-expanded="false" role="button"
+                                                                             tabindex="0" jsaction="AWEk5c">
+                                                                            <div jsname="lN6iy" class="JlqpRe"><span
+                                                                                jsname="r4nke"
+                                                                                class="JCzEY tNxQIb"><span
+                                                                                class="CSkcDe">How to generate a CSS selector?</span></span>
+                                                                            </div>
+                                                                            <div class="p8Jhnd" jsname="wgPSWd">
+                                                                                <div jsname="Q8Kwad"
+                                                                                     class="aj35ze"></div>
+                                                                            </div>
+                                                                            <div jsname="pcRaIe" class="L3Ezfd"
+                                                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQuk56BAgvEAI"></div>
+                                                                            <div jsname="gwzXIc" class="ru2Kjc"
+                                                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ36YDegQILxAD"></div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div jsname="NRdf4c" class="bCOlv"
+                                                                         id="_VhlbZ97QO6u79u8PtZve0AE_40"
+                                                                         data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ7NUEegQILxAE">
+                                                                        <div class="IZE3Td" jsslot="">
+                                                                            <div jsname="oQYOj"
+                                                                                 class="r2fjmd t0bRye Sbgr0"
+                                                                                 data-hveid="CC8QBQ"
+                                                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQu04oAHoECC8QBQ">
+                                                                                <div id="VhlbZ97QO6u79u8PtZve0AE__47">
+                                                                                    <div class="wDYxhc" data-md="83">
+                                                                                        <div class="di3YZe">
+                                                                                            <div class="co8aDb"
+                                                                                                 aria-level="3"
+                                                                                                 role="heading"><b>How
+                                                                                                to create a CSS
+                                                                                                Selector</b></div>
+                                                                                            <srpx-bugfix></srpx-bugfix>
+                                                                                            <div class="RqBzHd">
+                                                                                                <ol class="X5LH0c">
+                                                                                                    <li class="TrT0Xe">
+                                                                                                        Go to your page,
+                                                                                                        then select any
+                                                                                                        element that you
+                                                                                                        want to create
+                                                                                                        the selector
+                                                                                                        for. ...
+                                                                                                    </li>
+                                                                                                    <li class="TrT0Xe">
+                                                                                                        Then right-click
+                                                                                                        on the element
+                                                                                                        and select
+                                                                                                        Inspect. ...
+                                                                                                    </li>
+                                                                                                    <li class="TrT0Xe">
+                                                                                                        Then right-click
+                                                                                                        again on the
+                                                                                                        actual HTML
+                                                                                                        element, and
+                                                                                                        select Copy
+                                                                                                        Selector.
+                                                                                                    </li>
+                                                                                                </ol>
+                                                                                                <div class="u9iNfb">
+                                                                                                    <div class="ZGh7Vc">
+                                                                                                        <a class="truncation-information"
+                                                                                                           data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQnLoEegQINBAB">More
+                                                                                                            items...</a>
+                                                                                                    </div>
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                                <div id="VhlbZ97QO6u79u8PtZve0AE__48">
+                                                                                    <div class="g">
+                                                                                        <div data-hveid="CCoQAA"
+                                                                                             data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQFSgAegQIKhAA">
+                                                                                            <div
+                                                                                                style="position:relative"
+                                                                                                class="tF2Cxc">
+                                                                                                <div class="yuRUbf">
+                                                                                                    <div><span
+                                                                                                        jscontroller="msmzHf"
+                                                                                                        jsaction="rcuQ6b:npT2md;PYDNKe:bLV6Bd;mLt3mc"><a
+                                                                                                        jsname="UWckNb"
+                                                                                                        data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQFnoECCoQAw"><br></br><h3
+                                                                                                        class="LC20lb MBeuO DKV0Md">How to create a CSS Selector for use in the Convert Experiences platform</h3><div
+                                                                                                        class="notranslate HGLrXd NJjxre iUh30 ojE3Fb"><div
+                                                                                                        class="q0vns"><span
+                                                                                                        class="H9lube fJOpI"><div
+                                                                                                        class="eqA2re NjwKYd Vwoesf"
+                                                                                                        aria-hidden="true"><span
+                                                                                                        class="Jj3Uob XNo5Ab z1asCe"
+                                                                                                        style="height:18px;line-height:18px;width:18px"><svg
+                                                                                                        focusable="false"
+                                                                                                        xmlns="http://www.w3.org/2000/svg"
+                                                                                                        viewBox="0 0 24 24"><path></path></svg></span></div></span><div
+                                                                                                        class="CA5RN"><div><span
+                                                                                                        class="VuuXrf">Convert Support - Convert Experiences</span></div><div
+                                                                                                        class="byrV5b"><cite
+                                                                                                        class="qLRx3b tjvcx GvPZzd cHaqb"
+                                                                                                        role="text">https://support.convert.com<span
+                                                                                                        class="ylgVCe ob9lvb"
+                                                                                                        role="text"> › en-us › articles › 3600243...</span></cite></div></div></div></div><span
+                                                                                                        jscontroller="IX53Tb"
+                                                                                                        jsaction="rcuQ6b:npT2md"
+                                                                                                        style="display:none"></span></a></span>
+                                                                                                        <div
+                                                                                                            class="B6fmyf byrV5b Mg1HEd">
+                                                                                                            <div
+                                                                                                                class="HGLrXd iUh30 ojE3Fb">
+                                                                                                                <div
+                                                                                                                    class="q0vns">
+                                                                                                                    <span
+                                                                                                                        class="H9lube fJOpI"><div
+                                                                                                                        class="eqA2re NjwKYd"
+                                                                                                                        style="height:18px;width:18px"></div></span>
+                                                                                                                    <div
+                                                                                                                        class="CA5RN">
+                                                                                                                        <div>
+                                                                                                                            <span
+                                                                                                                                class="VuuXrf">Convert Support - Convert Experiences</span>
+                                                                                                                        </div>
+                                                                                                                        <div
+                                                                                                                            class="byrV5b">
+                                                                                                                            <cite
+                                                                                                                                class="qLRx3b tjvcx GvPZzd cHaqb"
+                                                                                                                                role="text">https://support.convert.com<span
+                                                                                                                                class="ylgVCe ob9lvb"
+                                                                                                                                role="text"> › en-us › articles › 3600243...</span></cite>
+                                                                                                                        </div>
+                                                                                                                    </div>
+                                                                                                                </div>
+                                                                                                            </div>
+                                                                                                        </div>
+                                                                                                    </div>
+                                                                                                </div>
+                                                                                                <div class="IsZvec">
+                                                                                                    <span
+                                                                                                        class="aCOpRe ljeAnf p4wth"
+                                                                                                        style="-webkit-line-clamp:2"></span>
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div jsname="yEVEwb">
+                                                        <div id="VhlbZ97QO6u79u8PtZve0AE__49">
+                                                            <div jscontroller="xfmZMb"
+                                                                 class="wQiwMc related-question-pair"
+                                                                 data-lk="Ghpob3cgdG8gY2hvb3NlIGNzcyBzZWxlY3Rvcg"
+                                                                 data-q="How do I choose a CSS selector?"
+                                                                 decode-data-ved="1"
+                                                                 jsaction="rcuQ6b:npT2md;aVMkAb:o7YQ2;I4dl7e:MbYi2e;uUCWgf:NlNJyb;lpDHCb:XBVdTe"
+                                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQq7kBKAB6BAgwEAA">
+                                                                <div jsname="YrZdPb"
+                                                                     class="roMIYb o3PDvf HYvwY oST1qe g7pt6d ilulF h373nd"
+                                                                     data-dic="" data-ullb="" jscontroller="aD8OEe"
+                                                                     data-g="" data-sm="" jsshadow=""
+                                                                     jsaction="rcuQ6b:npT2md;C0pONd:mhSdVe;A0VnDe:rXa5ib;IKGI6b:VrL1hd">
+                                                                    <div jsname="clz4Ic" class="ysxiae iRPzcb"></div>
+                                                                    <div data-hveid="CDAQAQ"
+                                                                         data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQj7gIegQIMBAB">
+                                                                        <div jsname="tJHJj" class="dnXCYb"
+                                                                             aria-controls="_VhlbZ97QO6u79u8PtZve0AE_38"
+                                                                             aria-expanded="false" role="button"
+                                                                             tabindex="0" jsaction="AWEk5c">
+                                                                            <div jsname="lN6iy" class="JlqpRe"><span
+                                                                                jsname="r4nke"
+                                                                                class="JCzEY tNxQIb"><span
+                                                                                class="CSkcDe">How do I choose a CSS selector?</span></span>
+                                                                            </div>
+                                                                            <div class="p8Jhnd" jsname="wgPSWd">
+                                                                                <div jsname="Q8Kwad"
+                                                                                     class="aj35ze"></div>
+                                                                            </div>
+                                                                            <div jsname="pcRaIe" class="L3Ezfd"
+                                                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQuk56BAgwEAI"></div>
+                                                                            <div jsname="gwzXIc" class="ru2Kjc"
+                                                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ36YDegQIMBAD"></div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div jsname="NRdf4c" class="bCOlv"
+                                                                         id="_VhlbZ97QO6u79u8PtZve0AE_38"
+                                                                         data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ7NUEegQIMBAE">
+                                                                        <div class="IZE3Td" jsslot="">
+                                                                            <div jsname="oQYOj"
+                                                                                 class="r2fjmd t0bRye Sbgr0"
+                                                                                 data-hveid="CDAQBQ"
+                                                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQu04oAHoECDAQBQ">
+                                                                                <div id="VhlbZ97QO6u79u8PtZve0AE__50">
+                                                                                    <div
+                                                                                        class="wDYxhc NFQFxe oHglmf xzPb7d"
+                                                                                        data-md="32" style="clear:none"
+                                                                                        data-hveid="CDoQAA"
+                                                                                        data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ4dMGKAB6BAg6EAA">
+                                                                                        <div
+                                                                                            class="H8O85d kno-mrg-si kno-mrg kno-swp"
+                                                                                            style="position:relative;overflow:visible"
+                                                                                            id="media_result_group"
+                                                                                            data-hveid="CDoQAQ">
+                                                                                            <div class="iKjSFe aUc9Gd">
+                                                                                                <div jsmodel="Wn3aEc"
+                                                                                                     data-count="1"
+                                                                                                     data-hveid="CCsQAA">
+                                                                                                    <div>
+                                                                                                        <div jsmodel=""
+                                                                                                             jscontroller="LdB9sd"
+                                                                                                             data-ivep="true"
+                                                                                                             jsaction="PdWSXe:h5M12e;rcuQ6b:npT2md;"
+                                                                                                             jsdata="X2sNs;_;Ah5zmU">
+                                                                                                            <div
+                                                                                                                class="RYdNQb cakeVe"
+                                                                                                                data-h="130"
+                                                                                                                data-nr="1"
+                                                                                                                style="border-top-left-radius:8px;border-top-right-radius:8px"
+                                                                                                                data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQyQ0oAHoECCsQAg">
+                                                                                                                <div
+                                                                                                                    jsname="dTDiAc"
+                                                                                                                    class="eA0Zlc WghbWd FnEtTd ivg-i PZPZlf img-kc-m GMCzAd"
+                                                                                                                    jsdata="j0Opre;tQJeIpKdfgYGuM;Ah5zmY"
+                                                                                                                    jscontroller="Um3BXb"
+                                                                                                                    aria-hidden="true"
+                                                                                                                    data-attrid="image"
+                                                                                                                    data-docid="tQJeIpKdfgYGuM"
+                                                                                                                    data-ivep="true"
+                                                                                                                    data-lpage="https://support.doofinder.com/getting-started/css-selector.html"
+                                                                                                                    data-ni="1"
+                                                                                                                    data-ref-docid="ZJE3fVheH5AVIM"
+                                                                                                                    jsaction="rcuQ6b:npT2md;tuz4af:RrAr1;nptbHe:XEuVS;h5M12e;qWWJ8e:.CLIENT"
+                                                                                                                    data-hveid="CDYQAA"
+                                                                                                                    data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQzkx6BAg2EAA">
+                                                                                                                    <div
+                                                                                                                        jsname="IOBa3c">
+                                                                                                                        <div
+                                                                                                                            jsname="qQjpJ"
+                                                                                                                            class="XOEbc"
+                                                                                                                            role="button"
+                                                                                                                            tabindex="0">
+                                                                                                                            <div>
+                                                                                                                                <div
+                                                                                                                                    data-bla=""
+                                                                                                                                    class="uhHOwf BYbUcd"
+                                                                                                                                    style="height:66px;width:204px">
+                                                                                                                                    <img
+                                                                                                                                        style="margin-left:-13px;width:243px"
+                                                                                                                                        alt="CSS Selector - How to Choose A CSS Selector"
+                                                                                                                                        data-src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSP9Hk6nGnWu0E_6qnMXDBPFRG2YePTVfhU0jqN833r&s"
+                                                                                                                                        src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
+                                                                                                                                        jscontroller="R3fhkb"
+                                                                                                                                        jsaction="rcuQ6b:npT2md;BUYwVb:QT8fkf;LsLGHf:iSvHDf;DdQV6c:QT8fkf"></img>
+                                                                                                                                </div>
+                                                                                                                            </div>
+                                                                                                                        </div>
+                                                                                                                        <div
+                                                                                                                            jsname="tdeeNb"
+                                                                                                                            class="BfmEZb"></div>
+                                                                                                                    </div>
+                                                                                                                </div>
+                                                                                                            </div>
+                                                                                                        </div>
+                                                                                                    </div>
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                                <div id="VhlbZ97QO6u79u8PtZve0AE__53">
+                                                                                    <div class="wDYxhc" data-md="83">
+                                                                                        <div class="di3YZe">
+                                                                                            <div class="co8aDb"
+                                                                                                 aria-level="3"
+                                                                                                 role="heading"><b>How
+                                                                                                To Choose A CSS
+                                                                                                Selector</b></div>
+                                                                                            <srpx-bugfix></srpx-bugfix>
+                                                                                            <div class="RqBzHd">
+                                                                                                <ol class="X5LH0c">
+                                                                                                    <li class="TrT0Xe">
+                                                                                                        Click anywhere
+                                                                                                        on your page
+                                                                                                        with the right
+                                                                                                        button and click
+                                                                                                        "Inspect".
+                                                                                                    </li>
+                                                                                                    <li class="TrT0Xe">
+                                                                                                        Select the box
+                                                                                                        on the toolbar
+                                                                                                        and inspect the
+                                                                                                        page to find
+                                                                                                        where you would
+                                                                                                        like to trigger
+                                                                                                        an element.
+                                                                                                    </li>
+                                                                                                    <li class="TrT0Xe">
+                                                                                                        Once you know
+                                                                                                        where to place
+                                                                                                        it, search for
+                                                                                                        the selector in
+                                                                                                        the HTML code.
+                                                                                                    </li>
+                                                                                                </ol>
+                                                                                                <div class="u9iNfb">
+                                                                                                    <div class="ZGh7Vc">
+                                                                                                        <a class="truncation-information"
+                                                                                                           href="https://support.doofinder.com/getting-started/css-selector.html"
+                                                                                                           data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQnLoEegQINRAB">More
+                                                                                                            items...</a>
+                                                                                                    </div>
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                                <div id="VhlbZ97QO6u79u8PtZve0AE__54">
+                                                                                    <div class="g">
+                                                                                        <div data-hveid="CC0QAA"
+                                                                                             data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQFSgAegQILRAA">
+                                                                                            <div
+                                                                                                style="position:relative"
+                                                                                                class="tF2Cxc">
+                                                                                                <div class="yuRUbf">
+                                                                                                    <div><span
+                                                                                                        jscontroller="msmzHf"
+                                                                                                        jsaction="rcuQ6b:npT2md;PYDNKe:bLV6Bd;mLt3mc"><a
+                                                                                                        jsname="UWckNb"
+                                                                                                        href="https://support.doofinder.com/getting-started/css-selector.html"
+                                                                                                        data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQFnoECC0QAw"><br></br><h3
+                                                                                                        class="LC20lb MBeuO DKV0Md">How to Choose A CSS Selector - Doofinder Support</h3><div
+                                                                                                        class="notranslate HGLrXd NJjxre iUh30 ojE3Fb"><div
+                                                                                                        class="q0vns"><span
+                                                                                                        class="H9lube"><div
+                                                                                                        class="eqA2re NjwKYd Vwoesf"
+                                                                                                        aria-hidden="true"><img
+                                                                                                        class="XNo5Ab"
+                                                                                                        style="height:18px;width:18px"
+                                                                                                        alt=""></img></div></span><div
+                                                                                                        class="CA5RN"><div><span
+                                                                                                        class="VuuXrf">Doofinder Support</span></div><div
+                                                                                                        class="byrV5b"><cite
+                                                                                                        class="qLRx3b tjvcx GvPZzd cHaqb"
+                                                                                                        role="text">https://support.doofinder.com<span
+                                                                                                        class="ylgVCe ob9lvb"
+                                                                                                        role="text"> › getting-started › css-sele...</span></cite></div></div></div></div><span
+                                                                                                        jscontroller="IX53Tb"
+                                                                                                        jsaction="rcuQ6b:npT2md"
+                                                                                                        style="display:none"></span></a></span>
+                                                                                                        <div
+                                                                                                            class="B6fmyf byrV5b Mg1HEd">
+                                                                                                            <div
+                                                                                                                class="HGLrXd iUh30 ojE3Fb">
+                                                                                                                <div
+                                                                                                                    class="q0vns">
+                                                                                                                    <span
+                                                                                                                        class="H9lube"><div
+                                                                                                                        class="eqA2re NjwKYd"
+                                                                                                                        style="height:18px;width:18px"></div></span>
+                                                                                                                    <div
+                                                                                                                        class="CA5RN">
+                                                                                                                        <div>
+                                                                                                                            <span
+                                                                                                                                class="VuuXrf">Doofinder Support</span>
+                                                                                                                        </div>
+                                                                                                                        <div
+                                                                                                                            class="byrV5b">
+                                                                                                                            <cite
+                                                                                                                                class="qLRx3b tjvcx GvPZzd cHaqb"
+                                                                                                                                role="text">https://support.doofinder.com<span
+                                                                                                                                class="ylgVCe ob9lvb"
+                                                                                                                                role="text"> › getting-started › css-sele...</span></cite>
+                                                                                                                        </div>
+                                                                                                                    </div>
+                                                                                                                </div>
+                                                                                                            </div>
+                                                                                                        </div>
+                                                                                                    </div>
+                                                                                                </div>
+                                                                                                <div class="IsZvec">
+                                                                                                    <span
+                                                                                                        class="aCOpRe ljeAnf p4wth"
+                                                                                                        style="-webkit-line-clamp:2"></span>
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div jsname="yEVEwb">
+                                                        <div id="VhlbZ97QO6u79u8PtZve0AE__55">
+                                                            <div jscontroller="xfmZMb"
+                                                                 class="wQiwMc related-question-pair"
+                                                                 data-lk="Ghl3aGF0IGRvZXMgKnt9IG1lYW4gaW4gY3Nz"
+                                                                 data-q="What does *{} mean in CSS?" decode-data-ved="1"
+                                                                 jsaction="rcuQ6b:npT2md;aVMkAb:o7YQ2;I4dl7e:MbYi2e;uUCWgf:NlNJyb;lpDHCb:XBVdTe"
+                                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQq7kBKAB6BAgxEAA">
+                                                                <div jsname="YrZdPb"
+                                                                     class="roMIYb o3PDvf HYvwY oST1qe g7pt6d ilulF h373nd"
+                                                                     data-dic="" data-ullb="" jscontroller="aD8OEe"
+                                                                     data-g="" data-sm="" jsshadow=""
+                                                                     jsaction="rcuQ6b:npT2md;C0pONd:mhSdVe;A0VnDe:rXa5ib;IKGI6b:VrL1hd">
+                                                                    <div jsname="clz4Ic" class="ysxiae iRPzcb"></div>
+                                                                    <div data-hveid="CDEQAQ"
+                                                                         data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQj7gIegQIMRAB">
+                                                                        <div jsname="tJHJj" class="dnXCYb"
+                                                                             aria-controls="_VhlbZ97QO6u79u8PtZve0AE_39"
+                                                                             aria-expanded="false" role="button"
+                                                                             tabindex="0" jsaction="AWEk5c">
+                                                                            <div jsname="lN6iy" class="JlqpRe"><span
+                                                                                jsname="r4nke"
+                                                                                class="JCzEY tNxQIb"><span
+                                                                                class="CSkcDe">What does *{} mean in CSS?</span></span>
+                                                                            </div>
+                                                                            <div class="p8Jhnd" jsname="wgPSWd">
+                                                                                <div jsname="Q8Kwad"
+                                                                                     class="aj35ze"></div>
+                                                                            </div>
+                                                                            <div jsname="pcRaIe" class="L3Ezfd"
+                                                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQuk56BAgxEAI"></div>
+                                                                            <div jsname="gwzXIc" class="ru2Kjc"
+                                                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ36YDegQIMRAD"></div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div jsname="NRdf4c" class="bCOlv"
+                                                                         id="_VhlbZ97QO6u79u8PtZve0AE_39"
+                                                                         data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ7NUEegQIMRAE">
+                                                                        <div class="IZE3Td" jsslot="">
+                                                                            <div jsname="oQYOj"
+                                                                                 class="r2fjmd t0bRye Sbgr0"
+                                                                                 data-hveid="CDEQBQ"
+                                                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQu04oAHoECDEQBQ">
+                                                                                <div id="VhlbZ97QO6u79u8PtZve0AE__56">
+                                                                                    <div class="wDYxhc" data-md="61"
+                                                                                         style="clear:none">
+                                                                                        <div class="LGOjhe"
+                                                                                             data-attrid="wa:/description"
+                                                                                             data-hveid="CDgQAA"><span
+                                                                                            class="ILfuVd" lang="en"><srpx-bugfix></srpx-bugfix><span
+                                                                                            class="hgKElc">The * means "<b>all elements</b>" (a universal selector), so we are setting all elements to have zero margins, and zero padding, thus making them look the same in all browsers.</span></span><span
+                                                                                            class="kX21rb ZYHQ7e">3 Jan 2012</span>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                                <div id="VhlbZ97QO6u79u8PtZve0AE__57">
+                                                                                    <div class="g">
+                                                                                        <div data-hveid="CCwQAA"
+                                                                                             data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQFSgAegQILBAA">
+                                                                                            <div
+                                                                                                style="position:relative"
+                                                                                                class="tF2Cxc">
+                                                                                                <div class="yuRUbf">
+                                                                                                    <div><span
+                                                                                                        jscontroller="msmzHf"
+                                                                                                        jsaction="rcuQ6b:npT2md;PYDNKe:bLV6Bd;mLt3mc"><a
+                                                                                                        jsname="UWckNb"
+                                                                                                        data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQFnoECCwQAw"><br></br><h3
+                                                                                                        class="LC20lb MBeuO DKV0Md">What does "*" mean in CSS? - Stack Overflow</h3><div
+                                                                                                        class="notranslate HGLrXd NJjxre iUh30 ojE3Fb"><div
+                                                                                                        class="q0vns"><span
+                                                                                                        class="H9lube"><div
+                                                                                                        class="eqA2re NjwKYd Vwoesf"
+                                                                                                        aria-hidden="true"><img
+                                                                                                        class="XNo5Ab"
+                                                                                                        style="height:18px;width:18px"
+                                                                                                        alt=""></img></div></span><div
+                                                                                                        class="CA5RN"><div><span
+                                                                                                        class="VuuXrf">Stack Overflow</span></div><div
+                                                                                                        class="byrV5b"><cite
+                                                                                                        class="qLRx3b tjvcx GvPZzd cHaqb"
+                                                                                                        role="text">https://stackoverflow.com<span
+                                                                                                        class="ylgVCe ob9lvb"
+                                                                                                        role="text"> › questions › what-does-mean-...</span></cite></div></div></div></div><span
+                                                                                                        jscontroller="IX53Tb"
+                                                                                                        jsaction="rcuQ6b:npT2md"
+                                                                                                        style="display:none"></span></a></span>
+                                                                                                        <div
+                                                                                                            class="B6fmyf byrV5b Mg1HEd">
+                                                                                                            <div
+                                                                                                                class="HGLrXd iUh30 ojE3Fb">
+                                                                                                                <div
+                                                                                                                    class="q0vns">
+                                                                                                                    <span
+                                                                                                                        class="H9lube"><div
+                                                                                                                        class="eqA2re NjwKYd"
+                                                                                                                        style="height:18px;width:18px"></div></span>
+                                                                                                                    <div
+                                                                                                                        class="CA5RN">
+                                                                                                                        <div>
+                                                                                                                            <span
+                                                                                                                                class="VuuXrf">Stack Overflow</span>
+                                                                                                                        </div>
+                                                                                                                        <div
+                                                                                                                            class="byrV5b">
+                                                                                                                            <cite
+                                                                                                                                class="qLRx3b tjvcx GvPZzd cHaqb"
+                                                                                                                                role="text">https://stackoverflow.com<span
+                                                                                                                                class="ylgVCe ob9lvb"
+                                                                                                                                role="text"> › questions › what-does-mean-...</span></cite>
+                                                                                                                        </div>
+                                                                                                                    </div>
+                                                                                                                </div>
+                                                                                                            </div>
+                                                                                                        </div>
+                                                                                                    </div>
+                                                                                                </div>
+                                                                                                <div class="IsZvec">
+                                                                                                    <span
+                                                                                                        class="aCOpRe ljeAnf p4wth"
+                                                                                                        style="-webkit-line-clamp:2"></span>
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div jsname="yEVEwb">
+                                                        <div id="VhlbZ97QO6u79u8PtZve0AE__58">
+                                                            <div jscontroller="xfmZMb"
+                                                                 class="wQiwMc related-question-pair"
+                                                                 data-lk="Ghx3aGF0IGFyZSB0aGUgNCBjc3Mgc2VsZWN0b3Jz"
+                                                                 data-q="What are the 4 CSS selectors?"
+                                                                 decode-data-ved="1"
+                                                                 jsaction="rcuQ6b:npT2md;aVMkAb:o7YQ2;I4dl7e:MbYi2e;uUCWgf:NlNJyb;lpDHCb:XBVdTe"
+                                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQq7kBKAB6BAgyEAA">
+                                                                <div jsname="YrZdPb"
+                                                                     class="roMIYb o3PDvf HYvwY oST1qe g7pt6d ilulF h373nd"
+                                                                     data-dic="" data-ullb="" jscontroller="aD8OEe"
+                                                                     data-g="" data-sm="" jsshadow=""
+                                                                     jsaction="rcuQ6b:npT2md;C0pONd:mhSdVe;A0VnDe:rXa5ib;IKGI6b:VrL1hd">
+                                                                    <div jsname="clz4Ic" class="ysxiae iRPzcb"></div>
+                                                                    <div data-hveid="CDIQAQ"
+                                                                         data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQj7gIegQIMhAB">
+                                                                        <div jsname="tJHJj" class="dnXCYb"
+                                                                             aria-controls="_VhlbZ97QO6u79u8PtZve0AE_41"
+                                                                             aria-expanded="false" role="button"
+                                                                             tabindex="0" jsaction="AWEk5c">
+                                                                            <div jsname="lN6iy" class="JlqpRe"><span
+                                                                                jsname="r4nke"
+                                                                                class="JCzEY tNxQIb"><span
+                                                                                class="CSkcDe">What are the 4 CSS selectors?</span></span>
+                                                                            </div>
+                                                                            <div class="p8Jhnd" jsname="wgPSWd">
+                                                                                <div jsname="Q8Kwad"
+                                                                                     class="aj35ze"></div>
+                                                                            </div>
+                                                                            <div jsname="pcRaIe" class="L3Ezfd"
+                                                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQuk56BAgyEAI"></div>
+                                                                            <div jsname="gwzXIc" class="ru2Kjc"
+                                                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ36YDegQIMhAD"></div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div jsname="NRdf4c" class="bCOlv"
+                                                                         id="_VhlbZ97QO6u79u8PtZve0AE_41"
+                                                                         data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ7NUEegQIMhAE">
+                                                                        <div class="IZE3Td" jsslot="">
+                                                                            <div jsname="oQYOj"
+                                                                                 class="r2fjmd t0bRye Sbgr0"
+                                                                                 data-hveid="CDIQBQ"
+                                                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQu04oAHoECDIQBQ">
+                                                                                <div id="VhlbZ97QO6u79u8PtZve0AE__59">
+                                                                                    <div class="wDYxhc" data-md="61"
+                                                                                         style="clear:none">
+                                                                                        <div class="LGOjhe"
+                                                                                             data-attrid="wa:/description"
+                                                                                             data-hveid="CDkQAA"><span
+                                                                                            class="BxUVEf ILfuVd"
+                                                                                            lang="en"><srpx-bugfix></srpx-bugfix><span
+                                                                                            class="hgKElc">Simple selectors (select elements based on name, id, class) Combinator selectors (select elements based on a specific relationship between them) Pseudo-class selectors (select elements based on a certain state) Pseudo-elements selectors (select and style a part of an element)</span></span>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                                <div id="VhlbZ97QO6u79u8PtZve0AE__60">
+                                                                                    <div class="g">
+                                                                                        <div data-hveid="CC4QAA"
+                                                                                             data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQFSgAegQILhAA">
+                                                                                            <div
+                                                                                                style="position:relative"
+                                                                                                class="tF2Cxc">
+                                                                                                <div class="yuRUbf">
+                                                                                                    <div><span
+                                                                                                        jscontroller="msmzHf"
+                                                                                                        jsaction="rcuQ6b:npT2md;PYDNKe:bLV6Bd;mLt3mc"><a
+                                                                                                        jsname="UWckNb"
+                                                                                                        data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQFnoECC4QAw"><br></br><h3
+                                                                                                        class="LC20lb MBeuO DKV0Md">CSS Selectors - W3Schools</h3><div
+                                                                                                        class="notranslate HGLrXd NJjxre iUh30 ojE3Fb"><div
+                                                                                                        class="q0vns"><span
+                                                                                                        class="H9lube"><div
+                                                                                                        class="eqA2re NjwKYd Vwoesf"
+                                                                                                        aria-hidden="true"><img
+                                                                                                        class="XNo5Ab"
+                                                                                                        style="height:18px;width:18px"
+                                                                                                        alt=""></img></div></span><div
+                                                                                                        class="CA5RN"><div><span
+                                                                                                        class="VuuXrf">W3Schools</span></div><div
+                                                                                                        class="byrV5b"><cite
+                                                                                                        class="qLRx3b tjvcx GvPZzd cHaqb"
+                                                                                                        role="text">https://www.w3schools.com<span
+                                                                                                        class="ylgVCe ob9lvb"
+                                                                                                        role="text"> › css › css_selectors</span></cite></div></div></div></div><span
+                                                                                                        jscontroller="IX53Tb"
+                                                                                                        jsaction="rcuQ6b:npT2md"
+                                                                                                        style="display:none"></span></a></span>
+                                                                                                        <div
+                                                                                                            class="B6fmyf byrV5b Mg1HEd">
+                                                                                                            <div
+                                                                                                                class="HGLrXd iUh30 ojE3Fb">
+                                                                                                                <div
+                                                                                                                    class="q0vns">
+                                                                                                                    <span
+                                                                                                                        class="H9lube"><div
+                                                                                                                        class="eqA2re NjwKYd"
+                                                                                                                        style="height:18px;width:18px"></div></span>
+                                                                                                                    <div
+                                                                                                                        class="CA5RN">
+                                                                                                                        <div>
+                                                                                                                            <span
+                                                                                                                                class="VuuXrf">W3Schools</span>
+                                                                                                                        </div>
+                                                                                                                        <div
+                                                                                                                            class="byrV5b">
+                                                                                                                            <cite
+                                                                                                                                class="qLRx3b tjvcx GvPZzd cHaqb"
+                                                                                                                                role="text">https://www.w3schools.com<span
+                                                                                                                                class="ylgVCe ob9lvb"
+                                                                                                                                role="text"> › css › css_selectors</span></cite>
+                                                                                                                        </div>
+                                                                                                                    </div>
+                                                                                                                </div>
+                                                                                                            </div>
+                                                                                                        </div>
+                                                                                                    </div>
+                                                                                                </div>
+                                                                                                <div class="IsZvec">
+                                                                                                    <span
+                                                                                                        class="aCOpRe ljeAnf p4wth"
+                                                                                                        style="-webkit-line-clamp:2"></span>
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div jsname="grQLgb" class="yp" data-async-fcv="3"
+                                                         data-async-ons="10041" id="fc_VhlbZ97QO6u79u8PtZve0AE_1"
+                                                         data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQzOMHKAF6BAg3EAM"></div>
+                                                    <g-loading-icon jsname="aZ2wEe"
+                                                                    class="uKh9yc S3PB2d jbBItf GgTJWe VDgVie"
+                                                                    style="display:none;height:30px;min-width:30px"
+                                                                    id="_VhlbZ97QO6u79u8PtZve0AE_43">
+                                                        <div class="lP3Jof nNMuOd" style="height:30px;width:30px"
+                                                             aria-label="Loading..." role="progressbar">
+                                                            <div class="VQdeab RoKmhb">
+                                                                <div class="beDQP">
+                                                                    <div class="DU0NJ SPKFmc x3SdXd J7uuUe"></div>
+                                                                </div>
+                                                                <div class="FcXfi">
+                                                                    <div class="DU0NJ SPKFmc tS3P5"></div>
+                                                                </div>
+                                                                <div class="beDQP">
+                                                                    <div class="DU0NJ SPKFmc x3SdXd sDPIC"></div>
+                                                                </div>
+                                                            </div>
+                                                            <div class="IEqiAf RoKmhb">
+                                                                <div class="beDQP">
+                                                                    <div class="DU0NJ SPKFmc x3SdXd J7uuUe"></div>
+                                                                </div>
+                                                                <div class="FcXfi">
+                                                                    <div class="DU0NJ SPKFmc tS3P5"></div>
+                                                                </div>
+                                                                <div class="beDQP">
+                                                                    <div class="DU0NJ SPKFmc x3SdXd sDPIC"></div>
+                                                                </div>
+                                                            </div>
+                                                            <div class="smocse RoKmhb">
+                                                                <div class="beDQP">
+                                                                    <div class="DU0NJ SPKFmc x3SdXd J7uuUe"></div>
+                                                                </div>
+                                                                <div class="FcXfi">
+                                                                    <div class="DU0NJ SPKFmc tS3P5"></div>
+                                                                </div>
+                                                                <div class="beDQP">
+                                                                    <div class="DU0NJ SPKFmc x3SdXd sDPIC"></div>
+                                                                </div>
+                                                            </div>
+                                                            <div class="FlKbCe RoKmhb">
+                                                                <div class="beDQP">
+                                                                    <div class="DU0NJ SPKFmc x3SdXd J7uuUe"></div>
+                                                                </div>
+                                                                <div class="FcXfi">
+                                                                    <div class="DU0NJ SPKFmc tS3P5"></div>
+                                                                </div>
+                                                                <div class="beDQP">
+                                                                    <div class="DU0NJ SPKFmc x3SdXd sDPIC"></div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </g-loading-icon>
+                                                </div>
+                                                <div class="XVdSCb KFFQ0c xKf9F" style="margin-top:0">
+                                                    <div class="akqY6"></div>
+                                                    <div class="YfftMc">
+                                                        <div class="EyBRub">
+                                                            <div jscontroller="Wo3n8" jsname="aadvhe" jsmodel="d5EhJe"
+                                                                 data-bkt="related_questions" data-eas="" data-fhs=""
+                                                                 jsdata="vST7rb;_;Ah5zmo zEIyGd;_;">
+                                                                <div id="_VhlbZ97QO6u79u8PtZve0AE_46">
+                                                                    <div jsname="GkjeIf"
+                                                                         id="_VhlbZ97QO6u79u8PtZve0AE_49" data-jiis="up"
+                                                                         data-async-type="kp_feedback" class="yp"
+                                                                         data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ68cEKAN6BAg3EAU"></div>
+                                                                </div>
+                                                            </div>
+                                                            <div jscontroller="gSZvdb" class="mWcf0e nKHyTc"
+                                                                 data-dccl="false" role="button" tabindex="0"
+                                                                 jsdata="vST7rb;_;Ah5zmo" jsaction="i5KCU;kVBCVd:yM1YJe"
+                                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ6scEKAR6BAg3EAY">
+                                                                <div class="VfL2Y LRZwuc"><span class="W7GCoc CNbPnc">Feedback</span>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="MjjYud">
+                                        <div jscontroller="SC7lYd" class="g Ww4FFb vt6azd tF2Cxc asEBEc" lang="en"
+                                             style="width:inherit" jsaction="QyLbLe:OMITjf;ewaord:qsYrDe;xd28Mb:A6j43c"
+                                             data-hveid="CCAQAA"
+                                             data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQFSgAegQIIBAA">
+                                            <div class="N54PNb BToiNc" data-snc="MYpGv">
+                                                <div class="kb0PBd A9Y9g jGGQ5e" data-snf="x5WNvb" data-snhf="0">
+                                                    <div class="yuRUbf">
+                                                        <div><span jscontroller="msmzHf"
+                                                                   jsaction="rcuQ6b:npT2md;PYDNKe:bLV6Bd;mLt3mc"><a
+                                                            jsname="UWckNb"
+                                                            href="https://www.cssportal.com/css-selectors/"
+                                                            data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQFnoECBMQAQ"><br></br><h3
+                                                            class="LC20lb MBeuO DKV0Md">CSS Selectors</h3><div
+                                                            class="notranslate HGLrXd NJjxre iUh30 ojE3Fb"><div
+                                                            class="q0vns"><span class="H9lube"><div
+                                                            class="eqA2re NjwKYd Vwoesf" aria-hidden="true"><img
+                                                            class="XNo5Ab" style="height:18px;width:18px" alt=""
+                                                            data-csiid="VhlbZ97QO6u79u8PtZve0AE_7"
+                                                            data-atf="1"></img></div></span><div class="CA5RN"><div><span
+                                                            class="VuuXrf">CSS Portal</span></div><div
+                                                            class="byrV5b"><cite class="qLRx3b tjvcx GvPZzd cHaqb"
+                                                                                 role="text">https://www.cssportal.com<span
+                                                            class="ylgVCe ob9lvb"
+                                                            role="text"> › css-selectors</span></cite></div></div></div></div><span
+                                                            jscontroller="IX53Tb" jsaction="rcuQ6b:npT2md"
+                                                            style="display:none"></span></a></span>
+                                                            <div class="B6fmyf byrV5b Mg1HEd">
+                                                                <div class="HGLrXd iUh30 ojE3Fb">
+                                                                    <div class="q0vns"><span class="H9lube"><div
+                                                                        class="eqA2re NjwKYd"
+                                                                        style="height:18px;width:18px"></div></span>
+                                                                        <div class="CA5RN">
+                                                                            <div><span class="VuuXrf">CSS Portal</span>
+                                                                            </div>
+                                                                            <div class="byrV5b"><cite
+                                                                                class="qLRx3b tjvcx GvPZzd cHaqb"
+                                                                                role="text">https://www.cssportal.com<span
+                                                                                class="ylgVCe ob9lvb" role="text"> › css-selectors</span></cite>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="csDOgf BCF2pd ezY6nb L48a4c">
+                                                                    <div jscontroller="gOTY1"
+                                                                         data-id="atritem-https://www.cssportal.com/css-selectors/"
+                                                                         jsdata="PFrTzf;_;Ah5zlo" data-viewer-group="1"
+                                                                         jsaction="rcuQ6b:npT2md;aevozb:T2P31d;vcOT6c:C6KsF;k7WJpc:beCLof;jH1Skf:sCDZjb">
+                                                                        <div>
+                                                                            <div jsdata="l7Bhpb;_;Ah5zmM"
+                                                                                 jscontroller="PbHo4e" jsshadow=""
+                                                                                 jsaction="rcuQ6b:npT2md;h5M12e;jGQF0b:kNqZ1c;"
+                                                                                 data-viewer-entrypoint="1"
+                                                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ2esEegQIExAJ">
+                                                                                <div jsslot="">
+                                                                                    <div jsname="I3kE2c"
+                                                                                         class="MJ8UF iTPLzd rNSxBe eY4mx lUn2nc"
+                                                                                         style="position:absolute"
+                                                                                         aria-label="About this result"
+                                                                                         role="button" tabindex="0">
+                                                                                        <span jsname="czHhOd"
+                                                                                              class="D6lY4c mBswFe"><span
+                                                                                            jsname="Bil8Ae"
+                                                                                            class="xTFaxe z1asCe"
+                                                                                            style="height:18px;line-height:18px;width:18px"><svg
+                                                                                            focusable="false"
+                                                                                            xmlns="http://www.w3.org/2000/svg"
+                                                                                            viewBox="0 0 24 24"><path></path></svg></span></span>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="kb0PBd A9Y9g" data-snf="nke7rc" data-sncf="1">
+                                                    <div class="VwiC3b yXK7lf p4wth r025kc hJNv6b Hdw6tb"
+                                                         style="-webkit-line-clamp:2"><span><em>CSS Selectors</em> are one of, if not, the most important parts of CSS. They shape the cascade and determine how styles are to be applied to elements on a page.</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="MjjYud">
+                                        <div jscontroller="SC7lYd" class="g Ww4FFb vt6azd tF2Cxc asEBEc" lang="en"
+                                             style="width:inherit" jsaction="QyLbLe:OMITjf;ewaord:qsYrDe;xd28Mb:A6j43c"
+                                             data-hveid="CBsQAA"
+                                             data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQFSgAegQIGxAA">
+                                            <div class="N54PNb BToiNc" data-snc="zZIA9d">
+                                                <div class="kb0PBd A9Y9g jGGQ5e" data-snf="x5WNvb" data-snhf="0">
+                                                    <div class="yuRUbf">
+                                                        <div><span jscontroller="msmzHf"
+                                                                   jsaction="rcuQ6b:npT2md;PYDNKe:bLV6Bd;mLt3mc"><a
+                                                            jsname="UWckNb"
+                                                            href="https://chromewebstore.google.com/detail/css-selector/dobcgekgcmhjmfahepgbpmiaejlpaalc"
+                                                            data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQFnoECA8QAQ"><br></br><h3
+                                                            class="LC20lb MBeuO DKV0Md">CSS Selector - Chrome Web Store</h3><div
+                                                            class="notranslate HGLrXd NJjxre iUh30 ojE3Fb"><div
+                                                            class="q0vns"><span class="DDKf1c"><div
+                                                            class="eqA2re UnOTSe Vwoesf" aria-hidden="true"><img
+                                                            class="XNo5Ab" style="height:26px;width:26px" alt=""
+                                                            data-csiid="VhlbZ97QO6u79u8PtZve0AE_8"
+                                                            data-atf="4"></img></div></span><div class="CA5RN"><div><span
+                                                            class="VuuXrf">Chrome Web Store</span></div><div
+                                                            class="byrV5b"><cite class="qLRx3b tjvcx GvPZzd cHaqb"
+                                                                                 role="text">https://chromewebstore.google.com<span
+                                                            class="ylgVCe ob9lvb"
+                                                            role="text"> › detail › css-selector</span></cite></div></div></div></div><span
+                                                            jscontroller="IX53Tb" jsaction="rcuQ6b:npT2md"
+                                                            style="display:none"></span></a></span>
+                                                            <div class="B6fmyf byrV5b Mg1HEd">
+                                                                <div class="HGLrXd iUh30 ojE3Fb">
+                                                                    <div class="q0vns"><span class="DDKf1c"><div
+                                                                        class="eqA2re UnOTSe"
+                                                                        style="height:26px;width:26px"></div></span>
+                                                                        <div class="CA5RN">
+                                                                            <div><span
+                                                                                class="VuuXrf">Chrome Web Store</span>
+                                                                            </div>
+                                                                            <div class="byrV5b"><cite
+                                                                                class="qLRx3b tjvcx GvPZzd cHaqb"
+                                                                                role="text">https://chromewebstore.google.com<span
+                                                                                class="ylgVCe ob9lvb" role="text"> › detail › css-selector</span></cite>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="csDOgf BCF2pd ezY6nb L48a4c">
+                                                                    <div jscontroller="gOTY1"
+                                                                         data-id="atritem-https://chromewebstore.google.com/detail/css-selector/dobcgekgcmhjmfahepgbpmiaejlpaalc"
+                                                                         jsdata="PFrTzf;_;Ah5zlo" data-viewer-group="1"
+                                                                         jsaction="rcuQ6b:npT2md;aevozb:T2P31d;vcOT6c:C6KsF;k7WJpc:beCLof;jH1Skf:sCDZjb">
+                                                                        <div>
+                                                                            <div jsdata="l7Bhpb;_;Ah5zl4"
+                                                                                 jscontroller="PbHo4e" jsshadow=""
+                                                                                 jsaction="rcuQ6b:npT2md;h5M12e;jGQF0b:kNqZ1c;"
+                                                                                 data-viewer-entrypoint="1"
+                                                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ2esEegQIDxAJ">
+                                                                                <div jsslot="">
+                                                                                    <div jsname="I3kE2c"
+                                                                                         class="MJ8UF iTPLzd rNSxBe eY4mx lUn2nc"
+                                                                                         style="position:absolute"
+                                                                                         aria-label="About this result"
+                                                                                         role="button" tabindex="0">
+                                                                                        <span jsname="czHhOd"
+                                                                                              class="D6lY4c mBswFe"><span
+                                                                                            jsname="Bil8Ae"
+                                                                                            class="xTFaxe z1asCe"
+                                                                                            style="height:18px;line-height:18px;width:18px"><svg
+                                                                                            focusable="false"
+                                                                                            xmlns="http://www.w3.org/2000/svg"
+                                                                                            viewBox="0 0 24 24"><path></path></svg></span></span>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="kb0PBd A9Y9g" data-snf="nke7rc" data-sncf="1">
+                                                    <div class="VwiC3b yXK7lf p4wth r025kc hJNv6b Hdw6tb"
+                                                         style="-webkit-line-clamp:2"><span>Quick, Easy, powerful <em>CSS Selector</em> generation. This extension makes finding the right <em>CSS selector</em> on a web page much quicker and easier than digging through ...</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="MjjYud">
+                                        <div jscontroller="SC7lYd" class="g Ww4FFb vt6azd tF2Cxc asEBEc" lang="en"
+                                             style="width:inherit" jsaction="QyLbLe:OMITjf;ewaord:qsYrDe;xd28Mb:A6j43c"
+                                             data-hveid="CB0QAA"
+                                             data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQFSgAegQIHRAA">
+                                            <div class="N54PNb BToiNc" data-snc="Kg1xsb">
+                                                <div class="kb0PBd A9Y9g jGGQ5e" data-snf="x5WNvb" data-snhf="0">
+                                                    <div class="yuRUbf">
+                                                        <div><span jscontroller="msmzHf"
+                                                                   jsaction="rcuQ6b:npT2md;PYDNKe:bLV6Bd;mLt3mc"><a
+                                                            jsname="UWckNb" href="https://github.com/antonmedv/finder"
+                                                            data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQFnoECAsQAQ"><br></br><h3
+                                                            class="LC20lb MBeuO DKV0Md">antonmedv/finder: CSS Selector Generator</h3><div
+                                                            class="notranslate HGLrXd NJjxre iUh30 ojE3Fb"><div
+                                                            class="q0vns"><span class="H9lube"><div
+                                                            class="eqA2re NjwKYd Vwoesf" aria-hidden="true"><img
+                                                            class="XNo5Ab" style="height:18px;width:18px" alt=""
+                                                            data-csiid="VhlbZ97QO6u79u8PtZve0AE_9"
+                                                            data-atf="4"></img></div></span><div class="CA5RN"><div><span
+                                                            class="VuuXrf">GitHub</span></div><div class="byrV5b"><cite
+                                                            class="qLRx3b tjvcx GvPZzd cHaqb" role="text">https://github.com<span
+                                                            class="ylgVCe ob9lvb"
+                                                            role="text"> › antonmedv › finder</span></cite></div></div></div></div><span
+                                                            jscontroller="IX53Tb" jsaction="rcuQ6b:npT2md"
+                                                            style="display:none"></span></a></span>
+                                                            <div class="B6fmyf byrV5b Mg1HEd">
+                                                                <div class="HGLrXd iUh30 ojE3Fb">
+                                                                    <div class="q0vns"><span class="H9lube"><div
+                                                                        class="eqA2re NjwKYd"
+                                                                        style="height:18px;width:18px"></div></span>
+                                                                        <div class="CA5RN">
+                                                                            <div><span class="VuuXrf">GitHub</span>
+                                                                            </div>
+                                                                            <div class="byrV5b"><cite
+                                                                                class="qLRx3b tjvcx GvPZzd cHaqb"
+                                                                                role="text">https://github.com<span
+                                                                                class="ylgVCe ob9lvb" role="text"> › antonmedv › finder</span></cite>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="csDOgf BCF2pd ezY6nb L48a4c">
+                                                                    <div jscontroller="gOTY1"
+                                                                         data-id="atritem-https://github.com/antonmedv/finder"
+                                                                         jsdata="PFrTzf;_;Ah5zlo" data-viewer-group="1"
+                                                                         jsaction="rcuQ6b:npT2md;aevozb:T2P31d;vcOT6c:C6KsF;k7WJpc:beCLof;jH1Skf:sCDZjb">
+                                                                        <div>
+                                                                            <div jsdata="l7Bhpb;_;Ah5zmA"
+                                                                                 jscontroller="PbHo4e" jsshadow=""
+                                                                                 jsaction="rcuQ6b:npT2md;h5M12e;jGQF0b:kNqZ1c;"
+                                                                                 data-viewer-entrypoint="1"
+                                                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ2esEegQICxAJ">
+                                                                                <div jsslot="">
+                                                                                    <div jsname="I3kE2c"
+                                                                                         class="MJ8UF iTPLzd rNSxBe eY4mx lUn2nc"
+                                                                                         style="position:absolute"
+                                                                                         aria-label="About this result"
+                                                                                         role="button" tabindex="0">
+                                                                                        <span jsname="czHhOd"
+                                                                                              class="D6lY4c mBswFe"><span
+                                                                                            jsname="Bil8Ae"
+                                                                                            class="xTFaxe z1asCe"
+                                                                                            style="height:18px;line-height:18px;width:18px"><svg
+                                                                                            focusable="false"
+                                                                                            xmlns="http://www.w3.org/2000/svg"
+                                                                                            viewBox="0 0 24 24"><path></path></svg></span></span>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="kb0PBd A9Y9g" data-snf="nke7rc" data-sncf="1">
+                                                    <div class="VwiC3b yXK7lf p4wth r025kc hJNv6b Hdw6tb"
+                                                         style="-webkit-line-clamp:2"><span>Features · Generates the shortest <em>selector</em> · Unique <em>selectors</em> per page · Stable and robust <em>selectors</em> · 2kB minified + gzipped. Install. npm ...</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="MjjYud"><span class="oUAcPd" id="fld_VhlbZ97QO6u79u8PtZve0AE_1"
+                                                              data-csim="" lta="1734023511222"></span>
+                                        <div jscontroller="SC7lYd" class="g Ww4FFb vt6azd tF2Cxc asEBEc" lang="en"
+                                             style="width:inherit" jsaction="QyLbLe:OMITjf;ewaord:qsYrDe;xd28Mb:A6j43c"
+                                             data-hveid="CEwQAA"
+                                             data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQFSgAegQITBAA">
+                                            <div class="N54PNb BToiNc" data-snc="aFRCac">
+                                                <div class="kb0PBd A9Y9g jGGQ5e" data-snf="x5WNvb" data-snhf="0">
+                                                    <div class="yuRUbf">
+                                                        <div><span jscontroller="msmzHf"
+                                                                   jsaction="rcuQ6b:npT2md;PYDNKe:bLV6Bd;mLt3mc"><a
+                                                            jsname="UWckNb"
+                                                            href="https://stackoverflow.com/questions/8588301/how-to-generate-unique-css-selector-for-dom-element"
+                                                            data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQFnoECEoQAQ"><br></br><h3
+                                                            class="LC20lb MBeuO DKV0Md">How to generate unique css selector for DOM element?</h3><div
+                                                            class="notranslate HGLrXd NJjxre iUh30 ojE3Fb"><div
+                                                            class="q0vns"><span class="DDKf1c"><div
+                                                            class="eqA2re UnOTSe Vwoesf" aria-hidden="true"><img
+                                                            class="XNo5Ab" style="height:26px;width:26px" alt=""
+                                                            data-csiid="VhlbZ97QO6u79u8PtZve0AE_10" data-atf="4"></img></div></span><div
+                                                            class="CA5RN"><div><span
+                                                            class="VuuXrf">Stack Overflow</span></div><div
+                                                            class="byrV5b"><cite class="qLRx3b tjvcx GvPZzd cHaqb"
+                                                                                 role="text">https://stackoverflow.com<span
+                                                            class="ylgVCe ob9lvb" role="text"> › questions › how-to-generat...</span></cite></div></div></div></div><span
+                                                            jscontroller="IX53Tb" jsaction="rcuQ6b:npT2md"
+                                                            style="display:none"></span></a></span>
+                                                            <div class="B6fmyf byrV5b Mg1HEd">
+                                                                <div class="HGLrXd iUh30 ojE3Fb">
+                                                                    <div class="q0vns"><span class="DDKf1c"><div
+                                                                        class="eqA2re UnOTSe"
+                                                                        style="height:26px;width:26px"></div></span>
+                                                                        <div class="CA5RN">
+                                                                            <div><span
+                                                                                class="VuuXrf">Stack Overflow</span>
+                                                                            </div>
+                                                                            <div class="byrV5b"><cite
+                                                                                class="qLRx3b tjvcx GvPZzd cHaqb"
+                                                                                role="text">https://stackoverflow.com<span
+                                                                                class="ylgVCe ob9lvb" role="text"> › questions › how-to-generat...</span></cite>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="csDOgf BCF2pd ezY6nb L48a4c">
+                                                                    <div jscontroller="gOTY1" jsdata="PFrTzf;_;Ah5zlo"
+                                                                         data-viewer-group="1"
+                                                                         jsaction="rcuQ6b:npT2md;aevozb:T2P31d;vcOT6c:C6KsF;k7WJpc:beCLof;jH1Skf:sCDZjb">
+                                                                        <div>
+                                                                            <div jsdata="l7Bhpb;_;Ah5zm4"
+                                                                                 jscontroller="PbHo4e" jsshadow=""
+                                                                                 jsaction="rcuQ6b:npT2md;h5M12e;jGQF0b:kNqZ1c;"
+                                                                                 data-viewer-entrypoint="1"
+                                                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ2esEegQIShAJ">
+                                                                                <div jsslot="">
+                                                                                    <div jsname="I3kE2c"
+                                                                                         class="MJ8UF iTPLzd rNSxBe eY4mx lUn2nc"
+                                                                                         style="position:absolute"
+                                                                                         aria-label="About this result"
+                                                                                         role="button" tabindex="0">
+                                                                                        <span jsname="czHhOd"
+                                                                                              class="D6lY4c mBswFe"><span
+                                                                                            jsname="Bil8Ae"
+                                                                                            class="xTFaxe z1asCe"
+                                                                                            style="height:18px;line-height:18px;width:18px"><svg
+                                                                                            focusable="false"
+                                                                                            xmlns="http://www.w3.org/2000/svg"
+                                                                                            viewBox="0 0 24 24"><path></path></svg></span></span>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="kb0PBd A9Y9g" data-snf="nke7rc" data-sncf="1">
+                                                    <div class="VwiC3b yXK7lf p4wth r025kc hJNv6b Hdw6tb"
+                                                         style="-webkit-line-clamp:2">
+                                                        <span>I need to generate unique <em>css selector</em> for elements. Particularly, I have onclick event handler that should remember what target element was clicked and send ...</span>
+                                                    </div>
+                                                </div>
+                                                <div class="kb0PBd A9Y9g" data-snf="sYEzk" data-sncf="2">
+                                                    <div>
+                                                        <div>
+                                                            <div>
+                                                                <div class="yaX1fe"><a class="Zv9Ied"
+                                                                                       href="https://stackoverflow.com/a/49663134"
+                                                                                       data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ4-4CegQISxAB">7
+                                                                    answers</a> <span class="OtFxRd"> · </span> <span
+                                                                    class="pW8op">Top answer: </span><span
+                                                                    class="nZ1RBb OSrXXb">This function creates a long, but quite practical unique selector, works quickly. ...</span>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="hlcw0c">
+                                        <div class="MjjYud">
+                                            <div jscontroller="SC7lYd" class="g Ww4FFb vt6azd tF2Cxc asEBEc" lang="en"
+                                                 style="width:inherit"
+                                                 jsaction="QyLbLe:OMITjf;ewaord:qsYrDe;xd28Mb:A6j43c"
+                                                 data-hveid="CEgQAA"
+                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQFSgAegQISBAA">
+                                                <div class="N54PNb BToiNc" data-snc="KaJh3b">
+                                                    <div class="kb0PBd A9Y9g jGGQ5e" data-snf="x5WNvb" data-snhf="0">
+                                                        <div class="yuRUbf">
+                                                            <div><span jscontroller="msmzHf"
+                                                                       jsaction="rcuQ6b:npT2md;PYDNKe:bLV6Bd;mLt3mc"><a
+                                                                jsname="UWckNb"
+                                                                href="https://codesandbox.io/s/css-selector-generator-benchmark-6hk2l"
+                                                                data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQFnoECEcQAQ"><br></br><h3
+                                                                class="LC20lb MBeuO DKV0Md">css-selector-generator-benchmark</h3><div
+                                                                class="notranslate HGLrXd NJjxre iUh30 ojE3Fb"><div
+                                                                class="q0vns"><span class="DDKf1c"><div
+                                                                class="eqA2re UnOTSe Vwoesf" aria-hidden="true"><img
+                                                                class="XNo5Ab" style="height:26px;width:26px" alt=""
+                                                                data-csiid="VhlbZ97QO6u79u8PtZve0AE_11"
+                                                                data-atf="4"></img></div></span><div class="CA5RN"><div><span
+                                                                class="VuuXrf">CodeSandbox</span></div><div
+                                                                class="byrV5b"><cite class="qLRx3b tjvcx GvPZzd cHaqb"
+                                                                                     role="text">https://codesandbox.io<span
+                                                                class="ylgVCe ob9lvb" role="text"> › css-selector-generator-benchm...</span></cite></div></div></div></div><span
+                                                                jscontroller="IX53Tb" jsaction="rcuQ6b:npT2md"
+                                                                style="display:none"></span></a></span>
+                                                                <div class="B6fmyf byrV5b Mg1HEd">
+                                                                    <div class="HGLrXd iUh30 ojE3Fb">
+                                                                        <div class="q0vns"><span class="DDKf1c"><div
+                                                                            class="eqA2re UnOTSe"
+                                                                            style="height:26px;width:26px"></div></span>
+                                                                            <div class="CA5RN">
+                                                                                <div><span
+                                                                                    class="VuuXrf">CodeSandbox</span>
+                                                                                </div>
+                                                                                <div class="byrV5b"><cite
+                                                                                    class="qLRx3b tjvcx GvPZzd cHaqb"
+                                                                                    role="text">https://codesandbox.io<span
+                                                                                    class="ylgVCe ob9lvb" role="text"> › css-selector-generator-benchm...</span></cite>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="csDOgf BCF2pd ezY6nb L48a4c">
+                                                                        <div jscontroller="gOTY1"
+                                                                             data-id="atritem-https://codesandbox.io/s/css-selector-generator-benchmark-6hk2l"
+                                                                             jsdata="PFrTzf;_;Ah5zlo"
+                                                                             data-viewer-group="1"
+                                                                             jsaction="rcuQ6b:npT2md;aevozb:T2P31d;vcOT6c:C6KsF;k7WJpc:beCLof;jH1Skf:sCDZjb">
+                                                                            <div>
+                                                                                <div jsdata="l7Bhpb;_;Ah5zm0"
+                                                                                     jscontroller="PbHo4e" jsshadow=""
+                                                                                     jsaction="rcuQ6b:npT2md;h5M12e;jGQF0b:kNqZ1c;"
+                                                                                     data-viewer-entrypoint="1"
+                                                                                     data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ2esEegQIRxAJ">
+                                                                                    <div jsslot="">
+                                                                                        <div jsname="I3kE2c"
+                                                                                             class="MJ8UF iTPLzd rNSxBe eY4mx lUn2nc"
+                                                                                             style="position:absolute"
+                                                                                             aria-label="About this result"
+                                                                                             role="button" tabindex="0">
+                                                                                            <span jsname="czHhOd"
+                                                                                                  class="D6lY4c mBswFe"><span
+                                                                                                jsname="Bil8Ae"
+                                                                                                class="xTFaxe z1asCe"
+                                                                                                style="height:18px;line-height:18px;width:18px"><svg
+                                                                                                focusable="false"
+                                                                                                xmlns="http://www.w3.org/2000/svg"
+                                                                                                viewBox="0 0 24 24"><path></path></svg></span></span>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="kb0PBd A9Y9g" data-snf="nke7rc" data-sncf="1">
+                                                        <div class="VwiC3b yXK7lf p4wth r025kc hJNv6b Hdw6tb"
+                                                             style="-webkit-line-clamp:2"><span>Benchmark for various JS libraries that generate unique CSS selectors. Explore this online <em>css</em>-<em>selector</em>-<em>generator</em>-benchmark sandbox and experiment with it ...</span>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="bottomads"></div>
+                    <div id="botstuff">
+                        <div data-hveid="CCkQAA" data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQCHoECCkQAA">
+                            <div>
+                                <div></div>
+                            </div>
+                            <div id="bres">
+                                <div class="MjjYud">
+                                    <div id="_VhlbZ97QO6u79u8PtZve0AE_51">
+                                        <div jscontroller="ND0kmf" class="L7w3le AVxOgc" data-fc="1"
+                                             data-q="css selectors generator"
+                                             jsaction="rcuQ6b:npT2md;pbJuwe:P0BF0c;cWX3If:FAhRHe" data-hveid="CD0QAA"
+                                             data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQrpEFegQIPRAA">
+                                            <div jsname="TGR4F" class="yp" data-async-fcv="3" data-async-ons="1261"
+                                                 id="fc_VhlbZ97QO6u79u8PtZve0AE_2"
+                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ3_IGegQIPRAB"></div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="MjjYud">
+                                    <div jscontroller="Da4hkd" jsname="bq0EGf" class="cUnQKe RTaUke"
+                                         data-initq="css selectors generator" data-ispaa="1"
+                                         data-qc="Chdjc3Mgc2VsZWN0b3JzIGdlbmVyYXRvchAAfRU3Az8" data-rppaabc="1"
+                                         data-ulkwtsb="1" jsdata="Dmybpc;_;Ah5zmc"
+                                         jsaction="HUiaHb:mlZWMd;FmigO:OKc46b;rcuQ6b:QyrbTd" data-hveid="CDwQAA"
+                                         data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQuU4oAHoECDwQAA">
+                                        <srpx-bugfix></srpx-bugfix>
+                                        <div class="Wt5Tfe">
+                                            <srpx-bugfix></srpx-bugfix>
+                                            <div class="eJH8qe adDDi">
+                                                <div class="T6zPgb YC72Wc">
+                                                    <div aria-level="2" role="heading"><span
+                                                        class="mgAbYb OSrXXb RES9jf IFnjPb"><span>People also ask</span></span>
+                                                    </div>
+                                                </div>
+                                                <span class="YR2tRd"><div jscontroller="gOTY1" data-id="atritem-"
+                                                                          jsdata="PFrTzf;_;Ah5zlo" data-viewer-group="1"
+                                                                          jsaction="rcuQ6b:npT2md;aevozb:T2P31d;vcOT6c:C6KsF;k7WJpc:beCLof;jH1Skf:sCDZjb"><div><div
+                                                    jsdata="l7Bhpb;_;Ah5zmg" jscontroller="PbHo4e" jsshadow=""
+                                                    jsaction="rcuQ6b:npT2md;h5M12e;jGQF0b:kNqZ1c;"
+                                                    data-viewer-entrypoint="1"
+                                                    data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ2esEegQIPBAC"><div
+                                                    jsslot=""><div jsname="I3kE2c" class="iTPLzd rNSxBe eY4mx lUn2nc"
+                                                                   style="position:absolute"
+                                                                   aria-label="About this result" role="button"
+                                                                   tabindex="0"><span jsname="czHhOd"
+                                                                                      class="D6lY4c mBswFe"><span
+                                                    jsname="Bil8Ae" class="xTFaxe z1asCe"
+                                                    style="height:18px;line-height:18px;width:18px"><svg
+                                                    focusable="false" xmlns="http://www.w3.org/2000/svg"
+                                                    viewBox="0 0 24 24"><path></path></svg></span></span></div></div></div></div></div></span>
+                                            </div>
+                                            <div jsname="N760b" class="LQCGqc" data-sgrd="true"
+                                                 id="_VhlbZ97QO6u79u8PtZve0AE_53">
+                                                <div jsname="grQLgb" class="yp" data-async-fcv="3"
+                                                     data-async-ons="10041" id="fc_VhlbZ97QO6u79u8PtZve0AE_3"
+                                                     data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQzOMHKAF6BAg8EAM"></div>
+                                                <g-loading-icon jsname="aZ2wEe"
+                                                                class="uKh9yc S3PB2d jbBItf GgTJWe VDgVie"
+                                                                style="display:none;height:30px;min-width:30px"
+                                                                id="_VhlbZ97QO6u79u8PtZve0AE_54">
+                                                    <div class="lP3Jof nNMuOd" style="height:30px;width:30px"
+                                                         aria-label="Loading..." role="progressbar">
+                                                        <div class="VQdeab RoKmhb">
+                                                            <div class="beDQP">
+                                                                <div class="DU0NJ SPKFmc x3SdXd J7uuUe"></div>
+                                                            </div>
+                                                            <div class="FcXfi">
+                                                                <div class="DU0NJ SPKFmc tS3P5"></div>
+                                                            </div>
+                                                            <div class="beDQP">
+                                                                <div class="DU0NJ SPKFmc x3SdXd sDPIC"></div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="IEqiAf RoKmhb">
+                                                            <div class="beDQP">
+                                                                <div class="DU0NJ SPKFmc x3SdXd J7uuUe"></div>
+                                                            </div>
+                                                            <div class="FcXfi">
+                                                                <div class="DU0NJ SPKFmc tS3P5"></div>
+                                                            </div>
+                                                            <div class="beDQP">
+                                                                <div class="DU0NJ SPKFmc x3SdXd sDPIC"></div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="smocse RoKmhb">
+                                                            <div class="beDQP">
+                                                                <div class="DU0NJ SPKFmc x3SdXd J7uuUe"></div>
+                                                            </div>
+                                                            <div class="FcXfi">
+                                                                <div class="DU0NJ SPKFmc tS3P5"></div>
+                                                            </div>
+                                                            <div class="beDQP">
+                                                                <div class="DU0NJ SPKFmc x3SdXd sDPIC"></div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="FlKbCe RoKmhb">
+                                                            <div class="beDQP">
+                                                                <div class="DU0NJ SPKFmc x3SdXd J7uuUe"></div>
+                                                            </div>
+                                                            <div class="FcXfi">
+                                                                <div class="DU0NJ SPKFmc tS3P5"></div>
+                                                            </div>
+                                                            <div class="beDQP">
+                                                                <div class="DU0NJ SPKFmc x3SdXd sDPIC"></div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </g-loading-icon>
+                                            </div>
+                                            <div class="XVdSCb KFFQ0c xKf9F" style="margin-top:0">
+                                                <div class="akqY6"></div>
+                                                <div class="YfftMc">
+                                                    <div class="EyBRub">
+                                                        <div jscontroller="Wo3n8" jsname="aadvhe" jsmodel="d5EhJe"
+                                                             data-bkt="related_questions" data-eas="" data-fhs=""
+                                                             jsdata="vST7rb;_;Ah5zms zEIyGd;_;">
+                                                            <div id="_VhlbZ97QO6u79u8PtZve0AE_57">
+                                                                <div jsname="GkjeIf" id="_VhlbZ97QO6u79u8PtZve0AE_60"
+                                                                     data-jiis="up" data-async-type="kp_feedback"
+                                                                     class="yp"
+                                                                     data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ68cEKAN6BAg8EAU"></div>
+                                                            </div>
+                                                        </div>
+                                                        <div jscontroller="gSZvdb" class="mWcf0e nKHyTc"
+                                                             data-dccl="false" role="button" tabindex="0"
+                                                             jsdata="vST7rb;_;Ah5zms" jsaction="i5KCU;kVBCVd:yM1YJe"
+                                                             data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ6scEKAR6BAg8EAY">
+                                                            <div class="VfL2Y LRZwuc"><span class="W7GCoc CNbPnc">Feedback</span>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="ULSxyf">
+                                    <div class="MjjYud">
+                                        <div data-abe="" data-hveid="CD4QAA"
+                                             data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ26YDegQIPhAA">
+                                            <div class="oIk2Cb">
+                                                <div class="kfsfbe adDDi">
+                                                    <div class="T6zPgb YC72Wc">
+                                                        <div aria-level="2" role="heading"><span
+                                                            class="mgAbYb OSrXXb RES9jf IFnjPb">People also search for</span>
+                                                        </div>
+                                                    </div>
+                                                    <span class="YR2tRd"><div jscontroller="gOTY1" data-id="atritem-"
+                                                                              jsdata="PFrTzf;_;Ah5zlo"
+                                                                              data-viewer-group="1"
+                                                                              jsaction="rcuQ6b:npT2md;aevozb:T2P31d;vcOT6c:C6KsF;k7WJpc:beCLof;jH1Skf:sCDZjb"><div><div
+                                                        jsdata="l7Bhpb;_;Ah5zmw" jscontroller="PbHo4e" jsshadow=""
+                                                        jsaction="rcuQ6b:npT2md;h5M12e;jGQF0b:kNqZ1c;"
+                                                        data-viewer-entrypoint="1"
+                                                        data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ2esEegQIPhAC"><div
+                                                        jsslot=""><div jsname="I3kE2c"
+                                                                       class="iTPLzd rNSxBe eY4mx lUn2nc"
+                                                                       style="position:absolute"
+                                                                       aria-label="About this result" role="button"
+                                                                       tabindex="0"><span jsname="czHhOd"
+                                                                                          class="D6lY4c mBswFe"><span
+                                                        jsname="Bil8Ae" class="xTFaxe z1asCe"
+                                                        style="height:18px;line-height:18px;width:18px"><svg
+                                                        focusable="false" xmlns="http://www.w3.org/2000/svg"
+                                                        viewBox="0 0 24 24"><path></path></svg></span></span></div></div></div></div></div></span>
+                                                </div>
+                                                <div class="y6Uyqe">
+                                                    <div class="EIaa9b">
+                                                        <div class="AJLUJb">
+                                                            <div class="b2Rnsc vIifob">
+                                                                <div style="position:relative" class="qR29te"
+                                                                     data-hveid="CEUQAA">
+                                                                    <div><a class="ngTNl ggLgoc">
+                                                                        <div class="B2VR9 CJHX3e">
+                                                                            <div class="wyccme">
+                                                                                <div>
+                                                                                    <div class="oatEtb">
+                                                                                        <div class="mtv5bd"><span
+                                                                                            class="dg6jd">Css selectors generator <b>online</b></span>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                            <div class="XbQ34c">
+                                                                                <div class="DxHbyd OvQkSb eJtrMc"><span
+                                                                                    class="yiwlZe z1asCe MZy1Rb"
+                                                                                    style="height:20px;line-height:20px;width:20px"><svg
+                                                                                    focusable="false"
+                                                                                    xmlns="http://www.w3.org/2000/svg"
+                                                                                    viewBox="0 0 24 24"><path></path></svg></span>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </a></div>
+                                                                </div>
+                                                            </div>
+                                                            <div class="b2Rnsc vIifob">
+                                                                <div style="position:relative" class="qR29te"
+                                                                     data-hveid="CEYQAA">
+                                                                    <div><a class="ngTNl ggLgoc">
+                                                                        <div class="B2VR9 CJHX3e">
+                                                                            <div class="wyccme">
+                                                                                <div>
+                                                                                    <div class="oatEtb">
+                                                                                        <div class="mtv5bd"><span
+                                                                                            class="dg6jd">Css selectors generator <b>github</b></span>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                            <div class="XbQ34c">
+                                                                                <div class="DxHbyd OvQkSb eJtrMc"><span
+                                                                                    class="yiwlZe z1asCe MZy1Rb"
+                                                                                    style="height:20px;line-height:20px;width:20px"><svg
+                                                                                    focusable="false"
+                                                                                    xmlns="http://www.w3.org/2000/svg"
+                                                                                    viewBox="0 0 24 24"><path></path></svg></span>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </a></div>
+                                                                </div>
+                                                            </div>
+                                                            <div class="b2Rnsc vIifob">
+                                                                <div style="position:relative" class="qR29te"
+                                                                     data-hveid="CEMQAA">
+                                                                    <div><a class="ngTNl ggLgoc">
+                                                                        <div class="B2VR9 CJHX3e">
+                                                                            <div class="wyccme">
+                                                                                <div>
+                                                                                    <div class="oatEtb">
+                                                                                        <div class="mtv5bd"><span
+                                                                                            class="dg6jd"><b>Free</b> css selectors generator</span>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                            <div class="XbQ34c">
+                                                                                <div class="DxHbyd OvQkSb eJtrMc"><span
+                                                                                    class="yiwlZe z1asCe MZy1Rb"
+                                                                                    style="height:20px;line-height:20px;width:20px"><svg
+                                                                                    focusable="false"
+                                                                                    xmlns="http://www.w3.org/2000/svg"
+                                                                                    viewBox="0 0 24 24"><path></path></svg></span>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </a></div>
+                                                                </div>
+                                                            </div>
+                                                            <div class="b2Rnsc vIifob">
+                                                                <div style="position:relative" class="qR29te"
+                                                                     data-hveid="CEIQAA">
+                                                                    <div><a class="ngTNl ggLgoc">
+                                                                        <div class="B2VR9 CJHX3e">
+                                                                            <div class="wyccme">
+                                                                                <div>
+                                                                                    <div class="oatEtb">
+                                                                                        <div class="mtv5bd"><span
+                                                                                            class="dg6jd"><b>Best</b> css selectors generator</span>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                            <div class="XbQ34c">
+                                                                                <div class="DxHbyd OvQkSb eJtrMc"><span
+                                                                                    class="yiwlZe z1asCe MZy1Rb"
+                                                                                    style="height:20px;line-height:20px;width:20px"><svg
+                                                                                    focusable="false"
+                                                                                    xmlns="http://www.w3.org/2000/svg"
+                                                                                    viewBox="0 0 24 24"><path></path></svg></span>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </a></div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="AJLUJb">
+                                                            <div class="b2Rnsc vIifob">
+                                                                <div style="position:relative" class="qR29te"
+                                                                     data-hveid="CEEQAA">
+                                                                    <div><a class="ngTNl ggLgoc">
+                                                                        <div class="B2VR9 CJHX3e">
+                                                                            <div class="wyccme">
+                                                                                <div>
+                                                                                    <div class="oatEtb">
+                                                                                        <div class="mtv5bd"><span
+                                                                                            class="dg6jd">CSS <b>selector online tool</b></span>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                            <div class="XbQ34c">
+                                                                                <div class="DxHbyd OvQkSb eJtrMc"><span
+                                                                                    class="yiwlZe z1asCe MZy1Rb"
+                                                                                    style="height:20px;line-height:20px;width:20px"><svg
+                                                                                    focusable="false"
+                                                                                    xmlns="http://www.w3.org/2000/svg"
+                                                                                    viewBox="0 0 24 24"><path></path></svg></span>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </a></div>
+                                                                </div>
+                                                            </div>
+                                                            <div class="b2Rnsc vIifob">
+                                                                <div style="position:relative" class="qR29te"
+                                                                     data-hveid="CEQQAA">
+                                                                    <div><a class="ngTNl ggLgoc">
+                                                                        <div class="B2VR9 CJHX3e">
+                                                                            <div class="wyccme">
+                                                                                <div>
+                                                                                    <div class="oatEtb">
+                                                                                        <div class="mtv5bd"><span
+                                                                                            class="dg6jd">CSS <b>selector helper</b></span>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                            <div class="XbQ34c">
+                                                                                <div class="DxHbyd OvQkSb eJtrMc"><span
+                                                                                    class="yiwlZe z1asCe MZy1Rb"
+                                                                                    style="height:20px;line-height:20px;width:20px"><svg
+                                                                                    focusable="false"
+                                                                                    xmlns="http://www.w3.org/2000/svg"
+                                                                                    viewBox="0 0 24 24"><path></path></svg></span>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </a></div>
+                                                                </div>
+                                                            </div>
+                                                            <div class="b2Rnsc vIifob">
+                                                                <div style="position:relative" class="qR29te"
+                                                                     data-hveid="CEAQAA">
+                                                                    <div><a class="ngTNl ggLgoc">
+                                                                        <div class="B2VR9 CJHX3e">
+                                                                            <div class="wyccme">
+                                                                                <div>
+                                                                                    <div class="oatEtb">
+                                                                                        <div class="mtv5bd"><span
+                                                                                            class="dg6jd"><b>Generate</b> CSS <b>selector for element</b></span>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                            <div class="XbQ34c">
+                                                                                <div class="DxHbyd OvQkSb eJtrMc"><span
+                                                                                    class="yiwlZe z1asCe MZy1Rb"
+                                                                                    style="height:20px;line-height:20px;width:20px"><svg
+                                                                                    focusable="false"
+                                                                                    xmlns="http://www.w3.org/2000/svg"
+                                                                                    viewBox="0 0 24 24"><path></path></svg></span>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </a></div>
+                                                                </div>
+                                                            </div>
+                                                            <div class="b2Rnsc vIifob">
+                                                                <div style="position:relative" class="qR29te"
+                                                                     data-hveid="CD8QAA">
+                                                                    <div><a class="ngTNl ggLgoc">
+                                                                        <div class="B2VR9 CJHX3e">
+                                                                            <div class="wyccme">
+                                                                                <div>
+                                                                                    <div class="oatEtb">
+                                                                                        <div class="mtv5bd"><span
+                                                                                            class="dg6jd">CSS <b>selector Chrome extension</b></span>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                            <div class="XbQ34c">
+                                                                                <div class="DxHbyd OvQkSb eJtrMc"><span
+                                                                                    class="yiwlZe z1asCe MZy1Rb"
+                                                                                    style="height:20px;line-height:20px;width:20px"><svg
+                                                                                    focusable="false"
+                                                                                    xmlns="http://www.w3.org/2000/svg"
+                                                                                    viewBox="0 0 24 24"><path></path></svg></span>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </a></div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div role="navigation"><h1 class="bNg8Rb OhScic zsYMMe BBwThe">Page navigation</h1>
+                                <table class="AaVjTc" style="border-collapse:collapse;text-align:left"
+                                       role="presentation">
+                                    <tbody>
+                                    <tr jsname="TeSSVd" valign="top">
+                                        <td class="d6cvqb BBwThe"><span class="SJajHc"></span></td>
+                                        <td class="YyVfkd NKTSme"><span class="SJajHc"></span>1</td>
+                                        <td class="NKTSme"><a aria-label="Page 2" class="fl"><span
+                                            class="SJajHc NVbCr"></span>2</a></td>
+                                        <td class="NKTSme"><a aria-label="Page 3" class="fl"><span
+                                            class="SJajHc NVbCr"></span>3</a></td>
+                                        <td class="NKTSme"><a aria-label="Page 4" class="fl"><span
+                                            class="SJajHc NVbCr"></span>4</a></td>
+                                        <td class="NKTSme"><a aria-label="Page 5" class="fl"><span
+                                            class="SJajHc NVbCr"></span>5</a></td>
+                                        <td class="NKTSme"><a aria-label="Page 6" class="fl"><span
+                                            class="SJajHc NVbCr"></span>6</a></td>
+                                        <td class="NKTSme"><a aria-label="Page 7" class="fl"><span
+                                            class="SJajHc NVbCr"></span>7</a></td>
+                                        <td class="NKTSme"><a aria-label="Page 8" class="fl"><span
+                                            class="SJajHc NVbCr"></span>8</a></td>
+                                        <td class="NKTSme"><a aria-label="Page 9" class="fl"><span
+                                            class="SJajHc NVbCr"></span>9</a></td>
+                                        <td class="NKTSme"><a aria-label="Page 10" class="fl"><span
+                                            class="SJajHc NVbCr"></span>10</a></td>
+                                        <td aria-level="3" class="d6cvqb BBwThe" role="heading"><a id="pnnext"
+                                                                                                   style="text-align:left"><span
+                                            class="SJajHc NVbCr"></span><span class="oeN89d"
+                                                                              style="display:block;margin-left:53px">Next</span></a>
+                                        </td>
+                                    </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                            <div>
+                                <div class="fp-nh save-components-async yp"
+                                     data-api="AIzaSyAlpy4kDC13CDmwQCqYR7-JihW1XXz9vw8" data-jiis="up"
+                                     data-async-type="svcps" id="gws-plugins-collections-tray__save-components-async"
+                                     data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQnbUCKAx6BAgpEBc"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div data-hveid="CAQQCA" data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQh6kJegQIBBAI"></div>
+                    <div jscontroller="zGLm3b" style="display:none" data-pcs="1" jsaction="rcuQ6b:npT2md"></div>
+                    <div role="navigation"><span id="xjs"></span>
+                        <div id="gfn"></div>
+                        <span id="fvf"></span></div>
+                </div>
+            </div>
+        </div>
+        <div class="Tg0csd">
+            <div jscontroller="KHourd" jsdata="C4mkuf;_;Ah5zmk" jsaction="rcuQ6b:npT2md"
+                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQuqMJegQIOxAA"></div>
+        </div>
+        <div jscontroller="T5VV" data-ssc="0" jsaction="rcuQ6b:npT2md"></div>
+        <div jscontroller="aDVF7" jsaction="rcuQ6b:npT2md"></div>
+        <div jscontroller="rhYw1b" data-dmd="" data-dvt="d" jsaction="rcuQ6b:npT2md"></div>
+        <div class="EyBRub">
+            <div jscontroller="Wo3n8" jsname="aadvhe" jsmodel="d5EhJe" data-eas="" data-fhs=""
+                 data-maindata="[null,null,null," glbl
+            "]" jsdata="vST7rb;_;Ah5zlc zEIyGd;_;">
+            <div id="_VhlbZ97QO6u79u8PtZve0AE_16">
+                <div jsname="GkjeIf" id="_VhlbZ97QO6u79u8PtZve0AE_19" data-jiis="up" data-async-type="kp_feedback"
+                     class="yp" data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ68cEegQIBBAK"></div>
+                <div jsname="WKijSd" id="_VhlbZ97QO6u79u8PtZve0AE_22" data-jiis="up" data-async-type="unified_feedback"
+                     class="yp" data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ68cEegQIBBAL"></div>
+            </div>
+        </div>
+    </div>
+    <div id="bfoot"><span style="display:none"><span jscontroller="DhPYme" style="display:none" data-atsd="5"
+                                                     data-db="1" data-mmcnt="100" jsaction="rcuQ6b:npT2md"
+                                                     data-ei="VhlbZ97QO6u79u8PtZve0AE"></span></span></div>
+    <div class="spch" style="display:none" id="spch">
+        <button class="pz5bj" id="spchx" aria-label="close"><span style="height:16px;line-height:16px;width:16px"
+                                                                  class="z1asCe wuXmqc"><svg focusable="false"
+                                                                                             xmlns="http://www.w3.org/2000/svg"
+                                                                                             viewBox="0 0 24 24"><path></path></svg></span>
+        </button>
+        <div class="spchc" id="spchc">
+            <div class="inner-container">
+                <div class="text-container"><span class="spcht" style="color:#70757a" id="spchi"></span><span
+                    class="spcht" style="color:#000" id="spchf"></span></div>
+                <div class="button-container"><span class="r8s4j" id="spchl"></span><span class="LgbsSe" id="spchb"><div
+                    class="microphone"><span class="receiver"></span><div class="wrapper"><span
+                    class="stem"></span><span class="shell"></span></div></div></span></div>
+                <div class="google-logo"></div>
+            </div>
+            <div class="permission-bar">
+                <div class="permission-bar-gradient"></div>
+            </div>
+        </div>
+    </div>
+    <div class="puIGge" id="sfooter" data-crust-trigger="5415" role="contentinfo" data-hveid="CBYQAA"
+         data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQpyp6BAgWEAA"><h1 class="bNg8Rb OhScic zsYMMe BBwThe">Footer
+        links</h1>
+        <div id="footcnt">
+            <div id="fbarcnt">
+                <div class="f6F9Be TrMVnc YNk70c" id="fbar">
+                    <div class="SLPe5b">
+                        <div class="B4GxFc">
+                            <div><span class="GeEc1b"><span class="gMZyfc">Results are not personalised</span></span>
+                            </div>
+                        </div>
+                        <div class="fbar b2hzT">
+                            <div class="b0KoTc B4GxFc"><span class="Q8LRLc">Switzerland</span>
+                                <div class="fbar smiUbb" id="swml">
+                                    <div jscontroller="qcH9Lc" jsdata="z6bOeb;_;Ah5zmI"
+                                         jsaction="oEnJg:CEnhyd;gJk92:b6DXXd;JCifrc:TvD9Pc">
+                                        <div class="rwA8ec HDOrGf GNm3Qb" style="white-space:normal"><a jsname="gXWYVe"
+                                                                                                        href="#"
+                                                                                                        style="white-space:normal"
+                                                                                                        data-biw="2560"
+                                                                                                        jsaction="click:HTIlC"
+                                                                                                        role="button"
+                                                                                                        tabindex="0"
+                                                                                                        data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQuZ0HegQIFhAD">
+                                            <div class="GNm3Qb"><span class="EYqSq known_loc"></span><span
+                                                class="dfB0uf">Langstrasse, Zürich</span></div>
+                                            <div class="GNm3Qb"><span id="VdZal"> - </span><span class="KwU3F"><span>From your device</span></span>
+                                            </div>
+                                        </a><span id="tsuid_VhlbZ97QO6u79u8PtZve0AE_27"><g-dialog jsname="BDbGbf"
+                                                                                                  jscontroller="VEbNoe"
+                                                                                                  data-id="_VhlbZ97QO6u79u8PtZve0AE_29"
+                                                                                                  jsaction="jxvro:Imgh9b;dBhwS:TvD9Pc;mLt3mc;KyPa0e:cRhSI;wjOG7e:cRhSI"
+                                                                                                  jsdata="gctHtc;_;Ah5zlY"
+                                                                                                  jsshadow=""><div
+                                            jsname="XKSfm" id="_VhlbZ97QO6u79u8PtZve0AE_29"><div jsname="bF1uUb"
+                                                                                                 class="kJFf0c KUf18"></div><div
+                                            class="mcPPZ yMNJR nP0TDe xg7rAe" jsaction="trigger.dBhwS"><div
+                                            class="LjfRsf" aria-hidden="true" role="button" tabindex="0"
+                                            jsaction="focus:sT2f3e"></div><span jsslot="" jsaction="mLt3mc"><div
+                                            class="qk7LXc TUOsUe Fb1AKc OosGzb" aria-labelledby="lQ3q8c" role="dialog"><div
+                                            jsname="C8RmQc" id="C8RmQc" data-jiis="up" data-async-type="lbsc"
+                                            class="yp"></div></div></span><div class="LjfRsf" aria-hidden="true"
+                                                                               role="button" tabindex="0"
+                                                                               jsaction="focus:tuePCd"></div></div></div></g-dialog></span>
+                                        </div>
+                                        <span id="RYW0de"> - </span>
+                                        <update-location class="xSQxL HDOrGf">
+                                            <div class="VtPCGb" jscontroller="KgxeNb" role="button" tabindex="0"
+                                                 jsaction="click:T1dibd;gfszqc:b4F0De;" jsdata="ITZAN;_;Ah5zmQ"
+                                                 data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQpLkCegQIFhAF">Update
+                                                location<span jsname="Fz56Ue"
+                                                              data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQl6ENegQIFhAG"></span><span
+                                                    id="tsuid_VhlbZ97QO6u79u8PtZve0AE_30"><span jscontroller="O9SqHb"
+                                                                                                jsaction="rcuQ6b:npT2md;D7JhZd:RySO6d"></span></span><span
+                                                    id="tsuid_VhlbZ97QO6u79u8PtZve0AE_32"><location-snackbar-with-learn-more
+                                                    jsname="nw18gf" jscontroller="khkNpe" jsaction="sFrcje:No7Jhf"><span
+                                                    id="tsuid_VhlbZ97QO6u79u8PtZve0AE_34"><g-snackbar jsname="Ng57nc"
+                                                                                                      jscontroller="OZLguc"
+                                                                                                      style="display:none"
+                                                                                                      data-dismiss=""
+                                                                                                      jsshadow=""
+                                                                                                      jsaction="rcuQ6b:npT2md"
+                                                                                                      id="ow14"
+                                                                                                      __is_owner="true"><div
+                                                    jsname="Ng57nc" class="yK6jqe"
+                                                    data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ4G96BAgWEAc"
+                                                    jsowner="ow14"><div class="b77HKf"><div class="rIxsve"
+                                                                                            jsslot=""><span
+                                                    class="Txngnb wHYlTd yUTMj">Can't update your location</span><g-snackbar-action
+                                                    class="sHFNYd zJUuqf AB4Wff UwURDc" jsname="zrfavf"
+                                                    jscontroller="xRxDld" jsaction="GtUzrb"
+                                                    data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQhbkIegQIFhAJ"><g-flat-button
+                                                    class="C5ZtL r2fjmd hObAcc gTewb VDgVie ybnC1 C8PMuc"
+                                                    style="color:#4285f4" role="button" tabindex="0"><span
+                                                    class="pEWLJ">Learn more</span></g-flat-button></g-snackbar-action></div></div></div><div
+                                                    jsname="sM5MNb" aria-live="polite" class="LH3wG"
+                                                    style="z-index:2000"></div></g-snackbar></span></location-snackbar-with-learn-more></span><span
+                                                    id="tsuid_VhlbZ97QO6u79u8PtZve0AE_36"><g-snackbar jsname="M8d6me"
+                                                                                                      jscontroller="OZLguc"
+                                                                                                      style="display:none"
+                                                                                                      jsshadow=""
+                                                                                                      jsaction="rcuQ6b:npT2md"
+                                                                                                      id="ow15"
+                                                                                                      __is_owner="true"><div
+                                                    jsname="Ng57nc" class="yK6jqe"
+                                                    data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQ4G96BAgWEAs"
+                                                    jsowner="ow15"><div class="b77HKf"><div class="rIxsve"
+                                                                                            jsslot=""><span
+                                                    class="Txngnb wHYlTd yUTMj">Updating location…</span></div></div></div><div
+                                                    jsname="sM5MNb" aria-live="polite" class="LH3wG"
+                                                    style="z-index:2000"></div></g-snackbar></span></div>
+                                        </update-location>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="fbar"><span class="B4GxFc"><span id="fsl"><a class="Fx4vi wHYlTd ZYHQ7e"
+                                                                                 href="https://support.google.com/websearch/?p=ws_results_help&hl=en-CH&fg=1">Help</a><a
+                            href="#" class="Fx4vi wHYlTd" data-bucket="websearch" data-psd-ssc="0" target="_blank"
+                            id="dk2qOd" jsaction="trigger.YcfJ" data-ved="2ahUKEwje05373KKKAxWrnf0HHbWNFxoQLnoECBYQDQ">Send feedback</a><a
+                            class="Fx4vi wHYlTd ZYHQ7e"
+                            href="https://policies.google.com/privacy?hl=en-CH&fg=1">Privacy</a><a
+                            class="Fx4vi wHYlTd ZYHQ7e" href="https://policies.google.com/terms?hl=en-CH&fg=1">Terms</a></span></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+</div>
+<link onerror="_rtf(this)" rel="stylesheet" nonce=""></link>
+<div></div>
+<div></div>
+<div jscontroller="EO13pd" class="fp-nh" id="TWfxFb" jsaction="rcuQ6b:npT2md;Egr1he:f0xwYb;vKbCb:dwOkab;gZgazf:A1kDjc">
+    <div jsname="J7OdWb" data-jiis="up" data-async-type="vpkg" id="QPwIld" class="yf"
+         data-ved="0ahUKEwje05373KKKAxWrnf0HHbWNFxoQj5gNCCU" eid="VxlbZ-21LfuR9u8Pof7U4Qk">
+        <div jsname="TYpc3" jscontroller="M6QgBb" data-host-wiz-contract-name="gws_wizbind" jsaction="rcuQ6b:npT2md">
+            <div jsname="coFSxe" id="_VxlbZ-21LfuR9u8Pof7U4Qk_2">
+                <div>
+                    <div jscontroller="luWJre" jsaction="rcuQ6b:npT2md;">
+                        <div id="DDeXhf" class="yDmH0d">
+                            <c-wiz class="VuvQze DWVRvc LtDEb P3Xfjc SSPGKf BIdYQ" jsshadow=""
+                                   jsdata="deferred-vfe_uviewer_0" data-p="%.@.[" css selectors generator
+                            "]]" jsmodel="hc6Ubd oSegn" c-wiz="" jscontroller="iaRXBb"
+                            jsaction="rcuQ6b:npT2md;bXJUz:uj875b;vYB8Wd:e4mHGd;">
+                            <div id="Sva75c" jsname="Sva75c" class="RfPPs vYoxve" jscontroller="ZfBJ7b" jsmodel="jS4nhf"
+                                 jsaction="vYB8Wd:zQYYb;mrMOif:C6KsF;IBB03b:mhSdVe;agoMJf:mhSdVe;d9N7hc:onf9S;Ik0k4:zfeGSe;">
+                                <div jsname="DbrZPc" style="width: 100%; height: 0"></div>
+                            </div>
+                            <c-data id="vfe_uviewer_0"></c-data>
+                            </c-wiz></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div>
+    <link nonce="" rel="stylesheet"></link>
+</div>
+<div id="lfootercc">
+    <div id="reviewDialog" data-async-context="async_id_prefix:" data-jiis="up" data-async-type="reviewDialog"
+         data-async-context-required="async_id_prefix" class="yp"
+         data-ved="0ahUKEwje05373KKKAxWrnf0HHbWNFxoQlIwOCJsD"></div>
+    <div id="dbg_"></div>
+</div>
+<div jscontroller="I9y8sd" jsaction="rcuQ6b:npT2md"></div>
+<div class="gb_K" ng-non-bindable="">Google apps</div>
+<div class="gb_R" ng-non-bindable="">
+    <div class="gb_Ac">
+        <div>Google Account</div>
+        <div class="gb_g">Anton Medvedev</div>
+        <div>anton@cerrion.com</div>
+    </div>
+</div>
+<div jsname="VTXK3c" data-ved="0ahUKEwje05373KKKAxWrnf0HHbWNFxoQi7EMCJwD"></div>
+<iframe id="hfcr" style="display: none;"></iframe>
+<div id="sZmt3b" class="fp-nh">
+    <div id="i58Mw" class="ABMFZ"></div>
+</div>
+<link rel="preload" as="script"></link>
+<link rel="preload" as="script"></link>
+<div id="snbc">
+    <div jsname="sM5MNb" aria-live="polite" class="jhZvod"></div>
+    <div jsname="sM5MNb" aria-live="polite" class="LH3wG"></div>
+    <div jsname="sM5MNb" aria-live="polite" class="LH3wG" style="z-index:2000"></div>
+    <div jsname="sM5MNb" aria-live="polite" class="LH3wG" style="z-index:2000"></div>
+</div>
+<link rel="preload" as="script"></link>
+<link rel="preload" as="script"></link>
+<link rel="preload" as="script"></link>
+<link rel="preload" as="script"></link>
+<link rel="preload" as="script"></link>
+</body>
+<editor-card style="position:absolute;top:0px;left:0px;z-index:auto;display: block !important">
+    <div dir="ltr" style="all: initial;">
+        <div>
+            <link rel="stylesheet"
+                  href="chrome-extension://gpaiobkfhnonedkhhfjpmhdalgeoebfa/fonts/fabric-icons.css"></link>
+            <div style="all: initial;"></div>
+        </div>
+        <div>
+            <link rel="stylesheet"
+                  href="chrome-extension://gpaiobkfhnonedkhhfjpmhdalgeoebfa/fonts/fabric-icons.css"></link>
+        </div>
+        <div id="editorNotificationContainer"></div>
+    </div>
+</editor-card>
+</html>
diff --git a/tests/pages/stripe.com.html b/tests/pages/stripe.com.html
index a2b17b9..78b5212 100644
--- a/tests/pages/stripe.com.html
+++ b/tests/pages/stripe.com.html
@@ -1,1306 +1,1926 @@
-
-<!DOCTYPE html>
-<html lang="en" id="home"  >
-
-<head>
-
-
-    <meta charset="utf-8">
-    <meta name="google-site-verification" content="f0LCrdI6z4Fo8zld4sHCgo5SiUE4EYYRUa6KVeX3Mw8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+<!doctype html>
+<html lang="en" id="home">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="google-site-verification"
+      content="f0LCrdI6z4Fo8zld4sHCgo5SiUE4EYYRUa6KVeX3Mw8"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <title>Stripe.com - Payment processing for internet businesses</title>
 
-    <meta name="description" content="Online payment processing for internet businesses. Stripe is a suite of payment APIs that powers commerce for businesses of all sizes.">
-
-
-    <link rel="shortcut icon" href="/favicon.ico">
+    <meta
+      name="description"
+      content="Online payment processing for internet businesses. Stripe is a suite of payment APIs that powers commerce for businesses of all sizes."
+    />
 
-    <link rel="apple-touch-icon-precomposed" href="/img/apple-touch-icon/180x180.png">
-    <link rel="icon" href="/img/apple-touch-icon/180x180.png">
+    <link rel="shortcut icon" href="/favicon.ico" />
 
+    <link
+      rel="apple-touch-icon-precomposed"
+      href="/img/apple-touch-icon/180x180.png"
+    />
+    <link rel="icon" href="/img/apple-touch-icon/180x180.png" />
 
-    <link rel="image_src" type="image/png" href="https://stripe.com/img/v3/home/social.png">
+    <link
+      rel="image_src"
+      type="image/png"
+      href="https://stripe.com/img/v3/home/social.png"
+    />
 
     <link rel="alternate" hreflang="fr" href="https://stripe.com/?locale=fr" />
 
-    <link rel="canonical" href="https://stripe.com/">
-
-    <meta property="og:title" content="Stripe.com - Payment processing for internet businesses">
-    <meta property="og:url" content="https://stripe.com/">
-    <meta property="og:description" content="Online payment processing for internet businesses. Stripe is a suite of payment APIs that powers commerce for businesses of all sizes.">
-    <meta property="og:image" content="https://stripe.com/img/v3/home/social.png">
-
-    <meta name="twitter:card" content="summary">
-    <meta name="twitter:image" content="https://stripe.com/img/v3/home/twitter.png">
-    <meta name="twitter:site" content="@stripe">
-    <meta name="twitter:title" content="Stripe.com - Payment processing for internet businesses">
-    <meta name="twitter:description" content="Online payment processing for internet businesses. Stripe is a suite of payment APIs that powers commerce for businesses of all sizes.">
-
-
-    <script type="application/json" id="strut_files">{&quot;v3/shared/navigation_ie10.css&quot;:&quot;/assets/v3/shared/navigation_ie10-fad8432db8a0ef02ccfc88df4a0b8535.css&quot;,&quot;v3/home/animations.js&quot;:&quot;/assets/v3/home/animations-8ef3cd0c995615206089429925f4520f.js&quot;,&quot;v3/shared/prism_light.css&quot;:&quot;/assets/v3/shared/prism_light-d3d83c4812cb19d7f14bad04b6c79942.css&quot;}</script>
-
-    <link rel="stylesheet" href="/assets/v3/default-28940e5adbe9a3b92ace7deef3148b5f.css">
-    <link rel="stylesheet" href="/assets/v3/home/index-98433164b6452464773fe578ddf858af.css">
+    <link rel="canonical" href="https://stripe.com/" />
+
+    <meta
+      property="og:title"
+      content="Stripe.com - Payment processing for internet businesses"
+    />
+    <meta property="og:url" content="https://stripe.com/" />
+    <meta
+      property="og:description"
+      content="Online payment processing for internet businesses. Stripe is a suite of payment APIs that powers commerce for businesses of all sizes."
+    />
+    <meta
+      property="og:image"
+      content="https://stripe.com/img/v3/home/social.png"
+    />
+
+    <meta name="twitter:card" content="summary" />
+    <meta
+      name="twitter:image"
+      content="https://stripe.com/img/v3/home/twitter.png"
+    />
+    <meta name="twitter:site" content="@stripe" />
+    <meta
+      name="twitter:title"
+      content="Stripe.com - Payment processing for internet businesses"
+    />
+    <meta
+      name="twitter:description"
+      content="Online payment processing for internet businesses. Stripe is a suite of payment APIs that powers commerce for businesses of all sizes."
+    />
+
+    <script type="application/json" id="strut_files">
+      {&quot;v3/shared/navigation_ie10.css&quot;:&quot;/assets/v3/shared/navigation_ie10-fad8432db8a0ef02ccfc88df4a0b8535.css&quot;,&quot;v3/home/animations.js&quot;:&quot;/assets/v3/home/animations-8ef3cd0c995615206089429925f4520f.js&quot;,&quot;v3/shared/prism_light.css&quot;:&quot;/assets/v3/shared/prism_light-d3d83c4812cb19d7f14bad04b6c79942.css&quot;}
+    </script>
 
-    <script defer src="/assets/v3/default-0d7ec499f85a0b18e65f2132e1d55d8a.js"></script>
+    <link
+      rel="stylesheet"
+      href="/assets/v3/default-28940e5adbe9a3b92ace7deef3148b5f.css"
+    />
+    <link
+      rel="stylesheet"
+      href="/assets/v3/home/index-98433164b6452464773fe578ddf858af.css"
+    />
+
+    <script
+      defer
+      src="/assets/v3/default-0d7ec499f85a0b18e65f2132e1d55d8a.js"
+    ></script>
     <script defer src="https://embed.runkit.com"></script>
-    <script defer src="/assets/v3/home/index-8f2cda68d7fbb1f52ef8d1b4f3d88320.js"></script>
-
-
-
-
-
-</head>
-
-<body>
-
-
-
-<header class='globalNav'>
-
-
-    <div class="container-lg">
+    <script
+      defer
+      src="/assets/v3/home/index-8f2cda68d7fbb1f52ef8d1b4f3d88320.js"
+    ></script>
+  </head>
+
+  <body>
+    <header class="globalNav">
+      <div class="container-lg">
         <ul class="navRoot">
+          <li class="navSection logo">
+            <a class="rootLink item-home colorize" href="/"
+              ><h1>
+                <svg width="62" height="25">
+                  <title>Stripe</title>
+                  <path
+                    d="M5 10.1c0-.6.6-.9 1.4-.9 1.2 0 2.8.4 4 1.1V6.5c-1.3-.5-2.7-.8-4-.8C3.2 5.7 1 7.4 1 10.3c0 4.4 6 3.6 6 5.6 0 .7-.6 1-1.5 1-1.3 0-3-.6-4.3-1.3v3.8c1.5.6 2.9.9 4.3.9 3.3 0 5.5-1.6 5.5-4.5.1-4.8-6-3.9-6-5.7zM29.9 20h4V6h-4v14zM16.3 2.7l-3.9.8v12.6c0 2.4 1.8 4.1 4.1 4.1 1.3 0 2.3-.2 2.8-.5v-3.2c-.5.2-3 .9-3-1.4V9.4h3V6h-3V2.7zm8.4 4.5L24.6 6H21v14h4v-9.5c1-1.2 2.7-1 3.2-.8V6c-.5-.2-2.5-.5-3.5 1.2zm5.2-2.3l4-.8V.8l-4 .8v3.3zM61.1 13c0-4.1-2-7.3-5.8-7.3s-6.1 3.2-6.1 7.3c0 4.8 2.7 7.2 6.6 7.2 1.9 0 3.3-.4 4.4-1.1V16c-1.1.6-2.3.9-3.9.9s-2.9-.6-3.1-2.5H61c.1-.2.1-1 .1-1.4zm-7.9-1.5c0-1.8 1.1-2.5 2.1-2.5s2 .7 2 2.5h-4.1zM42.7 5.7c-1.6 0-2.5.7-3.1 1.3l-.1-1h-3.6v18.5l4-.7v-4.5c.6.4 1.4 1 2.8 1 2.9 0 5.5-2.3 5.5-7.4-.1-4.6-2.7-7.2-5.5-7.2zm-1 11c-.9 0-1.5-.3-1.9-.8V10c.4-.5 1-.8 1.9-.8 1.5 0 2.5 1.6 2.5 3.7 0 2.2-1 3.8-2.5 3.8z"
+                  />
+                </svg></h1
+            ></a>
+          </li>
+
+          <li class="navSection primary">
+            <a
+              class="rootLink item-products hasDropdown colorize"
+              data-dropdown="products"
+            >
+              Products
+            </a>
+            <a
+              class="rootLink item-developers hasDropdown colorize"
+              data-dropdown="developers"
+            >
+              Developers
+            </a>
+            <a
+              class="rootLink item-company hasDropdown colorize"
+              data-dropdown="company"
+            >
+              Company
+            </a>
+            <a
+              data-analytics-action="pricing"
+              data-analytics-source="global_nav"
+              class="rootLink item-pricing colorize"
+              href="https://stripe.com/pricing"
+            >
+              Pricing
+            </a>
+          </li>
 
-
-            <li class="navSection logo">
-                <a class="rootLink item-home colorize" href="/"><h1><svg width="62" height="25"><title>Stripe</title><path d="M5 10.1c0-.6.6-.9 1.4-.9 1.2 0 2.8.4 4 1.1V6.5c-1.3-.5-2.7-.8-4-.8C3.2 5.7 1 7.4 1 10.3c0 4.4 6 3.6 6 5.6 0 .7-.6 1-1.5 1-1.3 0-3-.6-4.3-1.3v3.8c1.5.6 2.9.9 4.3.9 3.3 0 5.5-1.6 5.5-4.5.1-4.8-6-3.9-6-5.7zM29.9 20h4V6h-4v14zM16.3 2.7l-3.9.8v12.6c0 2.4 1.8 4.1 4.1 4.1 1.3 0 2.3-.2 2.8-.5v-3.2c-.5.2-3 .9-3-1.4V9.4h3V6h-3V2.7zm8.4 4.5L24.6 6H21v14h4v-9.5c1-1.2 2.7-1 3.2-.8V6c-.5-.2-2.5-.5-3.5 1.2zm5.2-2.3l4-.8V.8l-4 .8v3.3zM61.1 13c0-4.1-2-7.3-5.8-7.3s-6.1 3.2-6.1 7.3c0 4.8 2.7 7.2 6.6 7.2 1.9 0 3.3-.4 4.4-1.1V16c-1.1.6-2.3.9-3.9.9s-2.9-.6-3.1-2.5H61c.1-.2.1-1 .1-1.4zm-7.9-1.5c0-1.8 1.1-2.5 2.1-2.5s2 .7 2 2.5h-4.1zM42.7 5.7c-1.6 0-2.5.7-3.1 1.3l-.1-1h-3.6v18.5l4-.7v-4.5c.6.4 1.4 1 2.8 1 2.9 0 5.5-2.3 5.5-7.4-.1-4.6-2.7-7.2-5.5-7.2zm-1 11c-.9 0-1.5-.3-1.9-.8V10c.4-.5 1-.8 1.9-.8 1.5 0 2.5 1.6 2.5 3.7 0 2.2-1 3.8-2.5 3.8z"/></svg></h1></a>
-            </li>
-
-            <li class="navSection primary">
-                <a class="rootLink item-products hasDropdown colorize" data-dropdown="products">
-                    Products
-                </a>
-                <a class="rootLink item-developers hasDropdown colorize" data-dropdown="developers">
-                    Developers
-                </a>
-                <a class="rootLink item-company hasDropdown colorize" data-dropdown="company">
-                    Company
-                </a>
-                <a
-                        data-analytics-action="pricing"
-                        data-analytics-source="global_nav"
-                        class="rootLink item-pricing colorize"
-                        href="https://stripe.com/pricing"
-                >
-                    Pricing
-                </a>
-            </li>
-
-            <li class="navSection secondary">
-                <a
-                        class="rootLink item-support colorize"
-                        href="https://support.stripe.com"
-                        data-analytics-action="support"
-                        data-analytics-source="global_nav"
-                >
-                    Support
-                </a>
-                <a
-                        class="rootLink item-dashboard colorize"
-                        data-adroll-segment='submit_two'
-                        href="https://dashboard.stripe.com/login"
-                        data-analytics-source="global_nav"
-                        data-analytics-action="sign_in"
-                >
-                    Sign in
-                </a>
-            </li>
-
-
-
-            <li class="navSection mobile">
-                <a class="rootLink item-mobileMenu colorize"><h2>Menu</h2></a>
-                <div class="popup">
-                    <div class="popupContainer">
-                        <a class="popupCloseButton">Close</a>
-                        <div class="mobileProducts">
-                            <h4>Products</h4>
-                            <div class="mobileProductsList">
-                                <ul>
-                                    <li>
-                                        <a
-                                                class="linkContainer item-payments"
-                                                href="https://stripe.com/payments"
-                                                data-analytics-action="payments"
-                                                data-analytics-source="mobile_nav"
-                                        >
-                                            <svg viewbox="0 0 48 48"><path fill="#87BBFD" class="hover-fillLight" d="M24 48C12.11 48 2.244 39.35.338 28H6.5V9H5.27C9.67 3.515 16.423 0 24 0c13.255 0 24 10.745 24 24S37.255 48 24 48z"/><path fill="#555ABF" class="hover-fillDark" d="M25 21v8H.526A24.082 24.082 0 0 1 0 24 23.908 23.908 0 0 1 6.116 8H31.5c.828 0 1.5.67 1.5 1.5V21h-8zm-10.502-8.995a6.497 6.497 0 1 0 0 12.994 6.497 6.497 0 0 0 0-12.996z"/><path fill="#FFF" d="M39.823 39.276a2.44 2.44 0 0 1-1.76.724H16.5a1.5 1.5 0 0 1-1.5-1.5v-18c0-.828.67-1.5 1.5-1.5h27.693a1.51 1.51 0 0 1 1.484 1.256c.21 1.217.323 2.467.323 3.744 0 5.936-2.355 11.32-6.177 15.276zM33.5 23.002a6.497 6.497 0 1 0 0 12.995 6.497 6.497 0 0 0 .002-12.994z"/></svg>Payments
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a
-                                                class="linkContainer item-subscriptions"
-                                                href='https://stripe.com/subscriptions'
-                                                data-analytics-action="subscriptions"
-                                                data-analytics-source="mobile_nav"
-                                        >
-                                            <svg viewbox="0 0 48 48"><path fill="#74E4A2" class="hover-fillLight" d="M24 0c13.255 0 24 10.745 24 24S37.255 48 24 48 0 37.255 0 24 10.745 0 24 0z"/><path fill="#FFF" d="M39.558 30.977c-6.23 6.225-16.304 6.194-22.535-.03l13.975-13.962c-6.232-6.224-16.335-6.224-22.567 0-4.043 4.04-5.456 9.712-4.247 14.896l-.654.174a21.89 21.89 0 0 1-1.536-8.61c.284-11.806 10.003-21.35 21.823-21.446 6.15-.05 11.72 2.42 15.744 6.438 6.23 6.226 6.23 16.318 0 22.542z"/><path fill="#159570" class="hover-fillDark" d="M33.653 21.413c1.43 5.336-1.735 10.82-7.068 12.25-5.332 1.43-10.814-1.736-12.242-7.072-1.43-5.334 1.735-10.82 7.068-12.25 5.334-1.43 10.815 1.738 12.244 7.074z"/></svg>Subscriptions
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a
-                                                class="linkContainer item-connect"
-                                                href='https://stripe.com/connect'
-                                                data-analytics-action="connect"
-                                                data-analytics-source="mobile_nav"
-                                        >
-                                            <svg viewbox="0 0 48 48"><path fill="#68D4F8" class="hover-fillLight" d="M48 24c0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c1.363 0 2.698.12 4 .338V15h5v5h14.662c.218 1.302.338 2.637.338 4z"/><path fill="#FFF" d="M16.99 29.966L17 17l-5.55-.006a1.02 1.02 0 0 0-.725.3L2.65 25.446a1.55 1.55 0 0 0-.44 1.28c1.22 9.944 9.1 17.825 19.042 19.047.472.058.945-.104 1.28-.44l8.172-8.076c.192-.193.3-.453.3-.725L31 31l-12.985-.01a1.023 1.023 0 0 1-1.024-1.024z"/><path fill="#217AB7" class="hover-fillDark" d="M47.697 20.195L37.194 30.702a1.03 1.03 0 0 1-.726.3h-5.462V18.03c0-.567-.46-1.025-1.025-1.025H16.994V11.52c0-.274.108-.534.3-.726L27.783.3C38 1.916 46.07 9.98 47.698 20.194z"/></svg>Connect
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a
-                                                class="linkContainer item-sigma"
-                                                href='https://stripe.com/sigma'
-                                                data-analytics-action="sigma"
-                                                data-analytics-source="mobile_nav"
-                                        >
-                                            <svg viewBox="0 0 48 48"><path class="hover-fillLight" d="M24 48c-2.6 0-5-.3-7.2-1.1V35.2H4v2.1c-2.6-4-4-8.6-4-13.3C0 12.6 7.8 3.2 18.4.6V4h14.4V1.6C41.8 5.1 48 13.8 48 24c0 13.3-10.7 24-24 24z" fill="#beb0f4"/><path class="hover-fillDark" d="M45.6 24H32.8v17.6H17.6v-.2 5.8c-6.4-1.8-11.7-6.1-14.9-12 2.1-6.6 8-10.9 14.9-11.2V.8C19.7.3 21.9 0 24 0c3.4 0 6.7.6 9.6 1.9v8c0 6.1 4.5 10.9 10.2 11.7 1 .2 1.8 1.3 1.8 2.4z" fill="#7356b6"/><path d="M45.6 24c0 1.1-.8 2.1-1.8 2.2-5.8 1-10.2 5.8-10.2 11.7v5.3c-3 1.4-6.2 2.2-9.6 2.2-2.2 0-4.3-.3-6.4-1V40c0-7 5.8-13 12.5-13.8C31.2 26 32 25.1 32 24h13.6zM4 15.7C6.6 9.8 11.5 5.3 17.6 3.4V8c0 7 5.8 12.8 12.5 13.8 1.1.2 1.9 1.1 1.9 2.2H17.9C12 24 6.7 20.6 4 15.7z" fill="#FFF"/></svg>Sigma
-                                            <span class='new-badge'>New</span>
-                                        </a>
-                                    </li>
-                                </ul>
-                                <ul>
-                                    <li>
-                                        <a
-                                                class="linkContainer item-atlas"
-                                                href='https://stripe.com/atlas'
-                                                data-analytics-action="atlas"
-                                                data-analytics-source="mobile_nav"
-                                        >
-                                            <svg viewbox="0 0 48 48"><path fill="#FCD669" class="hover-fillLight" d="M24 0c13.255 0 24 10.745 24 24S37.255 48 24 48 0 37.255 0 24 10.745 0 24 0z"/><path fill="#CE7C3A" class="hover-fillDark" d="M24.012 1.834c.366.005.73.196.92.575l16.825 33.72c.396.79-.314 1.685-1.175 1.48L24 33.626V1.834h.01z"/><path fill="#FFF" d="M24 1.834v31.794l-16.584 3.98A1.043 1.043 0 0 1 6.24 36.13L23.067 2.41c.195-.39.572-.58.947-.576H24z"/></svg>Atlas
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a
-                                                class="linkContainer item-radar"
-                                                href='https://stripe.com/radar'
-                                                data-analytics-action="radar"
-                                                data-analytics-source="mobile_nav"
-                                        >
-                                            <svg viewbox="0 0 48 48"><path class="hover-fillLight" fill="#F6A4EB" d="M41.364 21.886h6.538c.06.697.098 1.4.098 2.114 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c6.833 0 12.993 2.86 17.364 7.442v14.444z"/><path fill="#FFF" d="M37.746 37.4a1.3 1.3 0 0 1 .92-.38c.72 0 1.303.444 1.303 1.163 0 .503-.353.982-.708 1.292-3.484 3.122-8.325 5.53-13.783 5.53-11.75 0-19.486-9.538-19.486-18.83 0-8.72 7.195-16.19 15.25-16.19s11.227 5.54 11.227 5.54L37.747 37.4z"/><path class="hover-fillDark" fill="#9251AC" d="M47.995 24zm0 0c0-.995-.807-1.974-1.802-1.974-1.15 0-1.8.94-1.8 1.83-.09 3.174-1.228 7.127-3.453 10.182-2.355 3.232-6.91 6.956-13.242 6.956-7.625 0-13.213-5.767-13.213-11.925 0-4.3 2.886-7.17 5.828-7.17 1.588 0 2.48.683 2.965 1.312.362.468 1.063.493 1.482.074L40.968 7.032A23.926 23.926 0 0 1 47.995 24z"/></svg>Radar
-                                        </a>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                        <div class="mobileSecondaryNav">
-                            <ul>
-                                <li>
-                                    <a
-                                            class="item-pricing"
-                                            href="https://stripe.com/pricing"
-                                            data-analytics-action="pricing"
-                                            data-analytics-source="mobile_nav"
-                                    >
-                                        Pricing
-                                    </a>
-                                </li>
-                                <li>
-                                    <a
-                                            class="item-workswith"
-                                            href="https://stripe.com/works-with"
-                                            data-analytics-action="works-with"
-                                            data-analytics-source="mobile_nav"
-                                    >
-                                        Works with Stripe
-                                    </a>
-                                </li>
-                                <li>
-                                    <a
-                                            class="item-gallery"
-                                            href="https://stripe.com/customers"
-                                            data-analytics-action="customers"
-                                            data-analytics-source="mobile_nav"
-                                    >
-                                        Customers
-                                    </a>
-                                </li>
-                                <li>
-                                    <a
-                                            class="item-documentation"
-                                            href="https://stripe.com/docs"
-                                            data-analytics-source="mobile_nav"
-                                            data-analytics-action="documentation"
-                                    >
-                                        Documentation
-                                    </a>
-                                </li>
-                            </ul>
-                            <ul>
-                                <li>
-                                    <a
-                                            class="item-about"
-                                            href="https://stripe.com/about"
-                                            data-analytics-source="mobile_nav"
-                                            data-analytics-action="about"
-                                    >
-                                        About Stripe
-                                    </a>
-                                </li>
-                                <li>
-                                    <a
-                                            class="item-jobs"
-                                            href="https://stripe.com/jobs"
-                                            data-analytics-source="mobile_nav"
-                                            data-analytics-action="jobs"
-                                    >
-                                        Jobs
-                                    </a>
-                                </li>
-                                <li>
-                                    <a
-                                            class="item-blog"
-                                            href="https://stripe.com/blog"
-                                            data-analytics-source="mobile_nav"
-                                            data-analytics-action="blog"
-                                    >
-                                        Blog
-                                    </a>
-                                </li>
-                            </ul>
-                        </div>
+          <li class="navSection secondary">
+            <a
+              class="rootLink item-support colorize"
+              href="https://support.stripe.com"
+              data-analytics-action="support"
+              data-analytics-source="global_nav"
+            >
+              Support
+            </a>
+            <a
+              class="rootLink item-dashboard colorize"
+              data-adroll-segment="submit_two"
+              href="https://dashboard.stripe.com/login"
+              data-analytics-source="global_nav"
+              data-analytics-action="sign_in"
+            >
+              Sign in
+            </a>
+          </li>
+
+          <li class="navSection mobile">
+            <a class="rootLink item-mobileMenu colorize"><h2>Menu</h2></a>
+            <div class="popup">
+              <div class="popupContainer">
+                <a class="popupCloseButton">Close</a>
+                <div class="mobileProducts">
+                  <h4>Products</h4>
+                  <div class="mobileProductsList">
+                    <ul>
+                      <li>
+                        <a
+                          class="linkContainer item-payments"
+                          href="https://stripe.com/payments"
+                          data-analytics-action="payments"
+                          data-analytics-source="mobile_nav"
+                        >
+                          <svg viewbox="0 0 48 48">
+                            <path
+                              fill="#87BBFD"
+                              class="hover-fillLight"
+                              d="M24 48C12.11 48 2.244 39.35.338 28H6.5V9H5.27C9.67 3.515 16.423 0 24 0c13.255 0 24 10.745 24 24S37.255 48 24 48z"
+                            />
+                            <path
+                              fill="#555ABF"
+                              class="hover-fillDark"
+                              d="M25 21v8H.526A24.082 24.082 0 0 1 0 24 23.908 23.908 0 0 1 6.116 8H31.5c.828 0 1.5.67 1.5 1.5V21h-8zm-10.502-8.995a6.497 6.497 0 1 0 0 12.994 6.497 6.497 0 0 0 0-12.996z"
+                            />
+                            <path
+                              fill="#FFF"
+                              d="M39.823 39.276a2.44 2.44 0 0 1-1.76.724H16.5a1.5 1.5 0 0 1-1.5-1.5v-18c0-.828.67-1.5 1.5-1.5h27.693a1.51 1.51 0 0 1 1.484 1.256c.21 1.217.323 2.467.323 3.744 0 5.936-2.355 11.32-6.177 15.276zM33.5 23.002a6.497 6.497 0 1 0 0 12.995 6.497 6.497 0 0 0 .002-12.994z"
+                            /></svg
+                          >Payments
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          class="linkContainer item-subscriptions"
+                          href="https://stripe.com/subscriptions"
+                          data-analytics-action="subscriptions"
+                          data-analytics-source="mobile_nav"
+                        >
+                          <svg viewbox="0 0 48 48">
+                            <path
+                              fill="#74E4A2"
+                              class="hover-fillLight"
+                              d="M24 0c13.255 0 24 10.745 24 24S37.255 48 24 48 0 37.255 0 24 10.745 0 24 0z"
+                            />
+                            <path
+                              fill="#FFF"
+                              d="M39.558 30.977c-6.23 6.225-16.304 6.194-22.535-.03l13.975-13.962c-6.232-6.224-16.335-6.224-22.567 0-4.043 4.04-5.456 9.712-4.247 14.896l-.654.174a21.89 21.89 0 0 1-1.536-8.61c.284-11.806 10.003-21.35 21.823-21.446 6.15-.05 11.72 2.42 15.744 6.438 6.23 6.226 6.23 16.318 0 22.542z"
+                            />
+                            <path
+                              fill="#159570"
+                              class="hover-fillDark"
+                              d="M33.653 21.413c1.43 5.336-1.735 10.82-7.068 12.25-5.332 1.43-10.814-1.736-12.242-7.072-1.43-5.334 1.735-10.82 7.068-12.25 5.334-1.43 10.815 1.738 12.244 7.074z"
+                            /></svg
+                          >Subscriptions
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          class="linkContainer item-connect"
+                          href="https://stripe.com/connect"
+                          data-analytics-action="connect"
+                          data-analytics-source="mobile_nav"
+                        >
+                          <svg viewbox="0 0 48 48">
+                            <path
+                              fill="#68D4F8"
+                              class="hover-fillLight"
+                              d="M48 24c0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c1.363 0 2.698.12 4 .338V15h5v5h14.662c.218 1.302.338 2.637.338 4z"
+                            />
+                            <path
+                              fill="#FFF"
+                              d="M16.99 29.966L17 17l-5.55-.006a1.02 1.02 0 0 0-.725.3L2.65 25.446a1.55 1.55 0 0 0-.44 1.28c1.22 9.944 9.1 17.825 19.042 19.047.472.058.945-.104 1.28-.44l8.172-8.076c.192-.193.3-.453.3-.725L31 31l-12.985-.01a1.023 1.023 0 0 1-1.024-1.024z"
+                            />
+                            <path
+                              fill="#217AB7"
+                              class="hover-fillDark"
+                              d="M47.697 20.195L37.194 30.702a1.03 1.03 0 0 1-.726.3h-5.462V18.03c0-.567-.46-1.025-1.025-1.025H16.994V11.52c0-.274.108-.534.3-.726L27.783.3C38 1.916 46.07 9.98 47.698 20.194z"
+                            /></svg
+                          >Connect
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          class="linkContainer item-sigma"
+                          href="https://stripe.com/sigma"
+                          data-analytics-action="sigma"
+                          data-analytics-source="mobile_nav"
+                        >
+                          <svg viewBox="0 0 48 48">
+                            <path
+                              class="hover-fillLight"
+                              d="M24 48c-2.6 0-5-.3-7.2-1.1V35.2H4v2.1c-2.6-4-4-8.6-4-13.3C0 12.6 7.8 3.2 18.4.6V4h14.4V1.6C41.8 5.1 48 13.8 48 24c0 13.3-10.7 24-24 24z"
+                              fill="#beb0f4"
+                            />
+                            <path
+                              class="hover-fillDark"
+                              d="M45.6 24H32.8v17.6H17.6v-.2 5.8c-6.4-1.8-11.7-6.1-14.9-12 2.1-6.6 8-10.9 14.9-11.2V.8C19.7.3 21.9 0 24 0c3.4 0 6.7.6 9.6 1.9v8c0 6.1 4.5 10.9 10.2 11.7 1 .2 1.8 1.3 1.8 2.4z"
+                              fill="#7356b6"
+                            />
+                            <path
+                              d="M45.6 24c0 1.1-.8 2.1-1.8 2.2-5.8 1-10.2 5.8-10.2 11.7v5.3c-3 1.4-6.2 2.2-9.6 2.2-2.2 0-4.3-.3-6.4-1V40c0-7 5.8-13 12.5-13.8C31.2 26 32 25.1 32 24h13.6zM4 15.7C6.6 9.8 11.5 5.3 17.6 3.4V8c0 7 5.8 12.8 12.5 13.8 1.1.2 1.9 1.1 1.9 2.2H17.9C12 24 6.7 20.6 4 15.7z"
+                              fill="#FFF"
+                            /></svg
+                          >Sigma
+                          <span class="new-badge">New</span>
+                        </a>
+                      </li>
+                    </ul>
+                    <ul>
+                      <li>
                         <a
-                                class="mobileSignIn"
-                                data-adroll-segment='submit_two'
-                                href="https://dashboard.stripe.com/login"
-                                data-analytics-source="mobile_nav"
-                                data-analytics-action="sign_in"
+                          class="linkContainer item-atlas"
+                          href="https://stripe.com/atlas"
+                          data-analytics-action="atlas"
+                          data-analytics-source="mobile_nav"
                         >
-                            Sign in
+                          <svg viewbox="0 0 48 48">
+                            <path
+                              fill="#FCD669"
+                              class="hover-fillLight"
+                              d="M24 0c13.255 0 24 10.745 24 24S37.255 48 24 48 0 37.255 0 24 10.745 0 24 0z"
+                            />
+                            <path
+                              fill="#CE7C3A"
+                              class="hover-fillDark"
+                              d="M24.012 1.834c.366.005.73.196.92.575l16.825 33.72c.396.79-.314 1.685-1.175 1.48L24 33.626V1.834h.01z"
+                            />
+                            <path
+                              fill="#FFF"
+                              d="M24 1.834v31.794l-16.584 3.98A1.043 1.043 0 0 1 6.24 36.13L23.067 2.41c.195-.39.572-.58.947-.576H24z"
+                            /></svg
+                          >Atlas
                         </a>
-                    </div>
+                      </li>
+                      <li>
+                        <a
+                          class="linkContainer item-radar"
+                          href="https://stripe.com/radar"
+                          data-analytics-action="radar"
+                          data-analytics-source="mobile_nav"
+                        >
+                          <svg viewbox="0 0 48 48">
+                            <path
+                              class="hover-fillLight"
+                              fill="#F6A4EB"
+                              d="M41.364 21.886h6.538c.06.697.098 1.4.098 2.114 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c6.833 0 12.993 2.86 17.364 7.442v14.444z"
+                            />
+                            <path
+                              fill="#FFF"
+                              d="M37.746 37.4a1.3 1.3 0 0 1 .92-.38c.72 0 1.303.444 1.303 1.163 0 .503-.353.982-.708 1.292-3.484 3.122-8.325 5.53-13.783 5.53-11.75 0-19.486-9.538-19.486-18.83 0-8.72 7.195-16.19 15.25-16.19s11.227 5.54 11.227 5.54L37.747 37.4z"
+                            />
+                            <path
+                              class="hover-fillDark"
+                              fill="#9251AC"
+                              d="M47.995 24zm0 0c0-.995-.807-1.974-1.802-1.974-1.15 0-1.8.94-1.8 1.83-.09 3.174-1.228 7.127-3.453 10.182-2.355 3.232-6.91 6.956-13.242 6.956-7.625 0-13.213-5.767-13.213-11.925 0-4.3 2.886-7.17 5.828-7.17 1.588 0 2.48.683 2.965 1.312.362.468 1.063.493 1.482.074L40.968 7.032A23.926 23.926 0 0 1 47.995 24z"
+                            /></svg
+                          >Radar
+                        </a>
+                      </li>
+                    </ul>
+                  </div>
                 </div>
-            </li>
-
-
+                <div class="mobileSecondaryNav">
+                  <ul>
+                    <li>
+                      <a
+                        class="item-pricing"
+                        href="https://stripe.com/pricing"
+                        data-analytics-action="pricing"
+                        data-analytics-source="mobile_nav"
+                      >
+                        Pricing
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        class="item-workswith"
+                        href="https://stripe.com/works-with"
+                        data-analytics-action="works-with"
+                        data-analytics-source="mobile_nav"
+                      >
+                        Works with Stripe
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        class="item-gallery"
+                        href="https://stripe.com/customers"
+                        data-analytics-action="customers"
+                        data-analytics-source="mobile_nav"
+                      >
+                        Customers
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        class="item-documentation"
+                        href="https://stripe.com/docs"
+                        data-analytics-source="mobile_nav"
+                        data-analytics-action="documentation"
+                      >
+                        Documentation
+                      </a>
+                    </li>
+                  </ul>
+                  <ul>
+                    <li>
+                      <a
+                        class="item-about"
+                        href="https://stripe.com/about"
+                        data-analytics-source="mobile_nav"
+                        data-analytics-action="about"
+                      >
+                        About Stripe
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        class="item-jobs"
+                        href="https://stripe.com/jobs"
+                        data-analytics-source="mobile_nav"
+                        data-analytics-action="jobs"
+                      >
+                        Jobs
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        class="item-blog"
+                        href="https://stripe.com/blog"
+                        data-analytics-source="mobile_nav"
+                        data-analytics-action="blog"
+                      >
+                        Blog
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+                <a
+                  class="mobileSignIn"
+                  data-adroll-segment="submit_two"
+                  href="https://dashboard.stripe.com/login"
+                  data-analytics-source="mobile_nav"
+                  data-analytics-action="sign_in"
+                >
+                  Sign in
+                </a>
+              </div>
+            </div>
+          </li>
         </ul>
-    </div>
-
+      </div>
 
-
-    <div class="dropdownRoot">
+      <div class="dropdownRoot">
         <div class="dropdownBackground">
-            <div class="alternateBackground"></div>
+          <div class="alternateBackground"></div>
         </div>
         <div class="dropdownArrow"></div>
         <div class="dropdownContainer">
-
-            <div class="dropdownSection" data-dropdown="products">
-                <div class="dropdownContent">
-
-                    <div class="linkGroup">
-                        <ul class="productsGroupPrimary">
-                            <li>
-                                <a
-                                        class="linkContainer item-payments"
-                                        href="https://stripe.com/payments"
-                                        data-analytics-action="payments"
-                                        data-analytics-source="nav_dropdown"
-                                >
-                                    <svg viewbox="0 0 48 48"><path fill="#87BBFD" class="hover-fillLight" d="M24 48C12.11 48 2.244 39.35.338 28H6.5V9H5.27C9.67 3.515 16.423 0 24 0c13.255 0 24 10.745 24 24S37.255 48 24 48z"/><path fill="#555ABF" class="hover-fillDark" d="M25 21v8H.526A24.082 24.082 0 0 1 0 24 23.908 23.908 0 0 1 6.116 8H31.5c.828 0 1.5.67 1.5 1.5V21h-8zm-10.502-8.995a6.497 6.497 0 1 0 0 12.994 6.497 6.497 0 0 0 0-12.996z"/><path fill="#FFF" d="M39.823 39.276a2.44 2.44 0 0 1-1.76.724H16.5a1.5 1.5 0 0 1-1.5-1.5v-18c0-.828.67-1.5 1.5-1.5h27.693a1.51 1.51 0 0 1 1.484 1.256c.21 1.217.323 2.467.323 3.744 0 5.936-2.355 11.32-6.177 15.276zM33.5 23.002a6.497 6.497 0 1 0 0 12.995 6.497 6.497 0 0 0 .002-12.994z"/></svg>
-                                    <div class='productLinkContent'>
-                                        <h3 class="linkTitle">Payments</h3>
-                                        <p class="linkSub">A complete commerce toolkit, built for&nbsp;developers.</p>
-                                    </div>
-                                </a>
-                            </li>
-                            <li>
-                                <a
-                                        class="linkContainer item-subscriptions"
-                                        href="https://stripe.com/subscriptions"
-                                        data-analytics-action="subscriptions"
-                                        data-analytics-source="nav_dropdown"
-                                >
-                                    <svg viewbox="0 0 48 48"><path fill="#74E4A2" class="hover-fillLight" d="M24 0c13.255 0 24 10.745 24 24S37.255 48 24 48 0 37.255 0 24 10.745 0 24 0z"/><path fill="#FFF" d="M39.558 30.977c-6.23 6.225-16.304 6.194-22.535-.03l13.975-13.962c-6.232-6.224-16.335-6.224-22.567 0-4.043 4.04-5.456 9.712-4.247 14.896l-.654.174a21.89 21.89 0 0 1-1.536-8.61c.284-11.806 10.003-21.35 21.823-21.446 6.15-.05 11.72 2.42 15.744 6.438 6.23 6.226 6.23 16.318 0 22.542z"/><path fill="#159570" class="hover-fillDark" d="M33.653 21.413c1.43 5.336-1.735 10.82-7.068 12.25-5.332 1.43-10.814-1.736-12.242-7.072-1.43-5.334 1.735-10.82 7.068-12.25 5.334-1.43 10.815 1.738 12.244 7.074z"/></svg>
-                                    <div class='productLinkContent'>
-                                        <h3 class="linkTitle">Subscriptions</h3>
-                                        <p class="linkSub">The smart engine for recurring&nbsp;payments.</p>
-                                    </div>
-                                </a>
-                            </li>
-                            <li>
-                                <a
-                                        class="linkContainer item-connect"
-                                        href="https://stripe.com/connect"
-                                        data-analytics-action="connect"
-                                        data-analytics-source="nav_dropdown"
-                                >
-                                    <svg viewbox="0 0 48 48"><path fill="#68D4F8" class="hover-fillLight" d="M48 24c0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c1.363 0 2.698.12 4 .338V15h5v5h14.662c.218 1.302.338 2.637.338 4z"/><path fill="#FFF" d="M16.99 29.966L17 17l-5.55-.006a1.02 1.02 0 0 0-.725.3L2.65 25.446a1.55 1.55 0 0 0-.44 1.28c1.22 9.944 9.1 17.825 19.042 19.047.472.058.945-.104 1.28-.44l8.172-8.076c.192-.193.3-.453.3-.725L31 31l-12.985-.01a1.023 1.023 0 0 1-1.024-1.024z"/><path fill="#217AB7" class="hover-fillDark" d="M47.697 20.195L37.194 30.702a1.03 1.03 0 0 1-.726.3h-5.462V18.03c0-.567-.46-1.025-1.025-1.025H16.994V11.52c0-.274.108-.534.3-.726L27.783.3C38 1.916 46.07 9.98 47.698 20.194z"/></svg>
-                                    <div class='productLinkContent'>
-                                        <h3 class="linkTitle">Connect</h3>
-                                        <p class="linkSub">Everything platforms need to get sellers&nbsp;paid.</p>
-                                    </div>
-                                </a>
-                            </li>
-                        </ul>
-                    </div>
-
-                    <div class="linkGroup">
-                        <ul class="productsGroupSecondary">
-                            <li>
-                                <a
-                                        class="linkContainer item-sigma"
-                                        href='https://stripe.com/sigma'
-                                        data-analytics-action="sigma"
-                                        data-analytics-source="nav_dropdown"
-                                >
-                                    <svg viewBox="0 0 48 48"><path class="hover-fillLight" d="M24 48c-2.6 0-5-.3-7.2-1.1V35.2H4v2.1c-2.6-4-4-8.6-4-13.3C0 12.6 7.8 3.2 18.4.6V4h14.4V1.6C41.8 5.1 48 13.8 48 24c0 13.3-10.7 24-24 24z" fill="#beb0f4"/><path class="hover-fillDark" d="M45.6 24H32.8v17.6H17.6v-.2 5.8c-6.4-1.8-11.7-6.1-14.9-12 2.1-6.6 8-10.9 14.9-11.2V.8C19.7.3 21.9 0 24 0c3.4 0 6.7.6 9.6 1.9v8c0 6.1 4.5 10.9 10.2 11.7 1 .2 1.8 1.3 1.8 2.4z" fill="#7356b6"/><path d="M45.6 24c0 1.1-.8 2.1-1.8 2.2-5.8 1-10.2 5.8-10.2 11.7v5.3c-3 1.4-6.2 2.2-9.6 2.2-2.2 0-4.3-.3-6.4-1V40c0-7 5.8-13 12.5-13.8C31.2 26 32 25.1 32 24h13.6zM4 15.7C6.6 9.8 11.5 5.3 17.6 3.4V8c0 7 5.8 12.8 12.5 13.8 1.1.2 1.9 1.1 1.9 2.2H17.9C12 24 6.7 20.6 4 15.7z" fill="#FFF"/></svg>
-                                    <div class='productLinkContent'>
-                                        <h3 class="linkTitle">Sigma <span class='new-badge'>New</span></h3>
-                                        <p class="linkSub">Your business data at your&nbsp;fingertips.</p>
-                                    </div>
-                                </a>
-                            </li>
-                            <li>
-                                <a
-                                        class="linkContainer item-atlas"
-                                        href="https://stripe.com/atlas"
-                                        data-analytics-action="atlas"
-                                        data-analytics-source="nav_dropdown"
-                                >
-                                    <svg viewbox="0 0 48 48"><path fill="#FCD669" class="hover-fillLight" d="M24 0c13.255 0 24 10.745 24 24S37.255 48 24 48 0 37.255 0 24 10.745 0 24 0z"/><path fill="#CE7C3A" class="hover-fillDark" d="M24.012 1.834c.366.005.73.196.92.575l16.825 33.72c.396.79-.314 1.685-1.175 1.48L24 33.626V1.834h.01z"/><path fill="#FFF" d="M24 1.834v31.794l-16.584 3.98A1.043 1.043 0 0 1 6.24 36.13L23.067 2.41c.195-.39.572-.58.947-.576H24z"/></svg>
-                                    <div class='productLinkContent'>
-                                        <h3 class="linkTitle">Atlas</h3>
-                                        <p class="linkSub">The best way to start an internet&nbsp;business.</p>
-                                    </div>
-                                </a>
-                            </li>
-                            <li>
-                                <a
-                                        class="linkContainer item-radar"
-                                        href="https://stripe.com/radar"
-                                        data-analytics-action="radar"
-                                        data-analytics-source="nav_dropdown"
-                                >
-                                    <svg viewbox="0 0 48 48"><path class="hover-fillLight" fill="#F6A4EB" d="M41.364 21.886h6.538c.06.697.098 1.4.098 2.114 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c6.833 0 12.993 2.86 17.364 7.442v14.444z"/><path fill="#FFF" d="M37.746 37.4a1.3 1.3 0 0 1 .92-.38c.72 0 1.303.444 1.303 1.163 0 .503-.353.982-.708 1.292-3.484 3.122-8.325 5.53-13.783 5.53-11.75 0-19.486-9.538-19.486-18.83 0-8.72 7.195-16.19 15.25-16.19s11.227 5.54 11.227 5.54L37.747 37.4z"/><path class="hover-fillDark" fill="#9251AC" d="M47.995 24zm0 0c0-.995-.807-1.974-1.802-1.974-1.15 0-1.8.94-1.8 1.83-.09 3.174-1.228 7.127-3.453 10.182-2.355 3.232-6.91 6.956-13.242 6.956-7.625 0-13.213-5.767-13.213-11.925 0-4.3 2.886-7.17 5.828-7.17 1.588 0 2.48.683 2.965 1.312.362.468 1.063.493 1.482.074L40.968 7.032A23.926 23.926 0 0 1 47.995 24z"/></svg>
-                                    <div class='productLinkContent'>
-                                        <h3 class="linkTitle">Radar</h3>
-                                        <p class="linkSub">Modern tools to help beat&nbsp;fraud.</p>
-                                    </div>
-                                </a>
-                            </li>
-                        </ul>
-                    </div>
-
-                    <ul class="linkGroup linkList prodsubGroup">
-                        <li>
-                            <a
-                                    class="linkContainer item-workswith"
-                                    href="https://stripe.com/works-with"
-                                    data-analytics-action="works-with"
-                                    data-analytics-source="nav_dropdown"
-                            >
-                                <h3 class="linkTitle linkIcon"><svg width="17" height="17"><path class="hover-fillLight" fill="#87BBFD" d="M15.998 12.495a1.03 1.03 0 0 1-.595.908L8.93 16.395a1.018 1.018 0 0 1-.86 0l-6.473-2.992a1.03 1.03 0 0 1-.594-.908V4.51c.006-.2.07-.39.18-.55L8.5 7.338l7.32-3.38c.108.16.172.35.178.55v7.984z"/><path class="hover-fillDark" fill="#6772E5" d="M15.998 12.495a1.03 1.03 0 0 1-.595.908L8.93 16.395a1.026 1.026 0 0 1-.43.095V7.34l7.32-3.38c.11.16.173.35.18.55v7.984z"/><path class="hover-fillLight" fill="#87BBFD" d="M8.5 5C6.567 5 5 4.228 5 3.275v-1.15h.098c.36.768 1.742 1.34 3.402 1.34 1.66.002 3.043-.572 3.402-1.34H12v1.15C12 4.228 10.433 5 8.5 5z"/></svg>Works with Stripe</h3>
-                            </a>
-                        </li>
-                    </ul>
-
-                </div>
+          <div class="dropdownSection" data-dropdown="products">
+            <div class="dropdownContent">
+              <div class="linkGroup">
+                <ul class="productsGroupPrimary">
+                  <li>
+                    <a
+                      class="linkContainer item-payments"
+                      href="https://stripe.com/payments"
+                      data-analytics-action="payments"
+                      data-analytics-source="nav_dropdown"
+                    >
+                      <svg viewbox="0 0 48 48">
+                        <path
+                          fill="#87BBFD"
+                          class="hover-fillLight"
+                          d="M24 48C12.11 48 2.244 39.35.338 28H6.5V9H5.27C9.67 3.515 16.423 0 24 0c13.255 0 24 10.745 24 24S37.255 48 24 48z"
+                        />
+                        <path
+                          fill="#555ABF"
+                          class="hover-fillDark"
+                          d="M25 21v8H.526A24.082 24.082 0 0 1 0 24 23.908 23.908 0 0 1 6.116 8H31.5c.828 0 1.5.67 1.5 1.5V21h-8zm-10.502-8.995a6.497 6.497 0 1 0 0 12.994 6.497 6.497 0 0 0 0-12.996z"
+                        />
+                        <path
+                          fill="#FFF"
+                          d="M39.823 39.276a2.44 2.44 0 0 1-1.76.724H16.5a1.5 1.5 0 0 1-1.5-1.5v-18c0-.828.67-1.5 1.5-1.5h27.693a1.51 1.51 0 0 1 1.484 1.256c.21 1.217.323 2.467.323 3.744 0 5.936-2.355 11.32-6.177 15.276zM33.5 23.002a6.497 6.497 0 1 0 0 12.995 6.497 6.497 0 0 0 .002-12.994z"
+                        />
+                      </svg>
+                      <div class="productLinkContent">
+                        <h3 class="linkTitle">Payments</h3>
+                        <p class="linkSub">
+                          A complete commerce toolkit, built
+                          for&nbsp;developers.
+                        </p>
+                      </div>
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      class="linkContainer item-subscriptions"
+                      href="https://stripe.com/subscriptions"
+                      data-analytics-action="subscriptions"
+                      data-analytics-source="nav_dropdown"
+                    >
+                      <svg viewbox="0 0 48 48">
+                        <path
+                          fill="#74E4A2"
+                          class="hover-fillLight"
+                          d="M24 0c13.255 0 24 10.745 24 24S37.255 48 24 48 0 37.255 0 24 10.745 0 24 0z"
+                        />
+                        <path
+                          fill="#FFF"
+                          d="M39.558 30.977c-6.23 6.225-16.304 6.194-22.535-.03l13.975-13.962c-6.232-6.224-16.335-6.224-22.567 0-4.043 4.04-5.456 9.712-4.247 14.896l-.654.174a21.89 21.89 0 0 1-1.536-8.61c.284-11.806 10.003-21.35 21.823-21.446 6.15-.05 11.72 2.42 15.744 6.438 6.23 6.226 6.23 16.318 0 22.542z"
+                        />
+                        <path
+                          fill="#159570"
+                          class="hover-fillDark"
+                          d="M33.653 21.413c1.43 5.336-1.735 10.82-7.068 12.25-5.332 1.43-10.814-1.736-12.242-7.072-1.43-5.334 1.735-10.82 7.068-12.25 5.334-1.43 10.815 1.738 12.244 7.074z"
+                        />
+                      </svg>
+                      <div class="productLinkContent">
+                        <h3 class="linkTitle">Subscriptions</h3>
+                        <p class="linkSub">
+                          The smart engine for recurring&nbsp;payments.
+                        </p>
+                      </div>
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      class="linkContainer item-connect"
+                      href="https://stripe.com/connect"
+                      data-analytics-action="connect"
+                      data-analytics-source="nav_dropdown"
+                    >
+                      <svg viewbox="0 0 48 48">
+                        <path
+                          fill="#68D4F8"
+                          class="hover-fillLight"
+                          d="M48 24c0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c1.363 0 2.698.12 4 .338V15h5v5h14.662c.218 1.302.338 2.637.338 4z"
+                        />
+                        <path
+                          fill="#FFF"
+                          d="M16.99 29.966L17 17l-5.55-.006a1.02 1.02 0 0 0-.725.3L2.65 25.446a1.55 1.55 0 0 0-.44 1.28c1.22 9.944 9.1 17.825 19.042 19.047.472.058.945-.104 1.28-.44l8.172-8.076c.192-.193.3-.453.3-.725L31 31l-12.985-.01a1.023 1.023 0 0 1-1.024-1.024z"
+                        />
+                        <path
+                          fill="#217AB7"
+                          class="hover-fillDark"
+                          d="M47.697 20.195L37.194 30.702a1.03 1.03 0 0 1-.726.3h-5.462V18.03c0-.567-.46-1.025-1.025-1.025H16.994V11.52c0-.274.108-.534.3-.726L27.783.3C38 1.916 46.07 9.98 47.698 20.194z"
+                        />
+                      </svg>
+                      <div class="productLinkContent">
+                        <h3 class="linkTitle">Connect</h3>
+                        <p class="linkSub">
+                          Everything platforms need to get sellers&nbsp;paid.
+                        </p>
+                      </div>
+                    </a>
+                  </li>
+                </ul>
+              </div>
+
+              <div class="linkGroup">
+                <ul class="productsGroupSecondary">
+                  <li>
+                    <a
+                      class="linkContainer item-sigma"
+                      href="https://stripe.com/sigma"
+                      data-analytics-action="sigma"
+                      data-analytics-source="nav_dropdown"
+                    >
+                      <svg viewBox="0 0 48 48">
+                        <path
+                          class="hover-fillLight"
+                          d="M24 48c-2.6 0-5-.3-7.2-1.1V35.2H4v2.1c-2.6-4-4-8.6-4-13.3C0 12.6 7.8 3.2 18.4.6V4h14.4V1.6C41.8 5.1 48 13.8 48 24c0 13.3-10.7 24-24 24z"
+                          fill="#beb0f4"
+                        />
+                        <path
+                          class="hover-fillDark"
+                          d="M45.6 24H32.8v17.6H17.6v-.2 5.8c-6.4-1.8-11.7-6.1-14.9-12 2.1-6.6 8-10.9 14.9-11.2V.8C19.7.3 21.9 0 24 0c3.4 0 6.7.6 9.6 1.9v8c0 6.1 4.5 10.9 10.2 11.7 1 .2 1.8 1.3 1.8 2.4z"
+                          fill="#7356b6"
+                        />
+                        <path
+                          d="M45.6 24c0 1.1-.8 2.1-1.8 2.2-5.8 1-10.2 5.8-10.2 11.7v5.3c-3 1.4-6.2 2.2-9.6 2.2-2.2 0-4.3-.3-6.4-1V40c0-7 5.8-13 12.5-13.8C31.2 26 32 25.1 32 24h13.6zM4 15.7C6.6 9.8 11.5 5.3 17.6 3.4V8c0 7 5.8 12.8 12.5 13.8 1.1.2 1.9 1.1 1.9 2.2H17.9C12 24 6.7 20.6 4 15.7z"
+                          fill="#FFF"
+                        />
+                      </svg>
+                      <div class="productLinkContent">
+                        <h3 class="linkTitle">
+                          Sigma <span class="new-badge">New</span>
+                        </h3>
+                        <p class="linkSub">
+                          Your business data at your&nbsp;fingertips.
+                        </p>
+                      </div>
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      class="linkContainer item-atlas"
+                      href="https://stripe.com/atlas"
+                      data-analytics-action="atlas"
+                      data-analytics-source="nav_dropdown"
+                    >
+                      <svg viewbox="0 0 48 48">
+                        <path
+                          fill="#FCD669"
+                          class="hover-fillLight"
+                          d="M24 0c13.255 0 24 10.745 24 24S37.255 48 24 48 0 37.255 0 24 10.745 0 24 0z"
+                        />
+                        <path
+                          fill="#CE7C3A"
+                          class="hover-fillDark"
+                          d="M24.012 1.834c.366.005.73.196.92.575l16.825 33.72c.396.79-.314 1.685-1.175 1.48L24 33.626V1.834h.01z"
+                        />
+                        <path
+                          fill="#FFF"
+                          d="M24 1.834v31.794l-16.584 3.98A1.043 1.043 0 0 1 6.24 36.13L23.067 2.41c.195-.39.572-.58.947-.576H24z"
+                        />
+                      </svg>
+                      <div class="productLinkContent">
+                        <h3 class="linkTitle">Atlas</h3>
+                        <p class="linkSub">
+                          The best way to start an internet&nbsp;business.
+                        </p>
+                      </div>
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      class="linkContainer item-radar"
+                      href="https://stripe.com/radar"
+                      data-analytics-action="radar"
+                      data-analytics-source="nav_dropdown"
+                    >
+                      <svg viewbox="0 0 48 48">
+                        <path
+                          class="hover-fillLight"
+                          fill="#F6A4EB"
+                          d="M41.364 21.886h6.538c.06.697.098 1.4.098 2.114 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c6.833 0 12.993 2.86 17.364 7.442v14.444z"
+                        />
+                        <path
+                          fill="#FFF"
+                          d="M37.746 37.4a1.3 1.3 0 0 1 .92-.38c.72 0 1.303.444 1.303 1.163 0 .503-.353.982-.708 1.292-3.484 3.122-8.325 5.53-13.783 5.53-11.75 0-19.486-9.538-19.486-18.83 0-8.72 7.195-16.19 15.25-16.19s11.227 5.54 11.227 5.54L37.747 37.4z"
+                        />
+                        <path
+                          class="hover-fillDark"
+                          fill="#9251AC"
+                          d="M47.995 24zm0 0c0-.995-.807-1.974-1.802-1.974-1.15 0-1.8.94-1.8 1.83-.09 3.174-1.228 7.127-3.453 10.182-2.355 3.232-6.91 6.956-13.242 6.956-7.625 0-13.213-5.767-13.213-11.925 0-4.3 2.886-7.17 5.828-7.17 1.588 0 2.48.683 2.965 1.312.362.468 1.063.493 1.482.074L40.968 7.032A23.926 23.926 0 0 1 47.995 24z"
+                        />
+                      </svg>
+                      <div class="productLinkContent">
+                        <h3 class="linkTitle">Radar</h3>
+                        <p class="linkSub">
+                          Modern tools to help beat&nbsp;fraud.
+                        </p>
+                      </div>
+                    </a>
+                  </li>
+                </ul>
+              </div>
+
+              <ul class="linkGroup linkList prodsubGroup">
+                <li>
+                  <a
+                    class="linkContainer item-workswith"
+                    href="https://stripe.com/works-with"
+                    data-analytics-action="works-with"
+                    data-analytics-source="nav_dropdown"
+                  >
+                    <h3 class="linkTitle linkIcon">
+                      <svg width="17" height="17">
+                        <path
+                          class="hover-fillLight"
+                          fill="#87BBFD"
+                          d="M15.998 12.495a1.03 1.03 0 0 1-.595.908L8.93 16.395a1.018 1.018 0 0 1-.86 0l-6.473-2.992a1.03 1.03 0 0 1-.594-.908V4.51c.006-.2.07-.39.18-.55L8.5 7.338l7.32-3.38c.108.16.172.35.178.55v7.984z"
+                        />
+                        <path
+                          class="hover-fillDark"
+                          fill="#6772E5"
+                          d="M15.998 12.495a1.03 1.03 0 0 1-.595.908L8.93 16.395a1.026 1.026 0 0 1-.43.095V7.34l7.32-3.38c.11.16.173.35.18.55v7.984z"
+                        />
+                        <path
+                          class="hover-fillLight"
+                          fill="#87BBFD"
+                          d="M8.5 5C6.567 5 5 4.228 5 3.275v-1.15h.098c.36.768 1.742 1.34 3.402 1.34 1.66.002 3.043-.572 3.402-1.34H12v1.15C12 4.228 10.433 5 8.5 5z"
+                        /></svg
+                      >Works with Stripe
+                    </h3>
+                  </a>
+                </li>
+              </ul>
             </div>
+          </div>
 
-            <div class="dropdownSection" data-dropdown="developers">
-                <div class="dropdownContent">
-
-                    <div class="linkGroup documentationGroup">
-                        <a
-                                class="linkContainer withIcon item-documentation"
-                                href="https://stripe.com/docs"
-                                data-analytics-action="documentation"
-                                data-analytics-source="nav_dropdown"
-                        >
-                            <h3 class="linkTitle linkIcon"><svg width="17" height="17"><path fill="#87BBFD" class="hover-fillLight" d="M.945 1.998h3.632C6.744 1.998 8.5 3.005 8.5 4.83v11.583c-.512 0-1.015-.337-1.33-.59-1.03-.828-3.057-.828-5.222-.828H.945A.944.944 0 0 1 0 14.052V2.944C0 2.422.423 2 .945 2z"/><path fill="#6772E5" class="hover-fillDark" d="M16.055 1.998h-3.632C10.257 1.998 8.5 3.005 8.5 4.83v11.583c.512 0 1.015-.337 1.33-.59 1.03-.828 3.057-.828 5.222-.828h1.003A.944.944 0 0 0 17 14.05V2.945A.944.944 0 0 0 16.055 2z"/></svg>Documentation</h3>
-                            <span class="linkSub">Start integrating Stripe’s products and&nbsp;tools.</span>
-                        </a>
-                        <div class="documentationArticles">
-                            <ul>
-                                <li><h4>Get started</h4></li>
-                                <li>
-                                    <a
-                                            href="https://stripe.com/docs/elements"
-                                            data-analytics-action="docs_elements"
-                                            data-analytics-source="nav_dropdown"
-                                    >
-                                        Elements
-                                    </a>
-                                </li>
-                                <li>
-                                    <a
-                                            href="https://stripe.com/docs/quickstart"
-                                            data-analytics-action="docs_checkout_tutorial"
-                                            data-analytics-source="nav_dropdown"
-                                    >
-                                        Checkout
-                                    </a>
-                                </li>
-                                <li>
-                                    <a
-                                            href="https://stripe.com/docs/mobile"
-                                            data-analytics-action="docs_mobile"
-                                            data-analytics-source="nav_dropdown"
-                                    >
-                                        Mobile apps
-                                    </a>
-                                </li>
-                                <li>
-                                    <a
-                                            href="https://stripe.com/docs/libraries"
-                                            data-analytics-action="docs_libraries"
-                                            data-analytics-source="nav_dropdown"
-                                    >
-                                        Libraries
-                                    </a>
-                                </li>
-                            </ul>
-                            <ul>
-                                <li><h4>Popular topics</h4></li>
-                                <li>
-                                    <a
-                                            href="https://stripe.com/docs/apple-pay"
-                                            data-analytics-action="docs_apple_pay"
-                                            data-analytics-source="nav_dropdown"
-                                    >
-                                        Apple Pay
-                                    </a>
-                                </li>
-                                <li>
-                                    <a
-                                            href="https://stripe.com/docs/testing"
-                                            data-analytics-action="docs_testing"
-                                            data-analytics-source="nav_dropdown"
-                                    >
-                                        Testing
-                                    </a>
-                                </li>
-                                <li>
-                                    <a
-                                            href="https://stripe.com/docs/checklist"
-                                            data-analytics-action="docs_launch_checklist"
-                                            data-analytics-source="nav_dropdown"
-                                    >
-                                        Launch checklist
-                                    </a>
-                                </li>
-                                <li>
-                                    <a
-                                            href="https://stripe.com/docs/libraries#third-party-plugins"
-                                            data-analytics-action="docs_plugins"
-                                            data-analytics-source="nav_dropdown"
-                                    >
-                                        Plug-ins
-                                    </a>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-
-                    <ul class="linkGroup linkList developersGroup">
-                        <li>
-                            <a
-                                    class="linkContainer item-apiReference"
-                                    href="https://stripe.com/docs/api"
-                                    data-analytics-action="api_reference"
-                                    data-analytics-source="nav_dropdown"
-                            >
-                                <h3 class="linkTitle linkIcon"><svg width="17" height="17"><path d="M2 15h13M2 11h13M2 7h13M2 3h13" fill="none" stroke="#6772e5" class="hover-strokeDark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Full API Reference</h3>
-                            </a>
-                        </li>
-                        <li>
-                            <a
-                                    class="linkContainer item-apiStatus"
-                                    href="https://status.stripe.com"
-                                    data-analytics-action="api_status"
-                                    data-analytics-source="nav_dropdown"
-                            >
-                                <h3 class="linkTitle linkIcon"><svg width="17" height="17"><path d="M1 9h2.95l3-6.5 3 12 3-5.45L16 9" fill="none" stroke="#6772e5" class="hover-strokeDark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>API Status</h3>
-                            </a>
-                        </li>
-                        <li>
-                            <a
-                                    class="linkContainer item-openSource"
-                                    href="https://stripe.com/open-source"
-                                    data-analytics-action="open_source"
-                                    data-analytics-source="nav_dropdown"
-                            >
-                                <h3 class="linkTitle linkIcon"><svg width="17" height="17"><path fill="#6772E5" class="hover-fillDark" d="M8.5 17a8.5 8.5 0 1 1 0-17 8.5 8.5 0 0 1 0 17zM6.987 6.078a.684.684 0 0 0-.968-.968L3.116 8.012a.684.684 0 0 0 0 .967l2.9 2.9a.684.684 0 0 0 .97-.967l-2.42-2.418 2.42-2.42zm6.996 1.95L11.08 5.123a.684.684 0 0 0-.966.968l2.418 2.42-2.418 2.417a.684.684 0 0 0 .967.967l2.904-2.902a.684.684 0 0 0 0-.966z"/></svg>Open Source</h3>
-                            </a></li>
-                    </ul>
-
+          <div class="dropdownSection" data-dropdown="developers">
+            <div class="dropdownContent">
+              <div class="linkGroup documentationGroup">
+                <a
+                  class="linkContainer withIcon item-documentation"
+                  href="https://stripe.com/docs"
+                  data-analytics-action="documentation"
+                  data-analytics-source="nav_dropdown"
+                >
+                  <h3 class="linkTitle linkIcon">
+                    <svg width="17" height="17">
+                      <path
+                        fill="#87BBFD"
+                        class="hover-fillLight"
+                        d="M.945 1.998h3.632C6.744 1.998 8.5 3.005 8.5 4.83v11.583c-.512 0-1.015-.337-1.33-.59-1.03-.828-3.057-.828-5.222-.828H.945A.944.944 0 0 1 0 14.052V2.944C0 2.422.423 2 .945 2z"
+                      />
+                      <path
+                        fill="#6772E5"
+                        class="hover-fillDark"
+                        d="M16.055 1.998h-3.632C10.257 1.998 8.5 3.005 8.5 4.83v11.583c.512 0 1.015-.337 1.33-.59 1.03-.828 3.057-.828 5.222-.828h1.003A.944.944 0 0 0 17 14.05V2.945A.944.944 0 0 0 16.055 2z"
+                      /></svg
+                    >Documentation
+                  </h3>
+                  <span class="linkSub"
+                    >Start integrating Stripe’s products and&nbsp;tools.</span
+                  >
+                </a>
+                <div class="documentationArticles">
+                  <ul>
+                    <li><h4>Get started</h4></li>
+                    <li>
+                      <a
+                        href="https://stripe.com/docs/elements"
+                        data-analytics-action="docs_elements"
+                        data-analytics-source="nav_dropdown"
+                      >
+                        Elements
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href="https://stripe.com/docs/quickstart"
+                        data-analytics-action="docs_checkout_tutorial"
+                        data-analytics-source="nav_dropdown"
+                      >
+                        Checkout
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href="https://stripe.com/docs/mobile"
+                        data-analytics-action="docs_mobile"
+                        data-analytics-source="nav_dropdown"
+                      >
+                        Mobile apps
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href="https://stripe.com/docs/libraries"
+                        data-analytics-action="docs_libraries"
+                        data-analytics-source="nav_dropdown"
+                      >
+                        Libraries
+                      </a>
+                    </li>
+                  </ul>
+                  <ul>
+                    <li><h4>Popular topics</h4></li>
+                    <li>
+                      <a
+                        href="https://stripe.com/docs/apple-pay"
+                        data-analytics-action="docs_apple_pay"
+                        data-analytics-source="nav_dropdown"
+                      >
+                        Apple Pay
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href="https://stripe.com/docs/testing"
+                        data-analytics-action="docs_testing"
+                        data-analytics-source="nav_dropdown"
+                      >
+                        Testing
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href="https://stripe.com/docs/checklist"
+                        data-analytics-action="docs_launch_checklist"
+                        data-analytics-source="nav_dropdown"
+                      >
+                        Launch checklist
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href="https://stripe.com/docs/libraries#third-party-plugins"
+                        data-analytics-action="docs_plugins"
+                        data-analytics-source="nav_dropdown"
+                      >
+                        Plug-ins
+                      </a>
+                    </li>
+                  </ul>
                 </div>
+              </div>
+
+              <ul class="linkGroup linkList developersGroup">
+                <li>
+                  <a
+                    class="linkContainer item-apiReference"
+                    href="https://stripe.com/docs/api"
+                    data-analytics-action="api_reference"
+                    data-analytics-source="nav_dropdown"
+                  >
+                    <h3 class="linkTitle linkIcon">
+                      <svg width="17" height="17">
+                        <path
+                          d="M2 15h13M2 11h13M2 7h13M2 3h13"
+                          fill="none"
+                          stroke="#6772e5"
+                          class="hover-strokeDark"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        /></svg
+                      >Full API Reference
+                    </h3>
+                  </a>
+                </li>
+                <li>
+                  <a
+                    class="linkContainer item-apiStatus"
+                    href="https://status.stripe.com"
+                    data-analytics-action="api_status"
+                    data-analytics-source="nav_dropdown"
+                  >
+                    <h3 class="linkTitle linkIcon">
+                      <svg width="17" height="17">
+                        <path
+                          d="M1 9h2.95l3-6.5 3 12 3-5.45L16 9"
+                          fill="none"
+                          stroke="#6772e5"
+                          class="hover-strokeDark"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        /></svg
+                      >API Status
+                    </h3>
+                  </a>
+                </li>
+                <li>
+                  <a
+                    class="linkContainer item-openSource"
+                    href="https://stripe.com/open-source"
+                    data-analytics-action="open_source"
+                    data-analytics-source="nav_dropdown"
+                  >
+                    <h3 class="linkTitle linkIcon">
+                      <svg width="17" height="17">
+                        <path
+                          fill="#6772E5"
+                          class="hover-fillDark"
+                          d="M8.5 17a8.5 8.5 0 1 1 0-17 8.5 8.5 0 0 1 0 17zM6.987 6.078a.684.684 0 0 0-.968-.968L3.116 8.012a.684.684 0 0 0 0 .967l2.9 2.9a.684.684 0 0 0 .97-.967l-2.42-2.418 2.42-2.42zm6.996 1.95L11.08 5.123a.684.684 0 0 0-.966.968l2.418 2.42-2.418 2.417a.684.684 0 0 0 .967.967l2.904-2.902a.684.684 0 0 0 0-.966z"
+                        /></svg
+                      >Open Source
+                    </h3>
+                  </a>
+                </li>
+              </ul>
             </div>
+          </div>
+
+          <div class="dropdownSection" data-dropdown="company">
+            <div class="dropdownContent">
+              <ul class="linkGroup linkList companyGroup">
+                <li>
+                  <a
+                    class="linkContainer item-about"
+                    href="https://stripe.com/about"
+                    data-analytics-action="about"
+                    data-analytics-source="nav_dropdown"
+                  >
+                    <h3 class="linkTitle linkIcon">
+                      <svg width="17" height="17">
+                        <path
+                          fill="#6772E5"
+                          class="hover-fillDark"
+                          d="M8.5 17a8.5 8.5 0 1 1 0-17 8.5 8.5 0 0 1 0 17zm.178-10.89c.76 0 1.726.278 2.486.69V4.443c-.828-.33-1.656-.502-2.484-.502-2.028 0-3.41 1.06-3.41 2.83 0 2.77 3.8 2.32 3.8 3.513 0 .462-.37.612-.93.612-.827 0-1.867-.366-2.706-.823v2.388c.93.4 1.843.592 2.705.592 2.077 0 3.48-1.027 3.48-2.827 0-2.98-3.82-2.447-3.82-3.572-.003-.39.352-.542.877-.542z"
+                        /></svg
+                      >About Stripe
+                    </h3>
+                  </a>
+                </li>
+                <li>
+                  <a
+                    class="linkContainer item-customers"
+                    href="https://stripe.com/customers"
+                    data-analytics-action="customers"
+                    data-analytics-source="nav_dropdown"
+                  >
+                    <h3 class="linkTitle linkIcon">
+                      <svg width="17" height="17">
+                        <path
+                          fill="#87BBFD"
+                          class="hover-fillLight"
+                          d="M2 16a1 1 0 0 1-1-1V9a4 4 0 0 1 8 0v7H2zm3-9a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"
+                        />
+                        <path
+                          fill="#6772E5"
+                          class="hover-fillDark"
+                          d="M15 16H9a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h.55a2.5 2.5 0 0 1 4.9 0H15a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1z"
+                        />
+                        <path
+                          fill="#87BBFD"
+                          class="hover-fillLight"
+                          d="M11 12h2v4h-2v-4z"
+                        /></svg
+                      >Customers
+                    </h3>
+                  </a>
+                </li>
+                <li>
+                  <a
+                    class="linkContainer item-jobs"
+                    href="https://stripe.com/jobs"
+                    data-analytics-action="jobs"
+                    data-analytics-source="nav_dropdown"
+                  >
+                    <h3 class="linkTitle linkIcon">
+                      <svg width="17" height="17">
+                        <path
+                          fill="#6772E5"
+                          class="hover-fillDark"
+                          d="M1.5 4h14c.828 0 1.5.67 1.5 1.5v8a1.5 1.5 0 0 1-1.5 1.5h-14A1.5 1.5 0 0 1 0 13.5v-8C0 4.67.67 4 1.5 4z"
+                        />
+                        <path
+                          fill="#87BBFD"
+                          class="hover-fillLight"
+                          d="M13 15V4h2v11h-2zM2 4h2v11H2V4z"
+                        />
+                        <path
+                          fill="#6772E5"
+                          class="hover-fillDark"
+                          d="M11.5 3.5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1V4H4v-.5A2.5 2.5 0 0 1 6.5 1h4A2.5 2.5 0 0 1 13 3.5V4h-1.5v-.5z"
+                        /></svg
+                      >Jobs
+                    </h3>
+                  </a>
+                </li>
+                <li>
+                  <a
+                    class="linkContainer item-environment"
+                    href="https://stripe.com/environment"
+                    data-analytics-action="environment"
+                    data-analytics-source="nav_dropdown"
+                  >
+                    <h3 class="linkTitle linkIcon">
+                      <svg width="17" height="17">
+                        <path
+                          class="hover-fillLight"
+                          fill="#87BBFD"
+                          d="M16.17 1.51c-4.33 6.16-7.92 9.65-12.88 11.91-.32-1.3-1.38-6.55 1.27-9.27 2.76-2.82 6.83-1.68 10.73-2.9a.8.8 0 0 1 .88.26z"
+                        />
+                        <path
+                          class="hover-fillDark"
+                          fill="#6772E5"
+                          d="M1 14.37c.68-.26 1.33-.6 1.92-1.02.11-.05.22-.11.32-.18 4.61-3 8.17-6.06 12.8-11.79.19.15.29.37.28.6-.11 3.38-.57 7.9-3.13 10.52-2.33 2.38-6.84 1.83-8.83 1.45-.89.7-1.88 1.27-2.93 1.67A.66.66 0 0 1 1 14.37z"
+                        /></svg
+                      >Environment
+                    </h3>
+                  </a>
+                </li>
+              </ul>
 
-            <div class="dropdownSection" data-dropdown="company">
-                <div class="dropdownContent">
-
-                    <ul class="linkGroup linkList companyGroup">
-                        <li>
-                            <a
-                                    class="linkContainer item-about"
-                                    href="https://stripe.com/about"
-                                    data-analytics-action="about"
-                                    data-analytics-source="nav_dropdown"
-                            >
-                                <h3 class="linkTitle linkIcon"><svg width="17" height="17"><path fill="#6772E5" class="hover-fillDark" d="M8.5 17a8.5 8.5 0 1 1 0-17 8.5 8.5 0 0 1 0 17zm.178-10.89c.76 0 1.726.278 2.486.69V4.443c-.828-.33-1.656-.502-2.484-.502-2.028 0-3.41 1.06-3.41 2.83 0 2.77 3.8 2.32 3.8 3.513 0 .462-.37.612-.93.612-.827 0-1.867-.366-2.706-.823v2.388c.93.4 1.843.592 2.705.592 2.077 0 3.48-1.027 3.48-2.827 0-2.98-3.82-2.447-3.82-3.572-.003-.39.352-.542.877-.542z"/></svg>About Stripe</h3>
-                            </a>
-                        </li>
-                        <li>
-                            <a
-                                    class="linkContainer item-customers"
-                                    href="https://stripe.com/customers"
-                                    data-analytics-action="customers"
-                                    data-analytics-source="nav_dropdown"
-                            >
-                                <h3 class="linkTitle linkIcon"><svg width="17" height="17"><path fill="#87BBFD" class="hover-fillLight" d="M2 16a1 1 0 0 1-1-1V9a4 4 0 0 1 8 0v7H2zm3-9a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"/><path fill="#6772E5" class="hover-fillDark" d="M15 16H9a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h.55a2.5 2.5 0 0 1 4.9 0H15a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1z"/><path fill="#87BBFD" class="hover-fillLight" d="M11 12h2v4h-2v-4z"/></svg>Customers</h3>
-                            </a></li>
-                        <li>
-                            <a
-                                    class="linkContainer item-jobs"
-                                    href="https://stripe.com/jobs"
-                                    data-analytics-action="jobs"
-                                    data-analytics-source="nav_dropdown"
-                            >
-                                <h3 class="linkTitle linkIcon"><svg width="17" height="17"><path fill="#6772E5" class="hover-fillDark" d="M1.5 4h14c.828 0 1.5.67 1.5 1.5v8a1.5 1.5 0 0 1-1.5 1.5h-14A1.5 1.5 0 0 1 0 13.5v-8C0 4.67.67 4 1.5 4z"/><path fill="#87BBFD" class="hover-fillLight" d="M13 15V4h2v11h-2zM2 4h2v11H2V4z"/><path fill="#6772E5" class="hover-fillDark" d="M11.5 3.5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1V4H4v-.5A2.5 2.5 0 0 1 6.5 1h4A2.5 2.5 0 0 1 13 3.5V4h-1.5v-.5z"/></svg>Jobs</h3>
-                            </a>
-                        </li>
-                        <li>
-                            <a
-                                    class="linkContainer item-environment"
-                                    href="https://stripe.com/environment"
-                                    data-analytics-action="environment"
-                                    data-analytics-source="nav_dropdown"
-                            >
-                                <h3 class="linkTitle linkIcon"><svg width="17" height="17"><path class="hover-fillLight" fill="#87BBFD" d="M16.17 1.51c-4.33 6.16-7.92 9.65-12.88 11.91-.32-1.3-1.38-6.55 1.27-9.27 2.76-2.82 6.83-1.68 10.73-2.9a.8.8 0 0 1 .88.26z"/><path class="hover-fillDark" fill="#6772E5" d="M1 14.37c.68-.26 1.33-.6 1.92-1.02.11-.05.22-.11.32-.18 4.61-3 8.17-6.06 12.8-11.79.19.15.29.37.28.6-.11 3.38-.57 7.9-3.13 10.52-2.33 2.38-6.84 1.83-8.83 1.45-.89.7-1.88 1.27-2.93 1.67A.66.66 0 0 1 1 14.37z"/></svg>Environment</h3>
-                            </a>
-                        </li>
-                    </ul>
-
-                    <div class="linkGroup blogGroup">
-                        <a
-                                class="linkContainer withIcon item-blog"
-                                href="https://stripe.com/blog"
-                                data-analytics-action="blog"
-                                data-analytics-source="nav_dropdown"
-                        >
-                            <h3 class="linkTitle linkIcon"><svg width="17" height="17"><path fill="#87BBFD" class="hover-fillLight" d="M1 4h4.5v11H1.75A1.75 1.75 0 0 1 0 13.25V5a1 1 0 0 1 1-1z"/><path fill="#6772E5" class="hover-fillDark" d="M14 15H2v-.025a2.243 2.243 0 0 0 2-2.225V3a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v9a3 3 0 0 1-3 3zm1-11H6v3h9V4z"/></svg>From the blog</h3>
-                        </a>
-                        <ul class="blogPosts">
-                            <li><a href="/blog/atlas-business-of-saas">
-                                <span class='title new'>Stripe Atlas: the business of SaaS</span>
-                                <span class='new-badge'>New</span>
-                            </a></li>
-                            <li><a href="/blog/carbon-neutral-journey">
-                                <span class='title new'>Stripe is now carbon-neutral</span>
-                                <span class='new-badge'>New</span>
-                            </a></li>
-                            <li><a href="/blog/completing-tls-upgrade">
-                                <span class='title '>Completing an upgrade to TLS 1.2</span>
-
-                            </a></li>
-                        </ul>
-                    </div>
-
-                </div>
+              <div class="linkGroup blogGroup">
+                <a
+                  class="linkContainer withIcon item-blog"
+                  href="https://stripe.com/blog"
+                  data-analytics-action="blog"
+                  data-analytics-source="nav_dropdown"
+                >
+                  <h3 class="linkTitle linkIcon">
+                    <svg width="17" height="17">
+                      <path
+                        fill="#87BBFD"
+                        class="hover-fillLight"
+                        d="M1 4h4.5v11H1.75A1.75 1.75 0 0 1 0 13.25V5a1 1 0 0 1 1-1z"
+                      />
+                      <path
+                        fill="#6772E5"
+                        class="hover-fillDark"
+                        d="M14 15H2v-.025a2.243 2.243 0 0 0 2-2.225V3a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v9a3 3 0 0 1-3 3zm1-11H6v3h9V4z"
+                      /></svg
+                    >From the blog
+                  </h3>
+                </a>
+                <ul class="blogPosts">
+                  <li>
+                    <a href="/blog/atlas-business-of-saas">
+                      <span class="title new"
+                        >Stripe Atlas: the business of SaaS</span
+                      >
+                      <span class="new-badge">New</span>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="/blog/carbon-neutral-journey">
+                      <span class="title new"
+                        >Stripe is now carbon-neutral</span
+                      >
+                      <span class="new-badge">New</span>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="/blog/completing-tls-upgrade">
+                      <span class="title"
+                        >Completing an upgrade to TLS 1.2</span
+                      >
+                    </a>
+                  </li>
+                </ul>
+              </div>
             </div>
-
+          </div>
         </div>
-    </div>
+      </div>
+    </header>
 
-</header>
-
-
-
-
-<div class="globalContent">
-
-    <main>
+    <div class="globalContent">
+      <main>
         <header>
-            <div id="stripes">
-                <span></span>
-                <span></span>
-                <span></span>
-                <span></span>
-                <span></span>
+          <div id="stripes">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+          </div>
+
+          <section id="intro">
+            <div class="container-lg">
+              <a class="announcement" href="/elements">
+                <span class="new-pill">New</span>
+                <span class="message">
+                  Build beautiful, smart checkout flows with Stripe Elements
+                </span>
+              </a>
+
+              <h1>The new standard in online payments</h1>
+              <p class="common-BodyText">
+                Stripe is the best software platform for running an internet
+                business. We handle billions of dollars every year for
+                forward-thinking businesses around the world.
+              </p>
+              <ul>
+                <li>
+                  <a
+                    href="https://dashboard.stripe.com/register"
+                    class="common-Button"
+                    data-analytics-action="create_account"
+                    data-analytics-source="header_cta"
+                  >
+                    Create account
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="/contact/sales"
+                    class="common-Button"
+                    data-analytics-action="contact_sales"
+                    data-analytics-source="header_cta"
+                  >
+                    Contact Sales
+                  </a>
+                </li>
+              </ul>
             </div>
-
-            <section id="intro">
-                <div class="container-lg">
-                    <a class="announcement" href="/elements">
-                        <span class="new-pill">New</span>
-                        <span class="message">
-              Build beautiful, smart checkout flows with Stripe Elements
-          </span>
-                    </a>
-
-                    <h1>
-                        The new standard in online payments
-                    </h1>
-                    <p class="common-BodyText">
-                        Stripe is the best software platform for running an internet business. We handle billions of dollars every year for forward-thinking businesses around the world.
-                    </p>
-                    <ul>
-                        <li>
-                            <a
-                                    href="https://dashboard.stripe.com/register"
-                                    class="common-Button"
-                                    data-analytics-action="create_account"
-                                    data-analytics-source="header_cta"
-                            >
-                                Create account
-                            </a>
-                        </li>
-                        <li>
-                            <a
-                                    href="/contact/sales"
-                                    class="common-Button"
-                                    data-analytics-action="contact_sales"
-                                    data-analytics-source="header_cta"
-                            >
-                                Contact Sales
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-            </section>
+          </section>
         </header>
 
-
         <section id="app-illustrations" class="hidden-preload">
-            <div class="tablet-landscape">
-                <img alt="slack" src="/img/v3/home/app-illustrations/slack.svg">
-            </div>
-            <div class="phone-big">
-                <img alt="digitalocean" src="/img/v3/home/app-illustrations/digitalocean.svg">
-            </div>
-            <div class="phone-small">
-                <img alt="doordash" src="/img/v3/home/app-illustrations/doordash.svg">
-            </div>
-            <div class="tablet-portrait">
-                <img alt="warbyparker" src="/img/v3/home/app-illustrations/warbyparker.svg">
-            </div>
+          <div class="tablet-landscape">
+            <img alt="slack" src="/img/v3/home/app-illustrations/slack.svg" />
+          </div>
+          <div class="phone-big">
+            <img
+              alt="digitalocean"
+              src="/img/v3/home/app-illustrations/digitalocean.svg"
+            />
+          </div>
+          <div class="phone-small">
+            <img
+              alt="doordash"
+              src="/img/v3/home/app-illustrations/doordash.svg"
+            />
+          </div>
+          <div class="tablet-portrait">
+            <img
+              alt="warbyparker"
+              src="/img/v3/home/app-illustrations/warbyparker.svg"
+            />
+          </div>
         </section>
 
-
         <section id="primary">
-            <section id="complete-toolkit" class="container-lg">
-                <h2 class="common-UppercaseTitle">
-                    <svg class="heading-icon">
-                        <circle fill="#B9F4BC" cx="33" cy="33" r="33"/>
-                        <path d="M15.7 45.3c-.7-2-.7-3.3-.7-8v-8.7c0-4.6 0-6 .7-8 .8-2.2 2.7-4 5-5 2-.6 3.3-.6 8-.6h8.7c4.6 0 6 0 8 .7 2.2.8 4 2.7 5 5 .6 2 .6 3.3.6 8v8.7c0 4.6 0 6-.7 8-.8 2.2-2.7 4-5 5-2 .6-3.3.6-8 .6h-8.7c-4.6 0-6 0-8-.7-2.2-.8-4-2.7-5-5z" fill="#6ED69A"/>
-                        <g>
-                            <rect fill="#B9F4BC" x="23" y="27" width="20" height="2" rx="1"/>
-                            <circle fill="#1BB978" cx="27" cy="28" r="4"/>
-                        </g>
-                        <g>
-                            <rect fill="#1BB978" x="23" y="37" width="20" height="2" rx="1"/>
-                            <circle fill="#1BB978" cx="39" cy="38" r="4"/>
-                        </g>
-                    </svg>
-                    <span>
-          The complete toolkit for internet business
-        </span>
-                </h2>
-                <p class="common-BodyText">
-                    Stripe builds the most powerful and flexible tools for internet commerce. Whether you’re creating a subscription service, an on-demand marketplace, an e-commerce store, or a crowdfunding platform, Stripe’s meticulously-designed APIs and unmatched functionality help you create the best possible product for your users. Hundreds of thousands of the world’s most innovative technology companies are scaling faster and more efficiently by building their businesses on Stripe.
-                </p>
-                <a class="common-BodyText common-Link common-Link--arrow" href="/customers">
-                    Discover how businesses use Stripe
+          <section id="complete-toolkit" class="container-lg">
+            <h2 class="common-UppercaseTitle">
+              <svg class="heading-icon">
+                <circle fill="#B9F4BC" cx="33" cy="33" r="33" />
+                <path
+                  d="M15.7 45.3c-.7-2-.7-3.3-.7-8v-8.7c0-4.6 0-6 .7-8 .8-2.2 2.7-4 5-5 2-.6 3.3-.6 8-.6h8.7c4.6 0 6 0 8 .7 2.2.8 4 2.7 5 5 .6 2 .6 3.3.6 8v8.7c0 4.6 0 6-.7 8-.8 2.2-2.7 4-5 5-2 .6-3.3.6-8 .6h-8.7c-4.6 0-6 0-8-.7-2.2-.8-4-2.7-5-5z"
+                  fill="#6ED69A"
+                />
+                <g>
+                  <rect
+                    fill="#B9F4BC"
+                    x="23"
+                    y="27"
+                    width="20"
+                    height="2"
+                    rx="1"
+                  />
+                  <circle fill="#1BB978" cx="27" cy="28" r="4" />
+                </g>
+                <g>
+                  <rect
+                    fill="#1BB978"
+                    x="23"
+                    y="37"
+                    width="20"
+                    height="2"
+                    rx="1"
+                  />
+                  <circle fill="#1BB978" cx="39" cy="38" r="4" />
+                </g>
+              </svg>
+              <span> The complete toolkit for internet business </span>
+            </h2>
+            <p class="common-BodyText">
+              Stripe builds the most powerful and flexible tools for internet
+              commerce. Whether you’re creating a subscription service, an
+              on-demand marketplace, an e-commerce store, or a crowdfunding
+              platform, Stripe’s meticulously-designed APIs and unmatched
+              functionality help you create the best possible product for your
+              users. Hundreds of thousands of the world’s most innovative
+              technology companies are scaling faster and more efficiently by
+              building their businesses on Stripe.
+            </p>
+            <a
+              class="common-BodyText common-Link common-Link--arrow"
+              href="/customers"
+            >
+              Discover how businesses use Stripe
+            </a>
+          </section>
+
+          <section id="developers-first">
+            <div id="programming-languages"></div>
+            <h2 class="common-UppercaseTitle">
+              <svg class="heading-icon">
+                <circle fill="#B9F4BC" cx="33" cy="33" r="33" />
+                <path
+                  d="M38.4 15l1-3h1l1.2 3c.2.2.5.2.7.3l2.2-2.5 1 .4-.2 3.3c.2 0 .3.2.5.4l3-1.5.7.7-1.4 3 .5.5h3.3l.4.8-2.5 2.2c0 .2 0 .5.2.7l3 1v1l-3 1.2-.3.8 2.5 2-.4 1-3.3-.2-.4.7 1.5 2.8-.7.7-3-1.4c0 .2-.4.4-.6.5l.2 3.3-1 .4-2-2.5c-.3 0-.6 0-1 .2l-1 3h-1l-1-3c-.2-.2-.5-.2-.8-.3l-2 2.5-1-.4.2-3.3-.7-.4-2.8 1.5-.7-.7 1.4-3c-.2 0-.4-.4-.5-.6l-3.3.2-.4-1 2.5-2c0-.3 0-.6-.2-1l-3-1v-1l3-1c.2-.2.2-.4.3-.7l-2.5-2.2.4-1 3.3.2c0-.2.2-.3.4-.5l-1.5-3 .7-.7 3 1.4.5-.5v-3.3l.8-.4 2.2 2.5s.5 0 .7-.2z"
+                  fill="#6ED69A"
+                />
+                <circle fill="#B9F4BC" cx="40" cy="25" r="2" />
+                <path
+                  d="M21.6 26.8L19 25l-1.3 1 1.4 3c0 .2-.3.4-.5.6l-3-.8-1 1.4 2.4 2.3-.4.8-3.2.3-.3 1.6 3 1.4v.8l-3 1.4.4 1.6 3.2.3c0 .3.2.5.3.8l-2.4 2.3.8 1.4 3-.8.7.6-1.3 3 1.3 1 2.6-1.8c.3 0 .5.3.8.4l-.3 3.2 1.6.6 2-2.7c.2 0 .5 0 .7.2l1 3h1.5l1-3c0-.2.4-.2.7-.3l2 2.7 1.4-.6-.4-3.2c.3 0 .5-.3.8-.4L37 49l1.3-1-1.4-3c0-.2.3-.4.5-.6l3 .8 1-1.4-2.4-2.3.4-.8 3.2-.3.3-1.6-3-1.4v-.8l3-1.4-.4-1.6-3.2-.3c0-.3-.2-.5-.3-.8l2.4-2.3-.8-1.4-3 .8-.7-.6 1.3-3-1.3-1-2.6 1.8c-.3 0-.5-.3-.8-.4l.3-3.2-1.6-.6-2 2.7c-.2 0-.5 0-.7-.2l-1-3h-1.5l-1 3c0 .2-.4.2-.7.3l-2-2.7-1.4.6.4 3.2c-.3 0-.5.3-.8.4z"
+                  fill="#1BB978"
+                />
+                <circle fill="#B9F4BC" cx="28" cy="37" r="3" />
+              </svg>
+              Developers first
+            </h2>
+            <p class="common-BodyText">
+              We believe that payments is a problem rooted in code, not finance.
+              We obsessively seek out elegant, composable abstractions that
+              enable robust, scalable, flexible integrations. Because we
+              eliminate needless complexity and extraneous details, you can get
+              up and running with Stripe in just a couple of minutes.
+            </p>
+            <section id="notebook" class="container-lg">
+              <nav>
+                <select>
+                  <option value="payments">Payments</option>
+                  <option value="customers">Customers</option>
+                  <option value="subscriptions">Subscriptions</option>
+                  <option value="reporting">Reporting</option>
+                </select>
+                <span id="api-method-selection"></span>
+                <ul>
+                  <li>
+                    <button class="common-BodyText common-Link">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 13 14"
+                      >
+                        <path
+                          fill="#6772E5"
+                          fill-rule="evenodd"
+                          d="M0 3a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V3zm0 1h13v2H0V4z"
+                        />
+                      </svg>
+                      Payments
+                    </button>
+                  </li>
+
+                  <li>
+                    <button class="common-BodyText common-Link">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 13 14"
+                      >
+                        <path
+                          fill="#6772E5"
+                          d="M12.5 11.75c0-1.24-2.69-2.25-6-2.25s-6 1-6 2.25c0 .46.37.9 1.01 1.25h9.98c.64-.36 1.01-.79 1.01-1.25zM6.5 8a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"
+                        />
+                      </svg>
+                      Customers
+                    </button>
+                  </li>
+
+                  <li>
+                    <button class="common-BodyText common-Link">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 13 14"
+                      >
+                        <path
+                          fill="#6772E5"
+                          d="M6.3 6.3l1.4 1.4L11.5 4 7.7.3 6.3 1.7 7.58 3H6.5a5.5 5.5 0 1 0 5.48 5H9.96A3.5 3.5 0 1 1 6.5 5h1.09l-1.3 1.3z"
+                        />
+                      </svg>
+                      Subscriptions
+                    </button>
+                  </li>
+
+                  <li>
+                    <button class="common-BodyText common-Link">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 13 14"
+                      >
+                        <path
+                          fill="#6772E5"
+                          d="M0 6.5c0-.27.22-.5.5-.5h2c.28 0 .5.23.5.5v6a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-6zm5-5c0-.28.22-.5.5-.5h2c.28 0 .5.23.5.5v11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-11zm5 2.01a.5.5 0 0 1 .5-.51h2c.28 0 .5.23.5.51v8.98a.5.5 0 0 1-.5.51h-2a.5.5 0 0 1-.5-.51V3.51z"
+                        />
+                      </svg>
+                      Reporting
+                    </button>
+                  </li>
+                </ul>
+                <a
+                  href="/docs/api"
+                  class="common-BodyText common-Link common-Link--arrow"
+                >
+                  Full API reference
                 </a>
+              </nav>
+              <div id="editor">
+                <div id="prism">
+                  <pre><span class="custom-line-numbers"></span><code class="language-javascript"></code></pre>
+                </div>
+                <div id="runkit"></div>
+                <div id="runkit-warning"><p></p></div>
+              </div>
             </section>
-
-            <section id="developers-first">
-                <div id="programming-languages"></div>
-                <h2 class="common-UppercaseTitle">
-                    <svg class="heading-icon">
-                        <circle fill="#B9F4BC" cx="33" cy="33" r="33"/>
-                        <path d="M38.4 15l1-3h1l1.2 3c.2.2.5.2.7.3l2.2-2.5 1 .4-.2 3.3c.2 0 .3.2.5.4l3-1.5.7.7-1.4 3 .5.5h3.3l.4.8-2.5 2.2c0 .2 0 .5.2.7l3 1v1l-3 1.2-.3.8 2.5 2-.4 1-3.3-.2-.4.7 1.5 2.8-.7.7-3-1.4c0 .2-.4.4-.6.5l.2 3.3-1 .4-2-2.5c-.3 0-.6 0-1 .2l-1 3h-1l-1-3c-.2-.2-.5-.2-.8-.3l-2 2.5-1-.4.2-3.3-.7-.4-2.8 1.5-.7-.7 1.4-3c-.2 0-.4-.4-.5-.6l-3.3.2-.4-1 2.5-2c0-.3 0-.6-.2-1l-3-1v-1l3-1c.2-.2.2-.4.3-.7l-2.5-2.2.4-1 3.3.2c0-.2.2-.3.4-.5l-1.5-3 .7-.7 3 1.4.5-.5v-3.3l.8-.4 2.2 2.5s.5 0 .7-.2z" fill="#6ED69A"/>
-                        <circle fill="#B9F4BC" cx="40" cy="25" r="2"/>
-                        <path d="M21.6 26.8L19 25l-1.3 1 1.4 3c0 .2-.3.4-.5.6l-3-.8-1 1.4 2.4 2.3-.4.8-3.2.3-.3 1.6 3 1.4v.8l-3 1.4.4 1.6 3.2.3c0 .3.2.5.3.8l-2.4 2.3.8 1.4 3-.8.7.6-1.3 3 1.3 1 2.6-1.8c.3 0 .5.3.8.4l-.3 3.2 1.6.6 2-2.7c.2 0 .5 0 .7.2l1 3h1.5l1-3c0-.2.4-.2.7-.3l2 2.7 1.4-.6-.4-3.2c.3 0 .5-.3.8-.4L37 49l1.3-1-1.4-3c0-.2.3-.4.5-.6l3 .8 1-1.4-2.4-2.3.4-.8 3.2-.3.3-1.6-3-1.4v-.8l3-1.4-.4-1.6-3.2-.3c0-.3-.2-.5-.3-.8l2.4-2.3-.8-1.4-3 .8-.7-.6 1.3-3-1.3-1-2.6 1.8c-.3 0-.5-.3-.8-.4l.3-3.2-1.6-.6-2 2.7c-.2 0-.5 0-.7-.2l-1-3h-1.5l-1 3c0 .2-.4.2-.7.3l-2-2.7-1.4.6.4 3.2c-.3 0-.5.3-.8.4z" fill="#1BB978"/>
-                        <circle fill="#B9F4BC" cx="28" cy="37" r="3"/>
-                    </svg>
-                    Developers first
-                </h2>
-                <p class="common-BodyText">
-                    We believe that payments is a problem rooted in code, not finance. We obsessively seek out elegant, composable abstractions that enable robust, scalable, flexible integrations. Because we eliminate needless complexity and extraneous details, you can get up and running with Stripe in just a couple of minutes.
-                </p>
-                <section id="notebook" class="container-lg">
-                    <nav>
-                        <select>
-                            <option value="payments">Payments</option>
-                            <option value="customers">Customers</option>
-                            <option value="subscriptions">Subscriptions</option>
-                            <option value="reporting">Reporting</option>
-                        </select>
-                        <span id="api-method-selection"></span>
-                        <ul>
-                            <li>
-                                <button class="common-BodyText common-Link">
-                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 14"><path fill="#6772E5" fill-rule="evenodd" d="M0 3a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V3zm0 1h13v2H0V4z"/></svg>
-                                    Payments
-                                </button>
-                            <li>
-                                <button class="common-BodyText common-Link">
-                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 14"><path fill="#6772E5" d="M12.5 11.75c0-1.24-2.69-2.25-6-2.25s-6 1-6 2.25c0 .46.37.9 1.01 1.25h9.98c.64-.36 1.01-.79 1.01-1.25zM6.5 8a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/></svg>
-                                    Customers
-                                </button>
-                            <li>
-                                <button class="common-BodyText common-Link">
-                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 14"><path fill="#6772E5" d="M6.3 6.3l1.4 1.4L11.5 4 7.7.3 6.3 1.7 7.58 3H6.5a5.5 5.5 0 1 0 5.48 5H9.96A3.5 3.5 0 1 1 6.5 5h1.09l-1.3 1.3z"/></svg>
-                                    Subscriptions
-                                </button>
-                            <li>
-                                <button class="common-BodyText common-Link">
-                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 14"><path fill="#6772E5" d="M0 6.5c0-.27.22-.5.5-.5h2c.28 0 .5.23.5.5v6a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-6zm5-5c0-.28.22-.5.5-.5h2c.28 0 .5.23.5.5v11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-11zm5 2.01a.5.5 0 0 1 .5-.51h2c.28 0 .5.23.5.51v8.98a.5.5 0 0 1-.5.51h-2a.5.5 0 0 1-.5-.51V3.51z"/></svg>
-                                    Reporting
-                                </button>
-                        </ul>
-                        <a href="/docs/api" class="common-BodyText common-Link common-Link--arrow">
-                            Full API reference
-                        </a>
-                    </nav>
-                    <div id="editor">
-                        <div id="prism">
-                            <pre><span class="custom-line-numbers"></span><code class="language-javascript"></code></pre>
-                        </div>
-                        <div id="runkit"></div>
-                        <div id="runkit-warning"><p></p></div>
-                    </div>
-                </section>
-            </section>
+          </section>
         </section>
 
         <section id="secondary">
-            <div class="cols container-lg">
-                <section id="always-improving">
-                    <h2 class="common-Uppercase">
-                        <svg class="heading-icon">
-                            <circle fill="#B9F4BC" cx="33" cy="33" r="33"/>
-                            <path d="M20 24c0-1.7 1-2.3 2.5-1.3l13 8.6c1.4 1 1.4 2.4 0 3.4l-13 8.6c-1.4 1-2.5.4-2.5-1.3V24" fill="rgb(110, 214, 154)"/>
-                            <path d="M20 24c0-1.7 1-2.3 2.5-1.3l13 8.6c1.4 1 1.4 2.4 0 3.4l-13 8.6c-1.4 1-2.5.4-2.5-1.3V24" transform="translate(12)" fill="rgb(27, 185, 120)"/>
-                        </svg>
-                        Always improving
-                    </h2>
-                    <p class="common-BodyText">
-                        Stripe is an always-improving toolchain that gains new features every month. Our world-class engineering team constantly iterates upon every facet of the Stripe stack. And from Apple Pay to Alipay, building on Stripe means you get early access to the latest technologies.
-                    </p>
-                    <a class="common-BodyText common-Link common-Link--arrow" href="/payments">
-                        Learn about Stripe's products
-                    </a>
-                </section>
-
-                <section id="global-scale">
-                    <h2 class="common-Uppercase">
-                        <svg class="heading-icon">
-                            <circle fill="#B9F4BC" cx="33" cy="33" r="33"/>
-                            <rect fill="none" stroke="#6ED69A" stroke-width="2" x="22" y="22" width="22" height="22" rx="1"/>
-                            <path d="M22.8,34.8 C21.3,33.3 20,33.8 20,36 L20,44 C20,45.1 20.9,46 22,46 L30,46 C32.2,46 32.7,44.7 31.2,43.2 L29,41 L41,29 L43.2,31.2 C44.7,32.7 46,32.2 46,30 L46,22 C46,20.9 45.1,20 44,20 L36,20 C33.8,20 33.3,21.3 34.8,22.8 L37,25 L25,37 L22.8,34.8" stroke="#B9F4BC" stroke-width="2" fill="#1BB978"/>
-                        </svg>
-                        Global scale
-                    </h2>
-                    <p class="common-BodyText">
-                        We help power 100,000+ businesses in 100+ countries and across nearly every industry. Headquartered in San Francisco, Stripe has 9 global offices and hundreds of people working to help transform how modern businesses are built and run.
-                    </p>
-                    <a class="common-BodyText common-Link common-Link--arrow" href="/about">
-                        More about us
-                    </a>
-                </section>
-            </div>
-
-            <section id="customer-logos">
-                <a href="/customers" class="container-lg">
-                    <span class="common-Button common-Button--default">See our customers</span>
-                    <ul>
-                        <li><img class="kickstarter" alt="kickstarter" src="/img/v3/home/customer-logos/kickstarter.svg">
-                        <li><img class="instacart" alt="instacart" src="/img/v3/home/customer-logos/instacart.svg">
-                        <li><img class="pinterest" alt="pinterest" src="/img/v3/home/customer-logos/pinterest.svg">
-                        <li><img class="lyft" alt="lyft" src="/img/v3/home/customer-logos/lyft.svg">
-                        <li><img class="shopify" alt="shopify" src="/img/v3/home/customer-logos/shopify.svg">
-                        <li><img class="opentable" alt="opentable" src="/img/v3/home/customer-logos/opentable.svg">
-                        <li><img class="slack" alt="slack" src="/img/v3/home/customer-logos/slack.svg">
-                    </ul>
-                </a>
+          <div class="cols container-lg">
+            <section id="always-improving">
+              <h2 class="common-Uppercase">
+                <svg class="heading-icon">
+                  <circle fill="#B9F4BC" cx="33" cy="33" r="33" />
+                  <path
+                    d="M20 24c0-1.7 1-2.3 2.5-1.3l13 8.6c1.4 1 1.4 2.4 0 3.4l-13 8.6c-1.4 1-2.5.4-2.5-1.3V24"
+                    fill="rgb(110, 214, 154)"
+                  />
+                  <path
+                    d="M20 24c0-1.7 1-2.3 2.5-1.3l13 8.6c1.4 1 1.4 2.4 0 3.4l-13 8.6c-1.4 1-2.5.4-2.5-1.3V24"
+                    transform="translate(12)"
+                    fill="rgb(27, 185, 120)"
+                  />
+                </svg>
+                Always improving
+              </h2>
+              <p class="common-BodyText">
+                Stripe is an always-improving toolchain that gains new features
+                every month. Our world-class engineering team constantly
+                iterates upon every facet of the Stripe stack. And from Apple
+                Pay to Alipay, building on Stripe means you get early access to
+                the latest technologies.
+              </p>
+              <a
+                class="common-BodyText common-Link common-Link--arrow"
+                href="/payments"
+              >
+                Learn about Stripe's products
+              </a>
             </section>
 
+            <section id="global-scale">
+              <h2 class="common-Uppercase">
+                <svg class="heading-icon">
+                  <circle fill="#B9F4BC" cx="33" cy="33" r="33" />
+                  <rect
+                    fill="none"
+                    stroke="#6ED69A"
+                    stroke-width="2"
+                    x="22"
+                    y="22"
+                    width="22"
+                    height="22"
+                    rx="1"
+                  />
+                  <path
+                    d="M22.8,34.8 C21.3,33.3 20,33.8 20,36 L20,44 C20,45.1 20.9,46 22,46 L30,46 C32.2,46 32.7,44.7 31.2,43.2 L29,41 L41,29 L43.2,31.2 C44.7,32.7 46,32.2 46,30 L46,22 C46,20.9 45.1,20 44,20 L36,20 C33.8,20 33.3,21.3 34.8,22.8 L37,25 L25,37 L22.8,34.8"
+                    stroke="#B9F4BC"
+                    stroke-width="2"
+                    fill="#1BB978"
+                  />
+                </svg>
+                Global scale
+              </h2>
+              <p class="common-BodyText">
+                We help power 100,000+ businesses in 100+ countries and across
+                nearly every industry. Headquartered in San Francisco, Stripe
+                has 9 global offices and hundreds of people working to help
+                transform how modern businesses are built and run.
+              </p>
+              <a
+                class="common-BodyText common-Link common-Link--arrow"
+                href="/about"
+              >
+                More about us
+              </a>
+            </section>
+          </div>
+
+          <section id="customer-logos">
+            <a href="/customers" class="container-lg">
+              <span class="common-Button common-Button--default"
+                >See our customers</span
+              >
+              <ul>
+                <li>
+                  <img
+                    class="kickstarter"
+                    alt="kickstarter"
+                    src="/img/v3/home/customer-logos/kickstarter.svg"
+                  />
+                </li>
+                <li>
+                  <img
+                    class="instacart"
+                    alt="instacart"
+                    src="/img/v3/home/customer-logos/instacart.svg"
+                  />
+                </li>
+                <li>
+                  <img
+                    class="pinterest"
+                    alt="pinterest"
+                    src="/img/v3/home/customer-logos/pinterest.svg"
+                  />
+                </li>
+                <li>
+                  <img
+                    class="lyft"
+                    alt="lyft"
+                    src="/img/v3/home/customer-logos/lyft.svg"
+                  />
+                </li>
+                <li>
+                  <img
+                    class="shopify"
+                    alt="shopify"
+                    src="/img/v3/home/customer-logos/shopify.svg"
+                  />
+                </li>
+                <li>
+                  <img
+                    class="opentable"
+                    alt="opentable"
+                    src="/img/v3/home/customer-logos/opentable.svg"
+                  />
+                </li>
+                <li>
+                  <img
+                    class="slack"
+                    alt="slack"
+                    src="/img/v3/home/customer-logos/slack.svg"
+                  />
+                </li>
+              </ul>
+            </a>
+          </section>
         </section>
-    </main>
-
-
-
-</div>
-
-<footer class='globalFooter withCards'>
+      </main>
+    </div>
 
-    <section class="globalFooterCards">
+    <footer class="globalFooter withCards">
+      <section class="globalFooterCards">
         <div class="container-xl">
+          <a
+            class="common-Link globalFooterCard card-sigma"
+            href="/sigma"
+            data-analytics-action="sigma"
+            data-analytics-source="card_link"
+          >
+            <svg viewbox="0 0 130 130">
+              <circle
+                class="hover-fillLight"
+                cx="65"
+                cy="65"
+                r="55"
+                fill="#beb0f4"
+              />
+              <path
+                d="M51.2 65h32.1c0-2.4-1.8-4.6-4.3-4.9C63.3 58 51.2 44.5 51.2 28.3V16.6c-14.1 4-25.7 13.9-31.8 26.9-.4 1-.4 2.4.2 3.5 6.3 10.7 18.2 18 31.6 18z"
+                fill="#FFF"
+              />
+              <path
+                d="M83.3 65c0 2.4-1.8 4.6-4.3 4.9-15.7 2.1-27.8 15.6-27.8 31.8v11.8c4.4 1.2 9 2 13.8 2 7.3 0 14.4-1.7 20.8-4.4 1.4-.6 2.1-1.8 2.1-3.4V97.1c0-13.8 10.1-25.2 23.4-27.2 2.4-.3 4.1-2.4 4.1-4.9v-.2l-32.1.2z"
+                fill="#FFF"
+              />
+              <path
+                class="hover-fillDark"
+                d="M115.4 64.8c0-2.4-1.8-4.4-4.1-4.9-13.3-1.8-23.4-13.3-23.4-27V15.1c-7-3.2-14.7-5-22.9-5-4.7 0-9.3.6-13.8 1.7v16.6C51.2 44.6 63.3 58 79 60.2c2.4.3 4.3 2.4 4.3 4.9l32.1-.3c0 .2 0 .2 0 0z"
+                fill="#7356b6"
+              />
+              <path
+                class="hover-fillDark"
+                d="M18.7 84.9c-.9 1.8-1.7 3.7-2.3 5.7 7 13.6 19.7 23.8 34.8 27.8v-16.6C51.2 85.6 63.3 72.2 79 70c2.4-.3 4.3-2.4 4.3-4.9H51.2c-14.2-.1-26.4 8-32.5 19.8z"
+                fill="#7356b6"
+              />
+            </svg>
+            <h2 class="common-Uppercase common-Link--arrow">
+              Introducing Sigma
+            </h2>
+            <p class="common-BodyText">
+              Use SQL to explore your business’ payments and revenue data, build
+              and run custom reports, get insights, and more.
+            </p>
+          </a>
+
+          <a
+            class="common-Link globalFooterCard card-documentation"
+            href="/docs"
+            data-analytics-action="documentation"
+            data-analytics-source="card_link"
+          >
+            <svg viewbox="0 0 130 130">
+              <path
+                class="hover-fillDark"
+                fill="#9251AC"
+                d="M113 112H61.36c-2.224 0-4.466-1.574-5.27-3.277C54.005 104.313 46.457 102 37 102H5a5 5 0 0 1-5-5V25a5 5 0 0 1 5-5h33c11.045 0 20 4.477 20 10v37h60v40a5 5 0 0 1-5 5z"
+              />
+              <path
+                class="hover-fillLight"
+                fill="#F6A4EB"
+                d="M121.993 93c0 6-12.363 10.997-27.384 10.997h-3.464v.01h-23.61c-1.823 0-5.27.637-6.82 1.627-.59.377-1.285.544-1.893.195a1.632 1.632 0 0 1-.817-1.416l.003-74.91c0-4.14 4.815-7.5 10.755-7.5h10.51c.075-.002.148-.008.224-.008h13.17c8.922 0 20.682-2.238 25.62-5.573 1.587-1.072 3.702-.09 3.702 1.82 0 0 .007 67.756 0 74.756z"
+              />
+              <path
+                stroke="#FFF"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                fill="none"
+                d="M80.5 86.5h26m-26-10h26m-26-17h26m-26-10h26m-26-10h26"
+              />
+              <path
+                stroke="#FFF"
+                stroke-width="2.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                fill="none"
+                d="M68.992 78.007l3.516 3.494-3.516 3.496m0-43.99l3.516 3.495-3.516 3.496"
+              />
+            </svg>
+            <h2 class="common-Uppercase common-Link--arrow">
+              Explore the docs
+            </h2>
+            <p class="common-BodyText">
+              Start building your integration and accept your first payment in
+              minutes. Stripe libraries are available in every language from
+              Ruby to Go.
+            </p>
+          </a>
+        </div>
+      </section>
+
+      <article class="globalFooterCTA">
+        <div class="container-lg">
+          <div class="content">
+            <h1 class="title">
+              <span class="subtitle">Ready to get started?</span>
+              Get in touch, or create an account.
+            </h1>
+          </div>
+
+          <div class="common-ButtonGroup buttons">
             <a
-                    class="common-Link globalFooterCard card-sigma"
-                    href="/sigma"
-                    data-analytics-action="sigma"
-                    data-analytics-source="card_link"
+              class="common-Button common-Button--default"
+              href="https://dashboard.stripe.com/register"
+              data-analytics-action="sign_up"
+              data-analytics-source="footer_cta"
             >
-                <svg viewbox="0 0 130 130">
-                    <circle class="hover-fillLight" cx="65" cy="65" r="55" fill="#beb0f4"/>
-                    <path d="M51.2 65h32.1c0-2.4-1.8-4.6-4.3-4.9C63.3 58 51.2 44.5 51.2 28.3V16.6c-14.1 4-25.7 13.9-31.8 26.9-.4 1-.4 2.4.2 3.5 6.3 10.7 18.2 18 31.6 18z" fill="#FFF"/>
-                    <path d="M83.3 65c0 2.4-1.8 4.6-4.3 4.9-15.7 2.1-27.8 15.6-27.8 31.8v11.8c4.4 1.2 9 2 13.8 2 7.3 0 14.4-1.7 20.8-4.4 1.4-.6 2.1-1.8 2.1-3.4V97.1c0-13.8 10.1-25.2 23.4-27.2 2.4-.3 4.1-2.4 4.1-4.9v-.2l-32.1.2z" fill="#FFF"/>
-                    <path class="hover-fillDark" d="M115.4 64.8c0-2.4-1.8-4.4-4.1-4.9-13.3-1.8-23.4-13.3-23.4-27V15.1c-7-3.2-14.7-5-22.9-5-4.7 0-9.3.6-13.8 1.7v16.6C51.2 44.6 63.3 58 79 60.2c2.4.3 4.3 2.4 4.3 4.9l32.1-.3c0 .2 0 .2 0 0z" fill="#7356b6"/>
-                    <path class="hover-fillDark" d="M18.7 84.9c-.9 1.8-1.7 3.7-2.3 5.7 7 13.6 19.7 23.8 34.8 27.8v-16.6C51.2 85.6 63.3 72.2 79 70c2.4-.3 4.3-2.4 4.3-4.9H51.2c-14.2-.1-26.4 8-32.5 19.8z" fill="#7356b6"/>
-                </svg>
-                <h2 class="common-Uppercase common-Link--arrow">Introducing Sigma</h2>
-                <p class="common-BodyText">Use SQL to explore your business’ payments and revenue data, build and run custom reports, get insights, and more.</p>
+              Create Stripe account
             </a>
 
             <a
-                    class="common-Link globalFooterCard card-documentation"
-                    href="/docs"
-                    data-analytics-action="documentation"
-                    data-analytics-source="card_link"
+              href="/contact/sales"
+              class="common-Button"
+              data-analytics-action="contact_sales"
+              data-analytics-source="footer_cta"
             >
-                <svg viewbox="0 0 130 130">
-                    <path class="hover-fillDark" fill="#9251AC" d="M113 112H61.36c-2.224 0-4.466-1.574-5.27-3.277C54.005 104.313 46.457 102 37 102H5a5 5 0 0 1-5-5V25a5 5 0 0 1 5-5h33c11.045 0 20 4.477 20 10v37h60v40a5 5 0 0 1-5 5z"/>
-                    <path class="hover-fillLight" fill="#F6A4EB" d="M121.993 93c0 6-12.363 10.997-27.384 10.997h-3.464v.01h-23.61c-1.823 0-5.27.637-6.82 1.627-.59.377-1.285.544-1.893.195a1.632 1.632 0 0 1-.817-1.416l.003-74.91c0-4.14 4.815-7.5 10.755-7.5h10.51c.075-.002.148-.008.224-.008h13.17c8.922 0 20.682-2.238 25.62-5.573 1.587-1.072 3.702-.09 3.702 1.82 0 0 .007 67.756 0 74.756z"/>
-                    <path stroke="#FFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M80.5 86.5h26m-26-10h26m-26-17h26m-26-10h26m-26-10h26"/>
-                    <path stroke="#FFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M68.992 78.007l3.516 3.494-3.516 3.496m0-43.99l3.516 3.495-3.516 3.496"/>
-                </svg>
-                <h2 class="common-Uppercase common-Link--arrow">Explore the docs</h2>
-                <p class="common-BodyText">Start building your integration and accept your first payment in minutes. Stripe libraries are available in every language from Ruby to Go.</p>
+              Contact Sales
             </a>
-
-
+          </div>
         </div>
-    </section>
+      </article>
+
+      <script>
+        var runkitSources = {
+          payments:
+            "// Require the Stripe library with a test secret key.\nconst stripe = require('stripe')('sk_test_BQokikJOvBiI2HlWgH4olfQ2');\n\n// Create a payment from a test card token.\nconst charge = await stripe.charges.create({\n  amount: 2000,\n  currency: 'usd',\n  source: 'tok_visa',\n  description: 'My first payment'\n});",
+          customers:
+            "// Require the Stripe library with a test secret key.\nconst stripe = require('stripe')('sk_test_BQokikJOvBiI2HlWgH4olfQ2');\n\n// Save customer details and payment information.\nconst customer = await stripe.customers.create({\n  source: token, // Token retrieved from Elements, Checkout, or native SDKs.\n  email: 'john@example.com'\n});\n\n// Charge or refund customers anytime using their saved payment details.\nlet charge = await stripe.charges.create({\n  amount: 7999,\n  currency: 'usd',\n  customer: customer.id\n});\n\ncharge = await stripe.charges.refund(charge.id, {\n  amount: 1000\n});",
+          subscriptions:
+            "// Require the Stripe library with a test secret key.\nconst stripe = require('stripe')('sk_test_BQokikJOvBiI2HlWgH4olfQ2');\n\n// Create a monthly plan.\nconst plan = await stripe.plans.create({\n  amount: 999,\n  currency: 'usd',\n  interval: 'month',\n  product: {\n    name: 'Emerald Team'\n  }\n});\n\n// Subscribe the customer to the plan while applying a coupon.\nconst subscription = await stripe.subscriptions.create({\n  customer: customer.id,\n  plan: plan.id,\n  coupon: '25OFF'\n});",
+          reporting:
+            "// Require the Stripe library with a test secret key.\nconst stripe = require('stripe')('sk_test_BQokikJOvBiI2HlWgH4olfQ2');\nconst moment = require('moment');\n\n// Fetch the latest transactions from the Stripe account.\nconst transactions = (await stripe.balance.listTransactions({limit: 75})).data;\n\n// Check what was the most recent transaction.\nconst latestTime = moment(transactions[0].created * 1000).fromNow();\nconsole.log(`Latest transaction: ${transactions[0].type}, ${latestTime}`);\n\n// Plot the evolution of the Stripe balance in USD over the latest transactions.\nlet balance = 0;\nplot(transactions.map(txn =\u003E balance += txn.amount / 100));",
+        }
+        var runkitPreambles = {
+          customers: "const token = 'tok_visa';\n",
+          subscriptions:
+            "const customer = await require('stripe')('sk_test_BQokikJOvBiI2HlWgH4olfQ2').customers.create({\n  source: 'tok_visa',\n  description: 'John Doe',\n  email: 'john@example.com'\n});\n",
+          reporting:
+            'const plot = require("@runkit/me1000/stripe-graph/releases/1.0.0")("balances");\n',
+        }
+        var runkitEpilogues = {
+          payments:
+            '\n\n// Click “▶ run” to try this code live and create your first payment.',
+        }
+        var runkitEnabled = true
+      </script>
+
+      <article class="globalFooterNav">
+        <div class="container-lg">
+          <ul class="metaNav">
+            <li class="select country">
+              <a class="rootLink item-country"
+                ><svg width="13" height="13">
+                  <path
+                    d="M1.543,7L6,7,5.979,11.462a0.536,0.536,0,0,0,1.016.24l4.941-9.931a0.537,0.537,0,0,0-.72-0.721L1.3,5.985A0.537,0.537,0,0,0,1.543,7Z"
+                  />
+                </svg>
+                United States</a
+              >
+
+              <div class="popup countryPicker">
+                <div class="countryList">
+                  <h4>
+                    <a href="https://dashboard.stripe.com/login"
+                      >Sign up instantly</a
+                    >
+                  </h4>
+                  <div class="columns">
+                    <ul class="optionList">
+                      <li>
+                        <a
+                          class="common-FlagIcon common-FlagIcon--au"
+                          href="/country?country=AU&redirect=/"
+                          ><span>Australia</span>
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          class="common-FlagIcon common-FlagIcon--at"
+                          href="/country?country=AT&redirect=/"
+                          ><span>Austria</span>
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          class="common-FlagIcon common-FlagIcon--be"
+                          href="/country?country=BE&redirect=/"
+                          ><span>Belgium</span>
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          class="common-FlagIcon common-FlagIcon--ca"
+                          href="/country?country=CA&redirect=/"
+                          ><span>Canada</span>
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          class="common-FlagIcon common-FlagIcon--dk"
+                          href="/country?country=DK&redirect=/"
+                          ><span>Denmark</span>
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          class="common-FlagIcon common-FlagIcon--fi"
+                          href="/country?country=FI&redirect=/"
+                          ><span>Finland</span>
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          class="common-FlagIcon common-FlagIcon--fr"
+                          href="/country?country=FR&redirect=/"
+                          ><span>France</span>
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          class="common-FlagIcon common-FlagIcon--de"
+                          href="/country?country=DE&redirect=/"
+                          ><span>Germany</span>
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          class="common-FlagIcon common-FlagIcon--hk"
+                          href="/country?country=HK&redirect=/"
+                          ><span>Hong Kong</span>
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          class="common-FlagIcon common-FlagIcon--ie"
+                          href="/country?country=IE&redirect=/"
+                          ><span>Ireland</span>
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          class="common-FlagIcon common-FlagIcon--it"
+                          href="/country?country=IT&redirect=/"
+                          ><span>Italy</span><em class="badge">Preview</em>
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          class="common-FlagIcon common-FlagIcon--jp"
+                          href="/country?country=JP&redirect=/"
+                          ><span>Japan</span>
+                        </a>
+                      </li>
+                    </ul>
+                    <ul class="optionList">
+                      <li>
+                        <a
+                          class="common-FlagIcon common-FlagIcon--lu"
+                          href="/country?country=LU&redirect=/"
+                          ><span>Luxembourg</span>
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          class="common-FlagIcon common-FlagIcon--nl"
+                          href="/country?country=NL&redirect=/"
+                          ><span>Netherlands</span>
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          class="common-FlagIcon common-FlagIcon--nz"
+                          href="/country?country=NZ&redirect=/"
+                          ><span>New Zealand</span>
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          class="common-FlagIcon common-FlagIcon--no"
+                          href="/country?country=NO&redirect=/"
+                          ><span>Norway</span>
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          class="common-FlagIcon common-FlagIcon--pt"
+                          href="/country?country=PT&redirect=/"
+                          ><span>Portugal</span><em class="badge">Preview</em>
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          class="common-FlagIcon common-FlagIcon--sg"
+                          href="/country?country=SG&redirect=/"
+                          ><span>Singapore</span>
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          class="common-FlagIcon common-FlagIcon--es"
+                          href="/country?country=ES&redirect=/"
+                          ><span>Spain</span>
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          class="common-FlagIcon common-FlagIcon--se"
+                          href="/country?country=SE&redirect=/"
+                          ><span>Sweden</span>
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          class="common-FlagIcon common-FlagIcon--ch"
+                          href="/country?country=CH&redirect=/"
+                          ><span>Switzerland</span>
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          class="common-FlagIcon common-FlagIcon--gb"
+                          href="/country?country=GB&redirect=/"
+                          ><span>United Kingdom</span>
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          class="common-FlagIcon common-FlagIcon--us selected"
+                          href="/country?country=US&redirect=/"
+                          ><span>United States</span>
+                        </a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+                <div class="sidebar">
+                  <div class="countryList">
+                    <h4>
+                      <a href="https://stripe.com/global">Request an invite</a>
+                    </h4>
+                    <ul class="optionList">
+                      <li>
+                        <a
+                          class="common-FlagIcon common-FlagIcon--br"
+                          href="https://stripe.com/global#BR"
+                          ><span>Brazil</span><em class="badge">Preview</em>
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          class="common-FlagIcon common-FlagIcon--mx"
+                          href="https://stripe.com/global#MX"
+                          ><span>Mexico</span><em class="badge">Preview</em>
+                        </a>
+                      </li>
+                    </ul>
+                  </div>
+                  <a class="globalLink" href="https://stripe.com/global">
+                    <span>More countries coming soon.</span>
+                    <strong>Sign up to get notified</strong>
+                  </a>
+                </div>
+              </div>
+            </li>
 
-    <article class='globalFooterCTA'>
-        <div class='container-lg'>
+            <li class="select language">
+              <a class="rootLink item-language"
+                ><svg width="13" height="13">
+                  <path
+                    d="M8.079,9.837L6.116,12.3A0.654,0.654,0,0,1,5,11.841V9.852C2.488,9.351,1,7.6,1,5.5,1,3.015,3.087,1,6.5,1S12,3.015,12,5.5A4.5,4.5,0,0,1,8.079,9.837Z"
+                  />
+                </svg>
+                English</a
+              >
+
+              <div class="popup languagePicker">
+                <ul class="optionList">
+                  <li>
+                    <a href="/locale?locale=de&redirect=/"
+                      ><span>Deutsch</span>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="/locale?locale=en&redirect=/" class="selected"
+                      ><span>English</span>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="/locale?locale=es&redirect=/"
+                      ><span>Español</span>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="/locale?locale=fr&redirect=/"
+                      ><span>Français</span>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="/locale?locale=it&redirect=/"
+                      ><span>Italiano</span>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="/locale?locale=ja&redirect=/"
+                      ><span>日本語</span>
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </li>
 
-            <div class='content'>
-                <h1 class='title'>
-                    <span class='subtitle'>Ready to get started?</span>
-                    Get in touch, or create an account.
-                </h1>
+            <li class="space"></li>
+
+            <li class="copyright">&copy; Stripe</li>
+          </ul>
+
+          <div class="siteNav">
+            <div class="column">
+              <h4>Products</h4>
+              <div class="splitColumn">
+                <ul>
+                  <li>
+                    <a href="https://stripe.com/payments"
+                      ><strong>Payments</strong></a
+                    >
+                  </li>
+                  <li>
+                    <a href="https://stripe.com/subscriptions"
+                      ><strong>Subscriptions</strong></a
+                    >
+                  </li>
+                  <li>
+                    <a href="https://stripe.com/connect"
+                      ><strong>Connect</strong></a
+                    >
+                  </li>
+                  <li>
+                    <a href="https://stripe.com/sigma"
+                      ><strong>Sigma</strong></a
+                    >
+                  </li>
+                  <li>
+                    <a href="https://stripe.com/atlas"
+                      ><strong>Atlas</strong></a
+                    >
+                  </li>
+                  <li>
+                    <a href="https://stripe.com/radar"
+                      ><strong>Radar</strong></a
+                    >
+                  </li>
+                </ul>
+                <ul>
+                  <li><a href="https://stripe.com/pricing">Pricing</a></li>
+                  <li class="long-link">
+                    <a href="https://stripe.com/works-with"
+                      >Works with Stripe</a
+                    >
+                  </li>
+                  <li><a href="https://stripe.com/global">Global</a></li>
+                  <li><a href="https://stripe.com/guides">Guides</a></li>
+                </ul>
+              </div>
             </div>
-
-            <div class='common-ButtonGroup buttons'>
-
-                <a
-                        class='common-Button common-Button--default'
-                        href="https://dashboard.stripe.com/register"
-                        data-analytics-action="sign_up"
-                        data-analytics-source="footer_cta"
-                >
-                    Create Stripe account
-                </a>
-
-                <a
-                        href='/contact/sales'
-                        class='common-Button'
-                        data-analytics-action="contact_sales"
-                        data-analytics-source="footer_cta"
-                >
-                    Contact Sales
-
-                </a>
+            <div class="column">
+              <h4>Developers</h4>
+              <ul>
+                <li><a href="https://stripe.com/docs">Documentation</a></li>
+                <li><a href="https://stripe.com/docs/api">API reference</a></li>
+                <li><a href="https://status.stripe.com">API status</a></li>
+                <li>
+                  <a href="https://stripe.com/open-source">Open source</a>
+                </li>
+              </ul>
             </div>
-
-        </div>
-    </article>
-
-
-    <script>
-      var runkitSources = {"payments":"// Require the Stripe library with a test secret key.\nconst stripe = require('stripe')('sk_test_BQokikJOvBiI2HlWgH4olfQ2');\n\n// Create a payment from a test card token.\nconst charge = await stripe.charges.create({\n  amount: 2000,\n  currency: 'usd',\n  source: 'tok_visa',\n  description: 'My first payment'\n});","customers":"// Require the Stripe library with a test secret key.\nconst stripe = require('stripe')('sk_test_BQokikJOvBiI2HlWgH4olfQ2');\n\n// Save customer details and payment information.\nconst customer = await stripe.customers.create({\n  source: token, // Token retrieved from Elements, Checkout, or native SDKs.\n  email: 'john@example.com'\n});\n\n// Charge or refund customers anytime using their saved payment details.\nlet charge = await stripe.charges.create({\n  amount: 7999,\n  currency: 'usd',\n  customer: customer.id\n});\n\ncharge = await stripe.charges.refund(charge.id, {\n  amount: 1000\n});","subscriptions":"// Require the Stripe library with a test secret key.\nconst stripe = require('stripe')('sk_test_BQokikJOvBiI2HlWgH4olfQ2');\n\n// Create a monthly plan.\nconst plan = await stripe.plans.create({\n  amount: 999,\n  currency: 'usd',\n  interval: 'month',\n  product: {\n    name: 'Emerald Team'\n  }\n});\n\n// Subscribe the customer to the plan while applying a coupon.\nconst subscription = await stripe.subscriptions.create({\n  customer: customer.id,\n  plan: plan.id,\n  coupon: '25OFF'\n});","reporting":"// Require the Stripe library with a test secret key.\nconst stripe = require('stripe')('sk_test_BQokikJOvBiI2HlWgH4olfQ2');\nconst moment = require('moment');\n\n// Fetch the latest transactions from the Stripe account.\nconst transactions = (await stripe.balance.listTransactions({limit: 75})).data;\n\n// Check what was the most recent transaction.\nconst latestTime = moment(transactions[0].created * 1000).fromNow();\nconsole.log(`Latest transaction: ${transactions[0].type}, ${latestTime}`);\n\n// Plot the evolution of the Stripe balance in USD over the latest transactions.\nlet balance = 0;\nplot(transactions.map(txn =\u003E balance += txn.amount / 100));"};
-      var runkitPreambles = {"customers":"const token = 'tok_visa';\n","subscriptions":"const customer = await require('stripe')('sk_test_BQokikJOvBiI2HlWgH4olfQ2').customers.create({\n  source: 'tok_visa',\n  description: 'John Doe',\n  email: 'john@example.com'\n});\n","reporting":"const plot = require(\"@runkit/me1000/stripe-graph/releases/1.0.0\")(\"balances\");\n"};
-      var runkitEpilogues = {"payments":"\n\n// Click “▶ run” to try this code live and create your first payment."};
-      var runkitEnabled = true;
-    </script>
-
-
-
-    <article class='globalFooterNav'>
-        <div class='container-lg'>
-
-            <ul class="metaNav">
-
-                <li class="select country">
-                    <a class="rootLink item-country"><svg width="13" height="13"><path d="M1.543,7L6,7,5.979,11.462a0.536,0.536,0,0,0,1.016.24l4.941-9.931a0.537,0.537,0,0,0-.72-0.721L1.3,5.985A0.537,0.537,0,0,0,1.543,7Z"/></svg>
-                        United States</a>
-
-                    <div class="popup countryPicker">
-                        <div class="countryList">
-                            <h4><a href="https://dashboard.stripe.com/login">Sign up instantly</a></h4>
-                            <div class="columns">
-                                <ul class='optionList'>
-                                    <li>
-                                        <a class="common-FlagIcon common-FlagIcon--au"
-                                           href="/country?country=AU&redirect=/"
-
-                                        ><span>Australia</span
-                                        >
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="common-FlagIcon common-FlagIcon--at"
-                                           href="/country?country=AT&redirect=/"
-
-                                        ><span>Austria</span
-                                        >
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="common-FlagIcon common-FlagIcon--be"
-                                           href="/country?country=BE&redirect=/"
-
-                                        ><span>Belgium</span
-                                        >
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="common-FlagIcon common-FlagIcon--ca"
-                                           href="/country?country=CA&redirect=/"
-
-                                        ><span>Canada</span
-                                        >
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="common-FlagIcon common-FlagIcon--dk"
-                                           href="/country?country=DK&redirect=/"
-
-                                        ><span>Denmark</span
-                                        >
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="common-FlagIcon common-FlagIcon--fi"
-                                           href="/country?country=FI&redirect=/"
-
-                                        ><span>Finland</span
-                                        >
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="common-FlagIcon common-FlagIcon--fr"
-                                           href="/country?country=FR&redirect=/"
-
-                                        ><span>France</span
-                                        >
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="common-FlagIcon common-FlagIcon--de"
-                                           href="/country?country=DE&redirect=/"
-
-                                        ><span>Germany</span
-                                        >
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="common-FlagIcon common-FlagIcon--hk"
-                                           href="/country?country=HK&redirect=/"
-
-                                        ><span>Hong Kong</span
-                                        >
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="common-FlagIcon common-FlagIcon--ie"
-                                           href="/country?country=IE&redirect=/"
-
-                                        ><span>Ireland</span
-                                        >
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="common-FlagIcon common-FlagIcon--it"
-                                           href="/country?country=IT&redirect=/"
-
-                                        ><span>Italy</span
-                                        ><em class="badge">Preview</em>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="common-FlagIcon common-FlagIcon--jp"
-                                           href="/country?country=JP&redirect=/"
-
-                                        ><span>Japan</span
-                                        >
-                                        </a>
-                                    </li>
-                                </ul>
-                                <ul class='optionList'>
-                                    <li>
-                                        <a class="common-FlagIcon common-FlagIcon--lu"
-                                           href="/country?country=LU&redirect=/"
-
-                                        ><span>Luxembourg</span
-                                        >
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="common-FlagIcon common-FlagIcon--nl"
-                                           href="/country?country=NL&redirect=/"
-
-                                        ><span>Netherlands</span
-                                        >
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="common-FlagIcon common-FlagIcon--nz"
-                                           href="/country?country=NZ&redirect=/"
-
-                                        ><span>New Zealand</span
-                                        >
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="common-FlagIcon common-FlagIcon--no"
-                                           href="/country?country=NO&redirect=/"
-
-                                        ><span>Norway</span
-                                        >
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="common-FlagIcon common-FlagIcon--pt"
-                                           href="/country?country=PT&redirect=/"
-
-                                        ><span>Portugal</span
-                                        ><em class="badge">Preview</em>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="common-FlagIcon common-FlagIcon--sg"
-                                           href="/country?country=SG&redirect=/"
-
-                                        ><span>Singapore</span
-                                        >
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="common-FlagIcon common-FlagIcon--es"
-                                           href="/country?country=ES&redirect=/"
-
-                                        ><span>Spain</span
-                                        >
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="common-FlagIcon common-FlagIcon--se"
-                                           href="/country?country=SE&redirect=/"
-
-                                        ><span>Sweden</span
-                                        >
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="common-FlagIcon common-FlagIcon--ch"
-                                           href="/country?country=CH&redirect=/"
-
-                                        ><span>Switzerland</span
-                                        >
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="common-FlagIcon common-FlagIcon--gb"
-                                           href="/country?country=GB&redirect=/"
-
-                                        ><span>United Kingdom</span
-                                        >
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="common-FlagIcon common-FlagIcon--us selected"
-                                           href="/country?country=US&redirect=/"
-
-                                        ><span>United States</span
-                                        >
-                                        </a>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                        <div class="sidebar">
-                            <div class="countryList">
-                                <h4><a href="https://stripe.com/global">Request an invite</a></h4>
-                                <ul class='optionList'>
-                                    <li>
-                                        <a class="common-FlagIcon common-FlagIcon--br"
-                                           href="https://stripe.com/global#BR"
-
-                                        ><span>Brazil</span
-                                        ><em class="badge">Preview</em>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="common-FlagIcon common-FlagIcon--mx"
-                                           href="https://stripe.com/global#MX"
-
-                                        ><span>Mexico</span
-                                        ><em class="badge">Preview</em>
-                                        </a>
-                                    </li>
-                                </ul>
-                            </div>
-                            <a class="globalLink" href='https://stripe.com/global'>
-                                <span>More countries coming soon.</span>
-                                <strong>Sign up to get notified</strong>
-                            </a>
-                        </div>
-                    </div>
-
+            <div class="column">
+              <h4>Company</h4>
+              <ul>
+                <li><a href="https://stripe.com/about">About</a></li>
+                <li><a href="https://stripe.com/customers">Customers</a></li>
+                <li><a href="https://stripe.com/jobs">Jobs</a></li>
+                <li><a href="https://stripe.com/blog">Blog</a></li>
+                <li><a href="https://stripe.com/press">Press</a></li>
+                <li>
+                  <a href="https://stripe.com/environment">Environment</a>
                 </li>
-
-                <li class="select language">
-                    <a class="rootLink item-language"><svg width="13" height="13"><path d="M8.079,9.837L6.116,12.3A0.654,0.654,0,0,1,5,11.841V9.852C2.488,9.351,1,7.6,1,5.5,1,3.015,3.087,1,6.5,1S12,3.015,12,5.5A4.5,4.5,0,0,1,8.079,9.837Z"/></svg>
-                        English</a>
-
-                    <div class="popup languagePicker">
-                        <ul class='optionList'>
-                            <li>
-                                <a href="/locale?locale=de&redirect=/"
-
-
-                                ><span>Deutsch</span
-                                >
-                                </a>
-                            </li>
-                            <li>
-                                <a href="/locale?locale=en&redirect=/"
-                                   class="selected"
-
-                                ><span>English</span
-                                >
-                                </a>
-                            </li>
-                            <li>
-                                <a href="/locale?locale=es&redirect=/"
-
-
-                                ><span>Español</span
-                                >
-                                </a>
-                            </li>
-                            <li>
-                                <a href="/locale?locale=fr&redirect=/"
-
-
-                                ><span>Français</span
-                                >
-                                </a>
-                            </li>
-                            <li>
-                                <a href="/locale?locale=it&redirect=/"
-
-
-                                ><span>Italiano</span
-                                >
-                                </a>
-                            </li>
-                            <li>
-                                <a href="/locale?locale=ja&redirect=/"
-
-
-                                ><span>日本語</span
-                                >
-                                </a>
-                            </li>
-                        </ul>
-                    </div>
-
+              </ul>
+            </div>
+            <div class="column">
+              <h4>Resources</h4>
+              <ul>
+                <li>
+                  <a href="https://support.stripe.com">Support</a>
                 </li>
-
-                <li class="space"></li>
-
-                <li class="copyright">&copy; Stripe</li>
-            </ul>
-
-            <div class="siteNav">
-                <div class="column">
-                    <h4>Products</h4>
-                    <div class="splitColumn">
-                        <ul>
-                            <li><a href="https://stripe.com/payments"><strong>Payments</strong></a></li>
-                            <li><a href="https://stripe.com/subscriptions"><strong>Subscriptions</strong></a></li>
-                            <li><a href="https://stripe.com/connect"><strong>Connect</strong></a></li>
-                            <li><a href="https://stripe.com/sigma"><strong>Sigma</strong></a></li>
-                            <li><a href="https://stripe.com/atlas"><strong>Atlas</strong></a></li>
-                            <li><a href="https://stripe.com/radar"><strong>Radar</strong></a></li>
-                        </ul>
-                        <ul>
-                            <li><a href="https://stripe.com/pricing">Pricing</a></li>
-                            <li class='long-link'><a href="https://stripe.com/works-with">Works with Stripe</a></li>
-                            <li><a href="https://stripe.com/global">Global</a></li>
-                            <li><a href="https://stripe.com/guides">Guides</a></li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="column">
-                    <h4>Developers</h4>
-                    <ul>
-                        <li><a href="https://stripe.com/docs">Documentation</a></li>
-                        <li><a href="https://stripe.com/docs/api">API reference</a></li>
-                        <li><a href="https://status.stripe.com">API status</a></li>
-                        <li><a href="https://stripe.com/open-source">Open source</a></li>
-                    </ul>
-                </div>
-                <div class="column">
-                    <h4>Company</h4>
-                    <ul>
-                        <li><a href="https://stripe.com/about">About</a></li>
-                        <li><a href="https://stripe.com/customers">Customers</a></li>
-                        <li><a href="https://stripe.com/jobs">Jobs</a></li>
-                        <li><a href="https://stripe.com/blog">Blog</a></li>
-                        <li><a href="https://stripe.com/press">Press</a></li>
-                        <li><a href="https://stripe.com/environment">Environment</a></li>
-                    </ul>
-                </div>
-                <div class="column">
-                    <h4>Resources</h4>
-                    <ul>
-                        <li>
-                            <a href="https://support.stripe.com">Support</a>
-                        </li>
-                        <li><a href="https://stripe.com/contact">Contact</a></li>
-                        <li><a href="https://stripe.com/privacy">Privacy &amp; terms</a></li>
-                    </ul>
-                </div>
+                <li><a href="https://stripe.com/contact">Contact</a></li>
+                <li>
+                  <a href="https://stripe.com/privacy">Privacy &amp; terms</a>
+                </li>
+              </ul>
             </div>
-
+          </div>
         </div>
-    </article>
-
-
-</footer>
-
-
-
-
-
-
-
-<script type="application/json" id="site-analytics-config">{"generalAnalyticsConfig":{"ga":{},"trackpage":true,"flags":{"site.experiments.home_page_cta":true,"site.experiments.nav_login_cta":false,"site.experiments.get_started_copy":false,"site.experiments.request_demo_copy":false,"site.experiments.contact_sales_content":true},"locale":"en"},"siteSpecificAnalyticsConfig":{"trackPageViewed":true}}</script>
-
-<noscript><img alt="" height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=742650679237989&ev=PageView&noscript=1" /></noscript>
-
-<!-- Google Tag Manager (noscript) -->
-<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K8JKCBR"
-                  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
-<!-- End Google Tag Manager (noscript) -->
-
-
-<script defer src="https://js.stripe.com/internal/v2/analytics.min.js"></script>
-<script defer src="https://js.stripe.com/v2/stripe-m-preview.js"></script>
+      </article>
+    </footer>
+
+    <script type="application/json" id="site-analytics-config">
+      {
+        "generalAnalyticsConfig": {
+          "ga": {},
+          "trackpage": true,
+          "flags": {
+            "site.experiments.home_page_cta": true,
+            "site.experiments.nav_login_cta": false,
+            "site.experiments.get_started_copy": false,
+            "site.experiments.request_demo_copy": false,
+            "site.experiments.contact_sales_content": true
+          },
+          "locale": "en"
+        },
+        "siteSpecificAnalyticsConfig": { "trackPageViewed": true }
+      }
+    </script>
 
-<div class="cookie-notification-container " rel="cookie-notification">
-    <div class="cookie-notification">
-      <span class="cookie-notification-copy">
-        By using this website you agree to our <a class="common-Link" href="/cookies-policy/legal">cookie&nbsp;policy</a>
-      </span>
-        <button class="dismiss-button" rel="dismiss-cookie-notification">Close</button>
+    <noscript
+      ><img
+        alt=""
+        height="1"
+        width="1"
+        style="display: none"
+        src="https://www.facebook.com/tr?id=742650679237989&ev=PageView&noscript=1"
+    /></noscript>
+
+    <!-- Google Tag Manager (noscript) -->
+    <noscript
+      ><iframe
+        src="https://www.googletagmanager.com/ns.html?id=GTM-K8JKCBR"
+        height="0"
+        width="0"
+        style="display: none; visibility: hidden"
+      ></iframe
+    ></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+
+    <script
+      defer
+      src="https://js.stripe.com/internal/v2/analytics.min.js"
+    ></script>
+    <script defer src="https://js.stripe.com/v2/stripe-m-preview.js"></script>
+
+    <div class="cookie-notification-container" rel="cookie-notification">
+      <div class="cookie-notification">
+        <span class="cookie-notification-copy">
+          By using this website you agree to our
+          <a class="common-Link" href="/cookies-policy/legal"
+            >cookie&nbsp;policy</a
+          >
+        </span>
+        <button class="dismiss-button" rel="dismiss-cookie-notification">
+          Close
+        </button>
+      </div>
     </div>
-</div>
-
-
-<link type="text/css" rel="stylesheet" href="//fast.fonts.net/t/1.css?apiType=css&amp;projectid=4414faae-0f1e-48be-9319-851fc710f613">
-
-</body>
 
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="//fast.fonts.net/t/1.css?apiType=css&amp;projectid=4414faae-0f1e-48be-9319-851fc710f613"
+    />
+  </body>
 </html>
diff --git a/tests/pages/tailwindcss.html b/tests/pages/tailwindcss.html
index 0355e4b..3c06da8 100644
--- a/tests/pages/tailwindcss.html
+++ b/tests/pages/tailwindcss.html
@@ -1,1085 +1,2106 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" class="h-full bg-(color:--html-bg-color,var(--color-white))">
-<head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <link rel="icon" href="/favicon.ico">
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/>
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/>
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
 
-    <link rel="preconnect" href="https://rsms.me/">
-    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
+    <link rel="preconnect" href="https://rsms.me/" />
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
 
-    <script src="https://cdn.usefathom.com/script.js" data-site="SOXJJCZQ" data-auto="false" defer></script>
+    <script
+      src="https://cdn.usefathom.com/script.js"
+      data-site="SOXJJCZQ"
+      data-auto="false"
+      defer
+    ></script>
     <script src="https://cdn.paddle.com/paddle/paddle.js"></script>
-    <link rel="preload" as="style" href="https://tailwindui.com/plus/build/assets/app-ChJgtTpT.css"/>
-    <link rel="modulepreload" href="https://tailwindui.com/plus/build/assets/app-CcfABOai.js"/>
-    <link rel="modulepreload" href="https://tailwindui.com/plus/build/assets/client-BqiozLUN.js"/>
-    <link rel="stylesheet" href="https://tailwindui.com/plus/build/assets/app-ChJgtTpT.css"/>
-    <script type="module" src="https://tailwindui.com/plus/build/assets/app-CcfABOai.js"></script>
-    <meta name="twitter:card" content="summary_large_image" inertia>
-    <meta name="twitter:site" content="@tailwindcss" inertia>
-    <meta name="twitter:title" content="Tailwind UI - Official Tailwind CSS Components & Templates" inertia>
-    <meta name="twitter:description" content="Beautiful UI components and templates by the creators of Tailwind CSS."
-          inertia>
-    <meta name="twitter:image" content="https://tailwindui.com/plus/img/og-default.png" inertia>
-    <meta name="twitter:creator" content="@tailwindcss" inertia>
-    <meta property="og:url" content="https://www.tailwindui.com/" inertia>
-    <meta property="og:type" content="article" inertia>
-    <meta property="og:title" content="Tailwind UI - Official Tailwind CSS Components & Templates" inertia>
-    <meta property="og:description" content="Beautiful UI components and templates by the creators of Tailwind CSS."
-          inertia>
-    <meta property="og:image" content="https://tailwindui.com/plus/img/og-default.png" inertia>
-    <meta property="description" content="Beautiful UI components and templates by the creators of Tailwind CSS."
-          inertia>
-    <title inertia>Tailwind UI - Official Tailwind CSS Components & Templates</title></head>
-<body class="font-sans antialiased text-gray-600 min-h-full flex flex-col [overflow-anchor:none]" scroll-region>
-<div id="app"
-     data-page="{&quot;component&quot;:&quot;Home&quot;,&quot;props&quot;:{&quot;errors&quot;:{},&quot;tailwindVersion&quot;:&quot;4.0&quot;,&quot;copyrightYear&quot;:&quot;2024&quot;,&quot;auth&quot;:null,&quot;preferredLanguage&quot;:&quot;en-GB&quot;,&quot;commandPalette&quot;:[{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/application-shells/stacked&quot;,&quot;name&quot;:&quot;Stacked Layouts&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Application Shells&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/application-shells/sidebar&quot;,&quot;name&quot;:&quot;Sidebar Layouts&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Application Shells&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/application-shells/multi-column&quot;,&quot;name&quot;:&quot;Multi-Column Layouts&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Application Shells&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/headings/page-headings&quot;,&quot;name&quot;:&quot;Page Headings&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Headings&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/headings/card-headings&quot;,&quot;name&quot;:&quot;Card Headings&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Headings&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/headings/section-headings&quot;,&quot;name&quot;:&quot;Section Headings&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Headings&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/data-display/description-lists&quot;,&quot;name&quot;:&quot;Description Lists&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Data Display&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/data-display/stats&quot;,&quot;name&quot;:&quot;Stats&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Data Display&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/data-display/calendars&quot;,&quot;name&quot;:&quot;Calendars&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Data Display&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/lists/tables&quot;,&quot;name&quot;:&quot;Tables&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Lists&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/lists/stacked-lists&quot;,&quot;name&quot;:&quot;Stacked Lists&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Lists&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/lists/grid-lists&quot;,&quot;name&quot;:&quot;Grid Lists&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Lists&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/lists/feeds&quot;,&quot;name&quot;:&quot;Feeds&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Lists&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/forms/form-layouts&quot;,&quot;name&quot;:&quot;Form Layouts&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Forms&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/forms/input-groups&quot;,&quot;name&quot;:&quot;Input Groups&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Forms&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/forms/select-menus&quot;,&quot;name&quot;:&quot;Select Menus&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Forms&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/forms/textareas&quot;,&quot;name&quot;:&quot;Textareas&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Forms&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/forms/radio-groups&quot;,&quot;name&quot;:&quot;Radio Groups&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Forms&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/forms/checkboxes&quot;,&quot;name&quot;:&quot;Checkboxes&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Forms&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/forms/toggles&quot;,&quot;name&quot;:&quot;Toggles&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Forms&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/forms/sign-in-forms&quot;,&quot;name&quot;:&quot;Sign-in and Registration&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Forms&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/forms/action-panels&quot;,&quot;name&quot;:&quot;Action Panels&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Forms&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/forms/comboboxes&quot;,&quot;name&quot;:&quot;Comboboxes&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Forms&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/feedback/alerts&quot;,&quot;name&quot;:&quot;Alerts&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Feedback&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/feedback/empty-states&quot;,&quot;name&quot;:&quot;Empty States&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Feedback&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/navigation/tabs&quot;,&quot;name&quot;:&quot;Tabs&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Navigation&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/navigation/navbars&quot;,&quot;name&quot;:&quot;Navbars&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Navigation&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/navigation/vertical-navigation&quot;,&quot;name&quot;:&quot;Vertical Navigation&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Navigation&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/navigation/pagination&quot;,&quot;name&quot;:&quot;Pagination&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Navigation&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/navigation/sidebar-navigation&quot;,&quot;name&quot;:&quot;Sidebar Navigation&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Navigation&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/navigation/breadcrumbs&quot;,&quot;name&quot;:&quot;Breadcrumbs&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Navigation&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/navigation/progress-bars&quot;,&quot;name&quot;:&quot;Progress Bars&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Navigation&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/navigation/command-palettes&quot;,&quot;name&quot;:&quot;Command Palettes&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Navigation&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/overlays/modal-dialogs&quot;,&quot;name&quot;:&quot;Modal Dialogs&quot;,&quot;keywords&quot;:&quot;modals alerts&quot;,&quot;category&quot;:&quot;Application UI / Overlays&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/overlays/drawers&quot;,&quot;name&quot;:&quot;Drawers&quot;,&quot;keywords&quot;:&quot;slide-overs&quot;,&quot;category&quot;:&quot;Application UI / Overlays&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/overlays/notifications&quot;,&quot;name&quot;:&quot;Notifications&quot;,&quot;keywords&quot;:&quot;toasts&quot;,&quot;category&quot;:&quot;Application UI / Overlays&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/elements/avatars&quot;,&quot;name&quot;:&quot;Avatars&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Elements&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/elements/badges&quot;,&quot;name&quot;:&quot;Badges&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Elements&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/elements/buttons&quot;,&quot;name&quot;:&quot;Buttons&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Elements&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/elements/button-groups&quot;,&quot;name&quot;:&quot;Button Groups&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Elements&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/elements/dropdowns&quot;,&quot;name&quot;:&quot;Dropdowns&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Elements&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/layout/containers&quot;,&quot;name&quot;:&quot;Containers&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Layout&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/layout/cards&quot;,&quot;name&quot;:&quot;Cards&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Layout&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/layout/list-containers&quot;,&quot;name&quot;:&quot;List containers&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Layout&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/layout/media-objects&quot;,&quot;name&quot;:&quot;Media Objects&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Layout&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/layout/dividers&quot;,&quot;name&quot;:&quot;Dividers&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Layout&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/page-examples/home-screens&quot;,&quot;name&quot;:&quot;Home Screens&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Page Examples&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/page-examples/detail-screens&quot;,&quot;name&quot;:&quot;Detail Screens&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Page Examples&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/page-examples/settings-screens&quot;,&quot;name&quot;:&quot;Settings Screens&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Application UI / Page Examples&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/components/product-overviews&quot;,&quot;name&quot;:&quot;Product Overviews&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Ecommerce / Components&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/components/product-lists&quot;,&quot;name&quot;:&quot;Product Lists&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Ecommerce / Components&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/components/category-previews&quot;,&quot;name&quot;:&quot;Category Previews&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Ecommerce / Components&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/components/shopping-carts&quot;,&quot;name&quot;:&quot;Shopping Carts&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Ecommerce / Components&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/components/checkout-forms&quot;,&quot;name&quot;:&quot;Checkout Forms&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Ecommerce / Components&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/components/category-filters&quot;,&quot;name&quot;:&quot;Category Filters&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Ecommerce / Components&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/components/reviews&quot;,&quot;name&quot;:&quot;Reviews&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Ecommerce / Components&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/components/product-quickviews&quot;,&quot;name&quot;:&quot;Product Quickviews&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Ecommerce / Components&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/components/product-features&quot;,&quot;name&quot;:&quot;Product Features&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Ecommerce / Components&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/components/store-navigation&quot;,&quot;name&quot;:&quot;Store Navigation&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Ecommerce / Components&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/components/order-summaries&quot;,&quot;name&quot;:&quot;Order Summaries&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Ecommerce / Components&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/components/order-history&quot;,&quot;name&quot;:&quot;Order History&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Ecommerce / Components&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/components/promo-sections&quot;,&quot;name&quot;:&quot;Promo Sections&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Ecommerce / Components&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/components/incentives&quot;,&quot;name&quot;:&quot;Incentives&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Ecommerce / Components&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/page-examples/storefront-pages&quot;,&quot;name&quot;:&quot;Storefront Pages&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Ecommerce / Page Examples&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/page-examples/product-pages&quot;,&quot;name&quot;:&quot;Product Pages&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Ecommerce / Page Examples&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/page-examples/category-pages&quot;,&quot;name&quot;:&quot;Category Pages&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Ecommerce / Page Examples&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/page-examples/shopping-cart-pages&quot;,&quot;name&quot;:&quot;Shopping Cart Pages&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Ecommerce / Page Examples&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/page-examples/checkout-pages&quot;,&quot;name&quot;:&quot;Checkout Pages&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Ecommerce / Page Examples&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/page-examples/order-detail-pages&quot;,&quot;name&quot;:&quot;Order Detail Pages&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Ecommerce / Page Examples&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/page-examples/order-history-pages&quot;,&quot;name&quot;:&quot;Order History Pages&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Ecommerce / Page Examples&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/sections/heroes&quot;,&quot;name&quot;:&quot;Hero Sections&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Marketing / Page Sections&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/sections/feature-sections&quot;,&quot;name&quot;:&quot;Feature Sections&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Marketing / Page Sections&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/sections/cta-sections&quot;,&quot;name&quot;:&quot;CTA Sections&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Marketing / Page Sections&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/sections/bento-grids&quot;,&quot;name&quot;:&quot;Bento Grids&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Marketing / Page Sections&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/sections/pricing&quot;,&quot;name&quot;:&quot;Pricing Sections&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Marketing / Page Sections&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/sections/header&quot;,&quot;name&quot;:&quot;Header Sections&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Marketing / Page Sections&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/sections/faq-sections&quot;,&quot;name&quot;:&quot;FAQs&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Marketing / Page Sections&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/sections/newsletter-sections&quot;,&quot;name&quot;:&quot;Newsletter Sections&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Marketing / Page Sections&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/sections/stats-sections&quot;,&quot;name&quot;:&quot;Stats&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Marketing / Page Sections&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/sections/testimonials&quot;,&quot;name&quot;:&quot;Testimonials&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Marketing / Page Sections&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/sections/blog-sections&quot;,&quot;name&quot;:&quot;Blog Sections&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Marketing / Page Sections&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/sections/contact-sections&quot;,&quot;name&quot;:&quot;Contact Sections&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Marketing / Page Sections&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/sections/team-sections&quot;,&quot;name&quot;:&quot;Team Sections&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Marketing / Page Sections&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/sections/content-sections&quot;,&quot;name&quot;:&quot;Content Sections&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Marketing / Page Sections&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/sections/footers&quot;,&quot;name&quot;:&quot;Footers&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Marketing / Page Sections&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/sections/logo-clouds&quot;,&quot;name&quot;:&quot;Logo Clouds&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Marketing / Page Sections&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/elements/headers&quot;,&quot;name&quot;:&quot;Headers&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Marketing / Elements&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/elements/flyout-menus&quot;,&quot;name&quot;:&quot;Flyout Menus&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Marketing / Elements&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/elements/banners&quot;,&quot;name&quot;:&quot;Banners&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Marketing / Elements&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/feedback/404-pages&quot;,&quot;name&quot;:&quot;404 Pages&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Marketing / Feedback&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/page-examples/landing-pages&quot;,&quot;name&quot;:&quot;Landing Pages&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Marketing / Page Examples&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/page-examples/pricing-pages&quot;,&quot;name&quot;:&quot;Pricing Pages&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Marketing / Page Examples&quot;},{&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/page-examples/about-pages&quot;,&quot;name&quot;:&quot;About Pages&quot;,&quot;keywords&quot;:null,&quot;category&quot;:&quot;Marketing / Page Examples&quot;}],&quot;isImpersonating&quot;:false,&quot;blackFriday&quot;:null,&quot;products&quot;:[{&quot;name&quot;:&quot;Application UI&quot;,&quot;anchor&quot;:&quot;product-application-ui&quot;,&quot;description&quot;:&quot;Form layouts, tables, modal dialogs — everything you need to build beautiful responsive web applications.&quot;,&quot;categories&quot;:[{&quot;name&quot;:&quot;Stacked Layouts&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/application-shells/stacked&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/application-ui/stacked.png&quot;,&quot;components&quot;:&quot;9 components&quot;},{&quot;name&quot;:&quot;Sidebar Layouts&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/application-shells/sidebar&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/application-ui/sidebar.png&quot;,&quot;components&quot;:&quot;8 components&quot;},{&quot;name&quot;:&quot;Page Headings&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/headings/page-headings&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/application-ui/page-headings.png&quot;,&quot;components&quot;:&quot;13 components&quot;},{&quot;name&quot;:&quot;Calendars&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/data-display/calendars&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/application-ui/calendars.png&quot;,&quot;components&quot;:&quot;8 components&quot;},{&quot;name&quot;:&quot;Tables&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/lists/tables&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/application-ui/tables.png&quot;,&quot;components&quot;:&quot;20 components&quot;},{&quot;name&quot;:&quot;Form Layouts&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/forms/form-layouts&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/application-ui/form-layouts.png&quot;,&quot;components&quot;:&quot;5 components&quot;},{&quot;name&quot;:&quot;Input Groups&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/forms/input-groups&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/application-ui/input-groups.png&quot;,&quot;components&quot;:&quot;21 components&quot;},{&quot;name&quot;:&quot;Sign-in and Registration&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/forms/sign-in-forms&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/application-ui/sign-in-forms.png&quot;,&quot;components&quot;:&quot;5 components&quot;},{&quot;name&quot;:&quot;Pagination&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/navigation/pagination&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/application-ui/pagination.png&quot;,&quot;components&quot;:&quot;3 components&quot;},{&quot;name&quot;:&quot;Command Palettes&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/application-ui/navigation/command-palettes&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/application-ui/command-palettes.png&quot;,&quot;components&quot;:&quot;9 components&quot;}]},{&quot;name&quot;:&quot;Marketing&quot;,&quot;anchor&quot;:&quot;product-marketing&quot;,&quot;description&quot;:&quot;Heroes, feature sections, newsletter sign up forms — everything you need to build beautiful marketing websites.&quot;,&quot;categories&quot;:[{&quot;name&quot;:&quot;Hero Sections&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/sections/heroes&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/marketing/heroes.png&quot;,&quot;components&quot;:&quot;12 components&quot;},{&quot;name&quot;:&quot;CTA Sections&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/sections/cta-sections&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/marketing/cta-sections.png&quot;,&quot;components&quot;:&quot;11 components&quot;},{&quot;name&quot;:&quot;Pricing Sections&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/sections/pricing&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/marketing/pricing.png&quot;,&quot;components&quot;:&quot;14 components&quot;},{&quot;name&quot;:&quot;Stats&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/sections/stats-sections&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/marketing/stats-sections.png&quot;,&quot;components&quot;:&quot;10 components&quot;},{&quot;name&quot;:&quot;Testimonials&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/sections/testimonials&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/marketing/testimonials.png&quot;,&quot;components&quot;:&quot;9 components&quot;},{&quot;name&quot;:&quot;Team Sections&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/sections/team-sections&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/marketing/team-sections.png&quot;,&quot;components&quot;:&quot;9 components&quot;},{&quot;name&quot;:&quot;FAQs&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/sections/faq-sections&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/marketing/faq-sections.png&quot;,&quot;components&quot;:&quot;10 components&quot;},{&quot;name&quot;:&quot;Footers&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/sections/footers&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/marketing/footers.png&quot;,&quot;components&quot;:&quot;14 components&quot;},{&quot;name&quot;:&quot;Flyout Menus&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/elements/flyout-menus&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/marketing/flyout-menus.png&quot;,&quot;components&quot;:&quot;7 components&quot;},{&quot;name&quot;:&quot;404 Pages&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/feedback/404-pages&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/marketing/404-pages.png&quot;,&quot;components&quot;:&quot;5 components&quot;},{&quot;name&quot;:&quot;Landing Pages&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/marketing/page-examples/landing-pages&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/marketing/landing-pages.png&quot;,&quot;components&quot;:&quot;4 components&quot;}]},{&quot;name&quot;:&quot;Ecommerce&quot;,&quot;anchor&quot;:&quot;product-ecommerce&quot;,&quot;description&quot;:&quot;Checkout forms, shopping carts, product views — everything you need to build your next ecommerce front-end.&quot;,&quot;categories&quot;:[{&quot;name&quot;:&quot;Product Overviews&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/components/product-overviews&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/ecommerce/product-overviews.png&quot;,&quot;components&quot;:&quot;5 components&quot;},{&quot;name&quot;:&quot;Product Lists&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/components/product-lists&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/ecommerce/product-lists.png&quot;,&quot;components&quot;:&quot;11 components&quot;},{&quot;name&quot;:&quot;Shopping Carts&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/components/shopping-carts&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/ecommerce/shopping-carts.png&quot;,&quot;components&quot;:&quot;6 components&quot;},{&quot;name&quot;:&quot;Category Filters&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/components/category-filters&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/ecommerce/category-filters.png&quot;,&quot;components&quot;:&quot;5 components&quot;},{&quot;name&quot;:&quot;Product Quickviews&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/components/product-quickviews&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/ecommerce/product-quickviews.png&quot;,&quot;components&quot;:&quot;4 components&quot;},{&quot;name&quot;:&quot;Store Navigation&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/components/store-navigation&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/ecommerce/store-navigation.png&quot;,&quot;components&quot;:&quot;5 components&quot;},{&quot;name&quot;:&quot;Promo Sections&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/components/promo-sections&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/ecommerce/promo-sections.png&quot;,&quot;components&quot;:&quot;8 components&quot;},{&quot;name&quot;:&quot;Checkout Forms&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/components/checkout-forms&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/ecommerce/checkout-forms.png&quot;,&quot;components&quot;:&quot;5 components&quot;},{&quot;name&quot;:&quot;Reviews&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/components/reviews&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/ecommerce/reviews.png&quot;,&quot;components&quot;:&quot;4 components&quot;},{&quot;name&quot;:&quot;Order Summaries&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/components/order-summaries&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/ecommerce/order-summaries.png&quot;,&quot;components&quot;:&quot;4 components&quot;},{&quot;name&quot;:&quot;Order History&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/components/order-history&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/ecommerce/order-history.png&quot;,&quot;components&quot;:&quot;4 components&quot;},{&quot;name&quot;:&quot;Incentives&quot;,&quot;url&quot;:&quot;https://tailwindui.com/components/ecommerce/components/incentives&quot;,&quot;imageUrl&quot;:&quot;/plus/img/category-thumbnails/ecommerce/incentives.png&quot;,&quot;components&quot;:&quot;8 components&quot;}]}]},&quot;url&quot;:&quot;/?ref=top&quot;,&quot;version&quot;:&quot;04aab70b189894a071f00c11430d87d2&quot;}">
-    <header class="relative z-50 w-full flex-none text-sm/6 font-semibold text-slate-900">
-        <nav aria-label="Global" class="max-w-container mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="relative flex items-center py-[2.125rem]"><a class="flex-none text-slate-900" href="/"><span
-                class="sr-only">Tailwind UI</span>
-                <svg class="h-6 w-auto" aria-hidden="true" viewBox="0 0 160 24" fill="none">
-                    <path
-                        d="M18.724 1.714c-4.538 0-7.376 2.286-8.51 6.857 1.702-2.285 3.687-3.143 5.957-2.57 1.296.325 2.22 1.271 3.245 2.318 1.668 1.706 3.6 3.681 7.819 3.681 4.539 0 7.376-2.286 8.51-6.857-1.701 2.286-3.687 3.143-5.957 2.571-1.294-.325-2.22-1.272-3.245-2.32-1.668-1.705-3.6-3.68-7.819-3.68zM10.214 12c-4.539 0-7.376 2.286-8.51 6.857 1.701-2.286 3.687-3.143 5.957-2.571 1.294.325 2.22 1.272 3.245 2.32 1.668 1.705 3.6 3.68 7.818 3.68 4.54 0 7.377-2.286 8.511-6.857-1.702 2.286-3.688 3.143-5.957 2.571-1.295-.326-2.22-1.272-3.245-2.32-1.669-1.705-3.6-3.68-7.82-3.68z"
-                        class="fill-sky-400"></path>
-                    <path
-                        d="M51.285 9.531V6.857h-3.166v-3.6l-2.758.823v2.777h-2.348v2.674h2.348v6.172c0 3.343 1.686 4.526 5.924 4.011V17.22c-2.094.103-3.166.129-3.166-1.517V9.53h3.166zm12.087-2.674v1.826c-.97-1.337-2.476-2.16-4.468-2.16-3.472 0-6.357 2.931-6.357 6.763 0 3.805 2.885 6.763 6.357 6.763 1.992 0 3.498-.823 4.468-2.186v1.851h2.758V6.857h-2.758zM59.338 17.4c-2.297 0-4.034-1.723-4.034-4.114 0-2.392 1.736-4.115 4.034-4.115s4.034 1.723 4.034 4.115c0 2.391-1.736 4.114-4.034 4.114zM70.723 4.929c.97 0 1.762-.823 1.762-1.775 0-.977-.792-1.774-1.762-1.774s-1.762.797-1.762 1.774c0 .952.792 1.775 1.762 1.775zm-1.379 14.785h2.758V6.857h-2.758v12.857zm5.96 0h2.757V.943h-2.758v18.771zM95.969 6.857l-2.502 8.872-2.655-8.872h-2.63L85.5 15.73l-2.477-8.872h-2.91l4.008 12.857h2.707l2.68-8.665 2.656 8.665h2.706L98.88 6.857h-2.911zm6.32-1.928c.97 0 1.762-.823 1.762-1.775 0-.977-.792-1.774-1.762-1.774s-1.762.797-1.762 1.774c0 .952.792 1.775 1.762 1.775zm-1.379 14.785h2.758V6.857h-2.758v12.857zm12.674-13.191c-1.736 0-3.115.643-3.957 1.98V6.857h-2.758v12.857h2.758v-6.891c0-2.623 1.43-3.703 3.242-3.703 1.737 0 2.86 1.029 2.86 2.983v7.611h2.757V11.82c0-3.343-2.042-5.297-4.902-5.297zm17.982-4.809v6.969c-.971-1.337-2.477-2.16-4.468-2.16-3.473 0-6.358 2.931-6.358 6.763 0 3.805 2.885 6.763 6.358 6.763 1.991 0 3.497-.823 4.468-2.186v1.851h2.757v-18h-2.757zM127.532 17.4c-2.298 0-4.034-1.723-4.034-4.114 0-2.392 1.736-4.115 4.034-4.115 2.297 0 4.034 1.723 4.034 4.115 0 2.391-1.737 4.114-4.034 4.114z"
-                        fill="currentColor"></path>
-                    <path fill-rule="evenodd" clip-rule="evenodd"
-                          d="M145.532 3.429h8.511c.902 0 1.768.36 2.407 1.004.638.643.997 1.515.997 2.424v8.572c0 .909-.359 1.781-.997 2.424a3.394 3.394 0 01-2.407 1.004h-8.511a3.39 3.39 0 01-2.407-1.004 3.438 3.438 0 01-.997-2.424V6.857c0-.91.358-1.781.997-2.424a3.39 3.39 0 012.407-1.004zm-5.106 3.428c0-1.364.538-2.672 1.495-3.636a5.09 5.09 0 013.611-1.507h8.511c1.354 0 2.653.542 3.61 1.507a5.16 5.16 0 011.496 3.636v8.572a5.16 5.16 0 01-1.496 3.636 5.086 5.086 0 01-3.61 1.506h-8.511a5.09 5.09 0 01-3.611-1.506 5.164 5.164 0 01-1.495-3.636V6.857zm10.907 6.251c0 1.812-1.359 2.916-3.193 2.916-1.823 0-3.182-1.104-3.182-2.916v-5.65h1.633v5.52c0 .815.429 1.427 1.549 1.427 1.12 0 1.549-.612 1.549-1.428v-5.52h1.644v5.652zm1.72 2.748V7.457h1.644v8.4h-1.644z"
-                          fill="currentColor"></path>
-                </svg>
-            </a><a href="https://tailwindcss.com/blog/introducing-catalyst"
-                   class="group -my-2 ml-6 hidden items-center gap-2 rounded-full bg-white/25 px-3 py-2 text-xs text-slate-900 ring-1 ring-black/[0.08] ring-inset hover:bg-white/50 hover:ring-black/[0.13] sm:flex md:ml-8 lg:hidden min-[80rem]:flex">
-                <svg class="size-4 fill-sky-500" viewBox="0 0 24 24">
-                    <path fill-rule="evenodd"
-                          d="M9 4.5a.75.75 0 01.721.544l.813 2.846a3.75 3.75 0 002.576 2.576l2.846.813a.75.75 0 010 1.442l-2.846.813a3.75 3.75 0 00-2.576 2.576l-.813 2.846a.75.75 0 01-1.442 0l-.813-2.846a3.75 3.75 0 00-2.576-2.576l-2.846-.813a.75.75 0 010-1.442l2.846-.813A3.75 3.75 0 007.466 7.89l.813-2.846A.75.75 0 019 4.5zM18 1.5a.75.75 0 01.728.568l.258 1.036c.236.94.97 1.674 1.91 1.91l1.036.258a.75.75 0 010 1.456l-1.036.258c-.94.236-1.674.97-1.91 1.91l-.258 1.036a.75.75 0 01-1.456 0l-.258-1.036a2.625 2.625 0 00-1.91-1.91l-1.036-.258a.75.75 0 010-1.456l1.036-.258a2.625 2.625 0 001.91-1.91l.258-1.036A.75.75 0 0118 1.5zM16.5 15a.75.75 0 01.712.513l.394 1.183c.15.447.5.799.948.948l1.183.395a.75.75 0 010 1.422l-1.183.395c-.447.15-.799.5-.948.948l-.395 1.183a.75.75 0 01-1.422 0l-.395-1.183a1.5 1.5 0 00-.948-.948l-1.183-.395a.75.75 0 010-1.422l1.183-.395c.447-.15.799-.5.948-.948l.395-1.183A.75.75 0 0116.5 15z"
-                          clip-rule="evenodd"></path>
-                </svg>
-                <span class="font-semibold">Introducing Catalyst</span>
-                <svg width="2" height="2" aria-hidden="true" class="fill-slate-900">
-                    <circle cx="1" cy="1" r="1"></circle>
-                </svg>
-                <span class="font-medium"><span>Our new React UI kit</span></span>
-                <svg viewBox="0 0 5 8" class="h-2 w-[5px] fill-black/30 group-hover:fill-black/60" fill-rule="evenodd"
-                     clip-rule="evenodd" aria-hidden="true">
-                    <path
-                        d="M.2.24A.75.75 0 0 1 1.26.2l3.5 3.25a.75.75 0 0 1 0 1.1L1.26 7.8A.75.75 0 0 1 .24 6.7L3.148 4 .24 1.3A.75.75 0 0 1 .2.24Z"></path>
-                </svg>
+    <link
+      rel="preload"
+      as="style"
+      href="https://tailwindui.com/plus/build/assets/app-ChJgtTpT.css"
+    />
+    <link
+      rel="modulepreload"
+      href="https://tailwindui.com/plus/build/assets/app-CcfABOai.js"
+    />
+    <link
+      rel="modulepreload"
+      href="https://tailwindui.com/plus/build/assets/client-BqiozLUN.js"
+    />
+    <link
+      rel="stylesheet"
+      href="https://tailwindui.com/plus/build/assets/app-ChJgtTpT.css"
+    />
+    <script
+      type="module"
+      src="https://tailwindui.com/plus/build/assets/app-CcfABOai.js"
+    ></script>
+    <meta name="twitter:card" content="summary_large_image" inertia />
+    <meta name="twitter:site" content="@tailwindcss" inertia />
+    <meta
+      name="twitter:title"
+      content="Tailwind UI - Official Tailwind CSS Components & Templates"
+      inertia
+    />
+    <meta
+      name="twitter:description"
+      content="Beautiful UI components and templates by the creators of Tailwind CSS."
+      inertia
+    />
+    <meta
+      name="twitter:image"
+      content="https://tailwindui.com/plus/img/og-default.png"
+      inertia
+    />
+    <meta name="twitter:creator" content="@tailwindcss" inertia />
+    <meta property="og:url" content="https://www.tailwindui.com/" inertia />
+    <meta property="og:type" content="article" inertia />
+    <meta
+      property="og:title"
+      content="Tailwind UI - Official Tailwind CSS Components & Templates"
+      inertia
+    />
+    <meta
+      property="og:description"
+      content="Beautiful UI components and templates by the creators of Tailwind CSS."
+      inertia
+    />
+    <meta
+      property="og:image"
+      content="https://tailwindui.com/plus/img/og-default.png"
+      inertia
+    />
+    <meta
+      property="description"
+      content="Beautiful UI components and templates by the creators of Tailwind CSS."
+      inertia
+    />
+    <title inertia>
+      Tailwind UI - Official Tailwind CSS Components & Templates
+    </title>
+  </head>
+  <body
+    class="font-sans antialiased text-gray-600 min-h-full flex flex-col [overflow-anchor:none]"
+    scroll-region
+  >
+    <div
+      id="app"
+      data-page='{"component":"Home","props":{"errors":{},"tailwindVersion":"4.0","copyrightYear":"2024","auth":null,"preferredLanguage":"en-GB","commandPalette":[{"url":"https://tailwindui.com/components/application-ui/application-shells/stacked","name":"Stacked Layouts","keywords":null,"category":"Application UI / Application Shells"},{"url":"https://tailwindui.com/components/application-ui/application-shells/sidebar","name":"Sidebar Layouts","keywords":null,"category":"Application UI / Application Shells"},{"url":"https://tailwindui.com/components/application-ui/application-shells/multi-column","name":"Multi-Column Layouts","keywords":null,"category":"Application UI / Application Shells"},{"url":"https://tailwindui.com/components/application-ui/headings/page-headings","name":"Page Headings","keywords":null,"category":"Application UI / Headings"},{"url":"https://tailwindui.com/components/application-ui/headings/card-headings","name":"Card Headings","keywords":null,"category":"Application UI / Headings"},{"url":"https://tailwindui.com/components/application-ui/headings/section-headings","name":"Section Headings","keywords":null,"category":"Application UI / Headings"},{"url":"https://tailwindui.com/components/application-ui/data-display/description-lists","name":"Description Lists","keywords":null,"category":"Application UI / Data Display"},{"url":"https://tailwindui.com/components/application-ui/data-display/stats","name":"Stats","keywords":null,"category":"Application UI / Data Display"},{"url":"https://tailwindui.com/components/application-ui/data-display/calendars","name":"Calendars","keywords":null,"category":"Application UI / Data Display"},{"url":"https://tailwindui.com/components/application-ui/lists/tables","name":"Tables","keywords":null,"category":"Application UI / Lists"},{"url":"https://tailwindui.com/components/application-ui/lists/stacked-lists","name":"Stacked Lists","keywords":null,"category":"Application UI / Lists"},{"url":"https://tailwindui.com/components/application-ui/lists/grid-lists","name":"Grid Lists","keywords":null,"category":"Application UI / Lists"},{"url":"https://tailwindui.com/components/application-ui/lists/feeds","name":"Feeds","keywords":null,"category":"Application UI / Lists"},{"url":"https://tailwindui.com/components/application-ui/forms/form-layouts","name":"Form Layouts","keywords":null,"category":"Application UI / Forms"},{"url":"https://tailwindui.com/components/application-ui/forms/input-groups","name":"Input Groups","keywords":null,"category":"Application UI / Forms"},{"url":"https://tailwindui.com/components/application-ui/forms/select-menus","name":"Select Menus","keywords":null,"category":"Application UI / Forms"},{"url":"https://tailwindui.com/components/application-ui/forms/textareas","name":"Textareas","keywords":null,"category":"Application UI / Forms"},{"url":"https://tailwindui.com/components/application-ui/forms/radio-groups","name":"Radio Groups","keywords":null,"category":"Application UI / Forms"},{"url":"https://tailwindui.com/components/application-ui/forms/checkboxes","name":"Checkboxes","keywords":null,"category":"Application UI / Forms"},{"url":"https://tailwindui.com/components/application-ui/forms/toggles","name":"Toggles","keywords":null,"category":"Application UI / Forms"},{"url":"https://tailwindui.com/components/application-ui/forms/sign-in-forms","name":"Sign-in and Registration","keywords":null,"category":"Application UI / Forms"},{"url":"https://tailwindui.com/components/application-ui/forms/action-panels","name":"Action Panels","keywords":null,"category":"Application UI / Forms"},{"url":"https://tailwindui.com/components/application-ui/forms/comboboxes","name":"Comboboxes","keywords":null,"category":"Application UI / Forms"},{"url":"https://tailwindui.com/components/application-ui/feedback/alerts","name":"Alerts","keywords":null,"category":"Application UI / Feedback"},{"url":"https://tailwindui.com/components/application-ui/feedback/empty-states","name":"Empty States","keywords":null,"category":"Application UI / Feedback"},{"url":"https://tailwindui.com/components/application-ui/navigation/tabs","name":"Tabs","keywords":null,"category":"Application UI / Navigation"},{"url":"https://tailwindui.com/components/application-ui/navigation/navbars","name":"Navbars","keywords":null,"category":"Application UI / Navigation"},{"url":"https://tailwindui.com/components/application-ui/navigation/vertical-navigation","name":"Vertical Navigation","keywords":null,"category":"Application UI / Navigation"},{"url":"https://tailwindui.com/components/application-ui/navigation/pagination","name":"Pagination","keywords":null,"category":"Application UI / Navigation"},{"url":"https://tailwindui.com/components/application-ui/navigation/sidebar-navigation","name":"Sidebar Navigation","keywords":null,"category":"Application UI / Navigation"},{"url":"https://tailwindui.com/components/application-ui/navigation/breadcrumbs","name":"Breadcrumbs","keywords":null,"category":"Application UI / Navigation"},{"url":"https://tailwindui.com/components/application-ui/navigation/progress-bars","name":"Progress Bars","keywords":null,"category":"Application UI / Navigation"},{"url":"https://tailwindui.com/components/application-ui/navigation/command-palettes","name":"Command Palettes","keywords":null,"category":"Application UI / Navigation"},{"url":"https://tailwindui.com/components/application-ui/overlays/modal-dialogs","name":"Modal Dialogs","keywords":"modals alerts","category":"Application UI / Overlays"},{"url":"https://tailwindui.com/components/application-ui/overlays/drawers","name":"Drawers","keywords":"slide-overs","category":"Application UI / Overlays"},{"url":"https://tailwindui.com/components/application-ui/overlays/notifications","name":"Notifications","keywords":"toasts","category":"Application UI / Overlays"},{"url":"https://tailwindui.com/components/application-ui/elements/avatars","name":"Avatars","keywords":null,"category":"Application UI / Elements"},{"url":"https://tailwindui.com/components/application-ui/elements/badges","name":"Badges","keywords":null,"category":"Application UI / Elements"},{"url":"https://tailwindui.com/components/application-ui/elements/buttons","name":"Buttons","keywords":null,"category":"Application UI / Elements"},{"url":"https://tailwindui.com/components/application-ui/elements/button-groups","name":"Button Groups","keywords":null,"category":"Application UI / Elements"},{"url":"https://tailwindui.com/components/application-ui/elements/dropdowns","name":"Dropdowns","keywords":null,"category":"Application UI / Elements"},{"url":"https://tailwindui.com/components/application-ui/layout/containers","name":"Containers","keywords":null,"category":"Application UI / Layout"},{"url":"https://tailwindui.com/components/application-ui/layout/cards","name":"Cards","keywords":null,"category":"Application UI / Layout"},{"url":"https://tailwindui.com/components/application-ui/layout/list-containers","name":"List containers","keywords":null,"category":"Application UI / Layout"},{"url":"https://tailwindui.com/components/application-ui/layout/media-objects","name":"Media Objects","keywords":null,"category":"Application UI / Layout"},{"url":"https://tailwindui.com/components/application-ui/layout/dividers","name":"Dividers","keywords":null,"category":"Application UI / Layout"},{"url":"https://tailwindui.com/components/application-ui/page-examples/home-screens","name":"Home Screens","keywords":null,"category":"Application UI / Page Examples"},{"url":"https://tailwindui.com/components/application-ui/page-examples/detail-screens","name":"Detail Screens","keywords":null,"category":"Application UI / Page Examples"},{"url":"https://tailwindui.com/components/application-ui/page-examples/settings-screens","name":"Settings Screens","keywords":null,"category":"Application UI / Page Examples"},{"url":"https://tailwindui.com/components/ecommerce/components/product-overviews","name":"Product Overviews","keywords":null,"category":"Ecommerce / Components"},{"url":"https://tailwindui.com/components/ecommerce/components/product-lists","name":"Product Lists","keywords":null,"category":"Ecommerce / Components"},{"url":"https://tailwindui.com/components/ecommerce/components/category-previews","name":"Category Previews","keywords":null,"category":"Ecommerce / Components"},{"url":"https://tailwindui.com/components/ecommerce/components/shopping-carts","name":"Shopping Carts","keywords":null,"category":"Ecommerce / Components"},{"url":"https://tailwindui.com/components/ecommerce/components/checkout-forms","name":"Checkout Forms","keywords":null,"category":"Ecommerce / Components"},{"url":"https://tailwindui.com/components/ecommerce/components/category-filters","name":"Category Filters","keywords":null,"category":"Ecommerce / Components"},{"url":"https://tailwindui.com/components/ecommerce/components/reviews","name":"Reviews","keywords":null,"category":"Ecommerce / Components"},{"url":"https://tailwindui.com/components/ecommerce/components/product-quickviews","name":"Product Quickviews","keywords":null,"category":"Ecommerce / Components"},{"url":"https://tailwindui.com/components/ecommerce/components/product-features","name":"Product Features","keywords":null,"category":"Ecommerce / Components"},{"url":"https://tailwindui.com/components/ecommerce/components/store-navigation","name":"Store Navigation","keywords":null,"category":"Ecommerce / Components"},{"url":"https://tailwindui.com/components/ecommerce/components/order-summaries","name":"Order Summaries","keywords":null,"category":"Ecommerce / Components"},{"url":"https://tailwindui.com/components/ecommerce/components/order-history","name":"Order History","keywords":null,"category":"Ecommerce / Components"},{"url":"https://tailwindui.com/components/ecommerce/components/promo-sections","name":"Promo Sections","keywords":null,"category":"Ecommerce / Components"},{"url":"https://tailwindui.com/components/ecommerce/components/incentives","name":"Incentives","keywords":null,"category":"Ecommerce / Components"},{"url":"https://tailwindui.com/components/ecommerce/page-examples/storefront-pages","name":"Storefront Pages","keywords":null,"category":"Ecommerce / Page Examples"},{"url":"https://tailwindui.com/components/ecommerce/page-examples/product-pages","name":"Product Pages","keywords":null,"category":"Ecommerce / Page Examples"},{"url":"https://tailwindui.com/components/ecommerce/page-examples/category-pages","name":"Category Pages","keywords":null,"category":"Ecommerce / Page Examples"},{"url":"https://tailwindui.com/components/ecommerce/page-examples/shopping-cart-pages","name":"Shopping Cart Pages","keywords":null,"category":"Ecommerce / Page Examples"},{"url":"https://tailwindui.com/components/ecommerce/page-examples/checkout-pages","name":"Checkout Pages","keywords":null,"category":"Ecommerce / Page Examples"},{"url":"https://tailwindui.com/components/ecommerce/page-examples/order-detail-pages","name":"Order Detail Pages","keywords":null,"category":"Ecommerce / Page Examples"},{"url":"https://tailwindui.com/components/ecommerce/page-examples/order-history-pages","name":"Order History Pages","keywords":null,"category":"Ecommerce / Page Examples"},{"url":"https://tailwindui.com/components/marketing/sections/heroes","name":"Hero Sections","keywords":null,"category":"Marketing / Page Sections"},{"url":"https://tailwindui.com/components/marketing/sections/feature-sections","name":"Feature Sections","keywords":null,"category":"Marketing / Page Sections"},{"url":"https://tailwindui.com/components/marketing/sections/cta-sections","name":"CTA Sections","keywords":null,"category":"Marketing / Page Sections"},{"url":"https://tailwindui.com/components/marketing/sections/bento-grids","name":"Bento Grids","keywords":null,"category":"Marketing / Page Sections"},{"url":"https://tailwindui.com/components/marketing/sections/pricing","name":"Pricing Sections","keywords":null,"category":"Marketing / Page Sections"},{"url":"https://tailwindui.com/components/marketing/sections/header","name":"Header Sections","keywords":null,"category":"Marketing / Page Sections"},{"url":"https://tailwindui.com/components/marketing/sections/faq-sections","name":"FAQs","keywords":null,"category":"Marketing / Page Sections"},{"url":"https://tailwindui.com/components/marketing/sections/newsletter-sections","name":"Newsletter Sections","keywords":null,"category":"Marketing / Page Sections"},{"url":"https://tailwindui.com/components/marketing/sections/stats-sections","name":"Stats","keywords":null,"category":"Marketing / Page Sections"},{"url":"https://tailwindui.com/components/marketing/sections/testimonials","name":"Testimonials","keywords":null,"category":"Marketing / Page Sections"},{"url":"https://tailwindui.com/components/marketing/sections/blog-sections","name":"Blog Sections","keywords":null,"category":"Marketing / Page Sections"},{"url":"https://tailwindui.com/components/marketing/sections/contact-sections","name":"Contact Sections","keywords":null,"category":"Marketing / Page Sections"},{"url":"https://tailwindui.com/components/marketing/sections/team-sections","name":"Team Sections","keywords":null,"category":"Marketing / Page Sections"},{"url":"https://tailwindui.com/components/marketing/sections/content-sections","name":"Content Sections","keywords":null,"category":"Marketing / Page Sections"},{"url":"https://tailwindui.com/components/marketing/sections/footers","name":"Footers","keywords":null,"category":"Marketing / Page Sections"},{"url":"https://tailwindui.com/components/marketing/sections/logo-clouds","name":"Logo Clouds","keywords":null,"category":"Marketing / Page Sections"},{"url":"https://tailwindui.com/components/marketing/elements/headers","name":"Headers","keywords":null,"category":"Marketing / Elements"},{"url":"https://tailwindui.com/components/marketing/elements/flyout-menus","name":"Flyout Menus","keywords":null,"category":"Marketing / Elements"},{"url":"https://tailwindui.com/components/marketing/elements/banners","name":"Banners","keywords":null,"category":"Marketing / Elements"},{"url":"https://tailwindui.com/components/marketing/feedback/404-pages","name":"404 Pages","keywords":null,"category":"Marketing / Feedback"},{"url":"https://tailwindui.com/components/marketing/page-examples/landing-pages","name":"Landing Pages","keywords":null,"category":"Marketing / Page Examples"},{"url":"https://tailwindui.com/components/marketing/page-examples/pricing-pages","name":"Pricing Pages","keywords":null,"category":"Marketing / Page Examples"},{"url":"https://tailwindui.com/components/marketing/page-examples/about-pages","name":"About Pages","keywords":null,"category":"Marketing / Page Examples"}],"isImpersonating":false,"blackFriday":null,"products":[{"name":"Application UI","anchor":"product-application-ui","description":"Form layouts, tables, modal dialogs — everything you need to build beautiful responsive web applications.","categories":[{"name":"Stacked Layouts","url":"https://tailwindui.com/components/application-ui/application-shells/stacked","imageUrl":"/plus/img/category-thumbnails/application-ui/stacked.png","components":"9 components"},{"name":"Sidebar Layouts","url":"https://tailwindui.com/components/application-ui/application-shells/sidebar","imageUrl":"/plus/img/category-thumbnails/application-ui/sidebar.png","components":"8 components"},{"name":"Page Headings","url":"https://tailwindui.com/components/application-ui/headings/page-headings","imageUrl":"/plus/img/category-thumbnails/application-ui/page-headings.png","components":"13 components"},{"name":"Calendars","url":"https://tailwindui.com/components/application-ui/data-display/calendars","imageUrl":"/plus/img/category-thumbnails/application-ui/calendars.png","components":"8 components"},{"name":"Tables","url":"https://tailwindui.com/components/application-ui/lists/tables","imageUrl":"/plus/img/category-thumbnails/application-ui/tables.png","components":"20 components"},{"name":"Form Layouts","url":"https://tailwindui.com/components/application-ui/forms/form-layouts","imageUrl":"/plus/img/category-thumbnails/application-ui/form-layouts.png","components":"5 components"},{"name":"Input Groups","url":"https://tailwindui.com/components/application-ui/forms/input-groups","imageUrl":"/plus/img/category-thumbnails/application-ui/input-groups.png","components":"21 components"},{"name":"Sign-in and Registration","url":"https://tailwindui.com/components/application-ui/forms/sign-in-forms","imageUrl":"/plus/img/category-thumbnails/application-ui/sign-in-forms.png","components":"5 components"},{"name":"Pagination","url":"https://tailwindui.com/components/application-ui/navigation/pagination","imageUrl":"/plus/img/category-thumbnails/application-ui/pagination.png","components":"3 components"},{"name":"Command Palettes","url":"https://tailwindui.com/components/application-ui/navigation/command-palettes","imageUrl":"/plus/img/category-thumbnails/application-ui/command-palettes.png","components":"9 components"}]},{"name":"Marketing","anchor":"product-marketing","description":"Heroes, feature sections, newsletter sign up forms — everything you need to build beautiful marketing websites.","categories":[{"name":"Hero Sections","url":"https://tailwindui.com/components/marketing/sections/heroes","imageUrl":"/plus/img/category-thumbnails/marketing/heroes.png","components":"12 components"},{"name":"CTA Sections","url":"https://tailwindui.com/components/marketing/sections/cta-sections","imageUrl":"/plus/img/category-thumbnails/marketing/cta-sections.png","components":"11 components"},{"name":"Pricing Sections","url":"https://tailwindui.com/components/marketing/sections/pricing","imageUrl":"/plus/img/category-thumbnails/marketing/pricing.png","components":"14 components"},{"name":"Stats","url":"https://tailwindui.com/components/marketing/sections/stats-sections","imageUrl":"/plus/img/category-thumbnails/marketing/stats-sections.png","components":"10 components"},{"name":"Testimonials","url":"https://tailwindui.com/components/marketing/sections/testimonials","imageUrl":"/plus/img/category-thumbnails/marketing/testimonials.png","components":"9 components"},{"name":"Team Sections","url":"https://tailwindui.com/components/marketing/sections/team-sections","imageUrl":"/plus/img/category-thumbnails/marketing/team-sections.png","components":"9 components"},{"name":"FAQs","url":"https://tailwindui.com/components/marketing/sections/faq-sections","imageUrl":"/plus/img/category-thumbnails/marketing/faq-sections.png","components":"10 components"},{"name":"Footers","url":"https://tailwindui.com/components/marketing/sections/footers","imageUrl":"/plus/img/category-thumbnails/marketing/footers.png","components":"14 components"},{"name":"Flyout Menus","url":"https://tailwindui.com/components/marketing/elements/flyout-menus","imageUrl":"/plus/img/category-thumbnails/marketing/flyout-menus.png","components":"7 components"},{"name":"404 Pages","url":"https://tailwindui.com/components/marketing/feedback/404-pages","imageUrl":"/plus/img/category-thumbnails/marketing/404-pages.png","components":"5 components"},{"name":"Landing Pages","url":"https://tailwindui.com/components/marketing/page-examples/landing-pages","imageUrl":"/plus/img/category-thumbnails/marketing/landing-pages.png","components":"4 components"}]},{"name":"Ecommerce","anchor":"product-ecommerce","description":"Checkout forms, shopping carts, product views — everything you need to build your next ecommerce front-end.","categories":[{"name":"Product Overviews","url":"https://tailwindui.com/components/ecommerce/components/product-overviews","imageUrl":"/plus/img/category-thumbnails/ecommerce/product-overviews.png","components":"5 components"},{"name":"Product Lists","url":"https://tailwindui.com/components/ecommerce/components/product-lists","imageUrl":"/plus/img/category-thumbnails/ecommerce/product-lists.png","components":"11 components"},{"name":"Shopping Carts","url":"https://tailwindui.com/components/ecommerce/components/shopping-carts","imageUrl":"/plus/img/category-thumbnails/ecommerce/shopping-carts.png","components":"6 components"},{"name":"Category Filters","url":"https://tailwindui.com/components/ecommerce/components/category-filters","imageUrl":"/plus/img/category-thumbnails/ecommerce/category-filters.png","components":"5 components"},{"name":"Product Quickviews","url":"https://tailwindui.com/components/ecommerce/components/product-quickviews","imageUrl":"/plus/img/category-thumbnails/ecommerce/product-quickviews.png","components":"4 components"},{"name":"Store Navigation","url":"https://tailwindui.com/components/ecommerce/components/store-navigation","imageUrl":"/plus/img/category-thumbnails/ecommerce/store-navigation.png","components":"5 components"},{"name":"Promo Sections","url":"https://tailwindui.com/components/ecommerce/components/promo-sections","imageUrl":"/plus/img/category-thumbnails/ecommerce/promo-sections.png","components":"8 components"},{"name":"Checkout Forms","url":"https://tailwindui.com/components/ecommerce/components/checkout-forms","imageUrl":"/plus/img/category-thumbnails/ecommerce/checkout-forms.png","components":"5 components"},{"name":"Reviews","url":"https://tailwindui.com/components/ecommerce/components/reviews","imageUrl":"/plus/img/category-thumbnails/ecommerce/reviews.png","components":"4 components"},{"name":"Order Summaries","url":"https://tailwindui.com/components/ecommerce/components/order-summaries","imageUrl":"/plus/img/category-thumbnails/ecommerce/order-summaries.png","components":"4 components"},{"name":"Order History","url":"https://tailwindui.com/components/ecommerce/components/order-history","imageUrl":"/plus/img/category-thumbnails/ecommerce/order-history.png","components":"4 components"},{"name":"Incentives","url":"https://tailwindui.com/components/ecommerce/components/incentives","imageUrl":"/plus/img/category-thumbnails/ecommerce/incentives.png","components":"8 components"}]}]},"url":"/?ref=top","version":"04aab70b189894a071f00c11430d87d2"}'
+    >
+      <header
+        class="relative z-50 w-full flex-none text-sm/6 font-semibold text-slate-900"
+      >
+        <nav
+          aria-label="Global"
+          class="max-w-container mx-auto px-4 sm:px-6 lg:px-8"
+        >
+          <div class="relative flex items-center py-[2.125rem]">
+            <a class="flex-none text-slate-900" href="/"
+              ><span class="sr-only">Tailwind UI</span>
+              <svg
+                class="h-6 w-auto"
+                aria-hidden="true"
+                viewBox="0 0 160 24"
+                fill="none"
+              >
+                <path
+                  d="M18.724 1.714c-4.538 0-7.376 2.286-8.51 6.857 1.702-2.285 3.687-3.143 5.957-2.57 1.296.325 2.22 1.271 3.245 2.318 1.668 1.706 3.6 3.681 7.819 3.681 4.539 0 7.376-2.286 8.51-6.857-1.701 2.286-3.687 3.143-5.957 2.571-1.294-.325-2.22-1.272-3.245-2.32-1.668-1.705-3.6-3.68-7.819-3.68zM10.214 12c-4.539 0-7.376 2.286-8.51 6.857 1.701-2.286 3.687-3.143 5.957-2.571 1.294.325 2.22 1.272 3.245 2.32 1.668 1.705 3.6 3.68 7.818 3.68 4.54 0 7.377-2.286 8.511-6.857-1.702 2.286-3.688 3.143-5.957 2.571-1.295-.326-2.22-1.272-3.245-2.32-1.669-1.705-3.6-3.68-7.82-3.68z"
+                  class="fill-sky-400"
+                ></path>
+                <path
+                  d="M51.285 9.531V6.857h-3.166v-3.6l-2.758.823v2.777h-2.348v2.674h2.348v6.172c0 3.343 1.686 4.526 5.924 4.011V17.22c-2.094.103-3.166.129-3.166-1.517V9.53h3.166zm12.087-2.674v1.826c-.97-1.337-2.476-2.16-4.468-2.16-3.472 0-6.357 2.931-6.357 6.763 0 3.805 2.885 6.763 6.357 6.763 1.992 0 3.498-.823 4.468-2.186v1.851h2.758V6.857h-2.758zM59.338 17.4c-2.297 0-4.034-1.723-4.034-4.114 0-2.392 1.736-4.115 4.034-4.115s4.034 1.723 4.034 4.115c0 2.391-1.736 4.114-4.034 4.114zM70.723 4.929c.97 0 1.762-.823 1.762-1.775 0-.977-.792-1.774-1.762-1.774s-1.762.797-1.762 1.774c0 .952.792 1.775 1.762 1.775zm-1.379 14.785h2.758V6.857h-2.758v12.857zm5.96 0h2.757V.943h-2.758v18.771zM95.969 6.857l-2.502 8.872-2.655-8.872h-2.63L85.5 15.73l-2.477-8.872h-2.91l4.008 12.857h2.707l2.68-8.665 2.656 8.665h2.706L98.88 6.857h-2.911zm6.32-1.928c.97 0 1.762-.823 1.762-1.775 0-.977-.792-1.774-1.762-1.774s-1.762.797-1.762 1.774c0 .952.792 1.775 1.762 1.775zm-1.379 14.785h2.758V6.857h-2.758v12.857zm12.674-13.191c-1.736 0-3.115.643-3.957 1.98V6.857h-2.758v12.857h2.758v-6.891c0-2.623 1.43-3.703 3.242-3.703 1.737 0 2.86 1.029 2.86 2.983v7.611h2.757V11.82c0-3.343-2.042-5.297-4.902-5.297zm17.982-4.809v6.969c-.971-1.337-2.477-2.16-4.468-2.16-3.473 0-6.358 2.931-6.358 6.763 0 3.805 2.885 6.763 6.358 6.763 1.991 0 3.497-.823 4.468-2.186v1.851h2.757v-18h-2.757zM127.532 17.4c-2.298 0-4.034-1.723-4.034-4.114 0-2.392 1.736-4.115 4.034-4.115 2.297 0 4.034 1.723 4.034 4.115 0 2.391-1.737 4.114-4.034 4.114z"
+                  fill="currentColor"
+                ></path>
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M145.532 3.429h8.511c.902 0 1.768.36 2.407 1.004.638.643.997 1.515.997 2.424v8.572c0 .909-.359 1.781-.997 2.424a3.394 3.394 0 01-2.407 1.004h-8.511a3.39 3.39 0 01-2.407-1.004 3.438 3.438 0 01-.997-2.424V6.857c0-.91.358-1.781.997-2.424a3.39 3.39 0 012.407-1.004zm-5.106 3.428c0-1.364.538-2.672 1.495-3.636a5.09 5.09 0 013.611-1.507h8.511c1.354 0 2.653.542 3.61 1.507a5.16 5.16 0 011.496 3.636v8.572a5.16 5.16 0 01-1.496 3.636 5.086 5.086 0 01-3.61 1.506h-8.511a5.09 5.09 0 01-3.611-1.506 5.164 5.164 0 01-1.495-3.636V6.857zm10.907 6.251c0 1.812-1.359 2.916-3.193 2.916-1.823 0-3.182-1.104-3.182-2.916v-5.65h1.633v5.52c0 .815.429 1.427 1.549 1.427 1.12 0 1.549-.612 1.549-1.428v-5.52h1.644v5.652zm1.72 2.748V7.457h1.644v8.4h-1.644z"
+                  fill="currentColor"
+                ></path>
+              </svg> </a
+            ><a
+              href="https://tailwindcss.com/blog/introducing-catalyst"
+              class="group -my-2 ml-6 hidden items-center gap-2 rounded-full bg-white/25 px-3 py-2 text-xs text-slate-900 ring-1 ring-black/[0.08] ring-inset hover:bg-white/50 hover:ring-black/[0.13] sm:flex md:ml-8 lg:hidden min-[80rem]:flex"
+            >
+              <svg class="size-4 fill-sky-500" viewBox="0 0 24 24">
+                <path
+                  fill-rule="evenodd"
+                  d="M9 4.5a.75.75 0 01.721.544l.813 2.846a3.75 3.75 0 002.576 2.576l2.846.813a.75.75 0 010 1.442l-2.846.813a3.75 3.75 0 00-2.576 2.576l-.813 2.846a.75.75 0 01-1.442 0l-.813-2.846a3.75 3.75 0 00-2.576-2.576l-2.846-.813a.75.75 0 010-1.442l2.846-.813A3.75 3.75 0 007.466 7.89l.813-2.846A.75.75 0 019 4.5zM18 1.5a.75.75 0 01.728.568l.258 1.036c.236.94.97 1.674 1.91 1.91l1.036.258a.75.75 0 010 1.456l-1.036.258c-.94.236-1.674.97-1.91 1.91l-.258 1.036a.75.75 0 01-1.456 0l-.258-1.036a2.625 2.625 0 00-1.91-1.91l-1.036-.258a.75.75 0 010-1.456l1.036-.258a2.625 2.625 0 001.91-1.91l.258-1.036A.75.75 0 0118 1.5zM16.5 15a.75.75 0 01.712.513l.394 1.183c.15.447.5.799.948.948l1.183.395a.75.75 0 010 1.422l-1.183.395c-.447.15-.799.5-.948.948l-.395 1.183a.75.75 0 01-1.422 0l-.395-1.183a1.5 1.5 0 00-.948-.948l-1.183-.395a.75.75 0 010-1.422l1.183-.395c.447-.15.799-.5.948-.948l.395-1.183A.75.75 0 0116.5 15z"
+                  clip-rule="evenodd"
+                ></path>
+              </svg>
+              <span class="font-semibold">Introducing Catalyst</span>
+              <svg
+                width="2"
+                height="2"
+                aria-hidden="true"
+                class="fill-slate-900"
+              >
+                <circle cx="1" cy="1" r="1"></circle>
+              </svg>
+              <span class="font-medium"><span>Our new React UI kit</span></span>
+              <svg
+                viewBox="0 0 5 8"
+                class="h-2 w-[5px] fill-black/30 group-hover:fill-black/60"
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                aria-hidden="true"
+              >
+                <path
+                  d="M.2.24A.75.75 0 0 1 1.26.2l3.5 3.25a.75.75 0 0 1 0 1.1L1.26 7.8A.75.75 0 0 1 .24 6.7L3.148 4 .24 1.3A.75.75 0 0 1 .2.24Z"
+                ></path>
+              </svg>
             </a>
-                <div class="ml-auto hidden lg:flex lg:items-center"><a href="/components">Components</a><a class="ml-8"
-                                                                                                           href="/templates">Templates</a><a
-                    class="ml-8" href="/templates/catalyst">UI Kit</a><a class="ml-8" href="/documentation">Docs</a>
-                </div>
-                <button type="button" class="-my-1 ml-auto flex size-8 items-center justify-center rounded-lg lg:ml-8">
-                    <span class="sr-only">Search components</span>
-                    <svg fill="none" xmlns="http://www.w3.org/2000/svg"
-                         class="size-6 fill-gray-900 hover:fill-gray-900">
-                        <path
-                            d="M20.47 21.53a.75.75 0 1 0 1.06-1.06l-1.06 1.06Zm-9.97-4.28a6.75 6.75 0 0 1-6.75-6.75h-1.5a8.25 8.25 0 0 0 8.25 8.25v-1.5ZM3.75 10.5a6.75 6.75 0 0 1 6.75-6.75v-1.5a8.25 8.25 0 0 0-8.25 8.25h1.5Zm6.75-6.75a6.75 6.75 0 0 1 6.75 6.75h1.5a8.25 8.25 0 0 0-8.25-8.25v1.5Zm11.03 16.72-5.196-5.197-1.061 1.06 5.197 5.197 1.06-1.06Zm-4.28-9.97c0 1.864-.755 3.55-1.977 4.773l1.06 1.06A8.226 8.226 0 0 0 18.75 10.5h-1.5Zm-1.977 4.773A6.727 6.727 0 0 1 10.5 17.25v1.5a8.226 8.226 0 0 0 5.834-2.416l-1.061-1.061Z"></path>
-                    </svg>
-                </button>
-                <button type="button" class="-my-1 -mr-1 ml-6 flex size-8 items-center justify-center lg:hidden"><span
-                    class="sr-only">Open navigation</span>
-                    <svg viewBox="0 0 24 24" class="size-6 stroke-slate-900">
-                        <path d="M3.75 12h16.5M3.75 6.75h16.5M3.75 17.25h16.5" fill="none" stroke-width="1.5"
-                              stroke-linecap="round"></path>
-                    </svg>
-                </button>
-                <div class="hidden lg:ml-8 lg:flex lg:items-center lg:border-l lg:border-slate-900/15 lg:pl-8"><a
-                    href="/login">Sign in</a><a
-                    class="inline-flex justify-center rounded-lg text-sm font-semibold py-2.5 px-4 bg-slate-900 text-white hover:bg-slate-700 -my-2.5 ml-8"
-                    href="/all-access"><span>Get all-access <span aria-hidden="true">→</span></span></a></div>
+            <div class="ml-auto hidden lg:flex lg:items-center">
+              <a href="/components">Components</a
+              ><a class="ml-8" href="/templates">Templates</a
+              ><a class="ml-8" href="/templates/catalyst">UI Kit</a
+              ><a class="ml-8" href="/documentation">Docs</a>
+            </div>
+            <button
+              type="button"
+              class="-my-1 ml-auto flex size-8 items-center justify-center rounded-lg lg:ml-8"
+            >
+              <span class="sr-only">Search components</span>
+              <svg
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-6 fill-gray-900 hover:fill-gray-900"
+              >
+                <path
+                  d="M20.47 21.53a.75.75 0 1 0 1.06-1.06l-1.06 1.06Zm-9.97-4.28a6.75 6.75 0 0 1-6.75-6.75h-1.5a8.25 8.25 0 0 0 8.25 8.25v-1.5ZM3.75 10.5a6.75 6.75 0 0 1 6.75-6.75v-1.5a8.25 8.25 0 0 0-8.25 8.25h1.5Zm6.75-6.75a6.75 6.75 0 0 1 6.75 6.75h1.5a8.25 8.25 0 0 0-8.25-8.25v1.5Zm11.03 16.72-5.196-5.197-1.061 1.06 5.197 5.197 1.06-1.06Zm-4.28-9.97c0 1.864-.755 3.55-1.977 4.773l1.06 1.06A8.226 8.226 0 0 0 18.75 10.5h-1.5Zm-1.977 4.773A6.727 6.727 0 0 1 10.5 17.25v1.5a8.226 8.226 0 0 0 5.834-2.416l-1.061-1.061Z"
+                ></path>
+              </svg>
+            </button>
+            <button
+              type="button"
+              class="-my-1 -mr-1 ml-6 flex size-8 items-center justify-center lg:hidden"
+            >
+              <span class="sr-only">Open navigation</span>
+              <svg viewBox="0 0 24 24" class="size-6 stroke-slate-900">
+                <path
+                  d="M3.75 12h16.5M3.75 6.75h16.5M3.75 17.25h16.5"
+                  fill="none"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                ></path>
+              </svg>
+            </button>
+            <div
+              class="hidden lg:ml-8 lg:flex lg:items-center lg:border-l lg:border-slate-900/15 lg:pl-8"
+            >
+              <a href="/login">Sign in</a
+              ><a
+                class="inline-flex justify-center rounded-lg text-sm font-semibold py-2.5 px-4 bg-slate-900 text-white hover:bg-slate-700 -my-2.5 ml-8"
+                href="/all-access"
+                ><span
+                  >Get all-access <span aria-hidden="true">→</span></span
+                ></a
+              >
             </div>
+          </div>
         </nav>
-    </header>
-    <div class="relative -mt-[5.75rem] overflow-hidden pt-[5.75rem] pb-16"><img src="/plus/img/beams-home@95.jpg" alt=""
-                                                                                class="absolute -top-[1rem] left-1/2 -ml-[40rem] w-[163.125rem] max-w-none sm:-ml-[67.5rem]"/>
+      </header>
+      <div class="relative -mt-[5.75rem] overflow-hidden pt-[5.75rem] pb-16">
+        <img
+          src="/plus/img/beams-home@95.jpg"
+          alt=""
+          class="absolute -top-[1rem] left-1/2 -ml-[40rem] w-[163.125rem] max-w-none sm:-ml-[67.5rem]"
+        />
         <div
-            class="max-w-container relative mx-auto mt-16 grid w-full grid-cols-1 px-4 sm:mt-20 sm:px-6 lg:px-8 xl:mt-32">
-            <div class="col-start-1 row-start-1 h-7 text-base/7 font-semibold text-sky-500" aria-hidden="true">By the
-                makers of Tailwind CSS
-            </div>
-            <h1 class="col-start-1 row-start-2 mt-4 max-w-[36rem] text-4xl font-extrabold tracking-tight text-slate-900 sm:text-7xl xl:max-w-[43.5rem]">
-                Build your next idea even faster.</h1>
-            <p class="col-start-1 row-start-3 mt-4 max-w-lg text-lg text-slate-700">Beautifully designed, expertly
-                crafted components and templates, built by the makers of Tailwind CSS. The perfect starting point for
-                your next project.</p>
-            <div class="col-start-1 row-start-4 mt-10 flex flex-col space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4"><a
-                class="inline-flex justify-center rounded-lg text-sm font-semibold py-3 px-4 bg-slate-900 text-white hover:bg-slate-700"
-                href="/components"><span>Browse components<!-- --> <span aria-hidden="true"
-                                                                         class="hidden text-slate-400 sm:inline">→</span></span></a><a
-                class="inline-flex justify-center rounded-lg text-sm font-semibold py-3 px-4 text-slate-900 ring-1 ring-slate-900/10 hover:bg-white/25 hover:ring-slate-900/15 "
-                href="/templates"><span>Explore templates<!-- --> <span aria-hidden="true"
-                                                                        class="hidden text-black/25 sm:inline">→</span></span></a>
-            </div>
+          class="max-w-container relative mx-auto mt-16 grid w-full grid-cols-1 px-4 sm:mt-20 sm:px-6 lg:px-8 xl:mt-32"
+        >
+          <div
+            class="col-start-1 row-start-1 h-7 text-base/7 font-semibold text-sky-500"
+            aria-hidden="true"
+          >
+            By the makers of Tailwind CSS
+          </div>
+          <h1
+            class="col-start-1 row-start-2 mt-4 max-w-[36rem] text-4xl font-extrabold tracking-tight text-slate-900 sm:text-7xl xl:max-w-[43.5rem]"
+          >
+            Build your next idea even faster.
+          </h1>
+          <p
+            class="col-start-1 row-start-3 mt-4 max-w-lg text-lg text-slate-700"
+          >
+            Beautifully designed, expertly crafted components and templates,
+            built by the makers of Tailwind CSS. The perfect starting point for
+            your next project.
+          </p>
+          <div
+            class="col-start-1 row-start-4 mt-10 flex flex-col space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4"
+          >
+            <a
+              class="inline-flex justify-center rounded-lg text-sm font-semibold py-3 px-4 bg-slate-900 text-white hover:bg-slate-700"
+              href="/components"
+              ><span
+                >Browse components<!-- -->
+                <span aria-hidden="true" class="hidden text-slate-400 sm:inline"
+                  >→</span
+                ></span
+              ></a
+            ><a
+              class="inline-flex justify-center rounded-lg text-sm font-semibold py-3 px-4 text-slate-900 ring-1 ring-slate-900/10 hover:bg-white/25 hover:ring-slate-900/15"
+              href="/templates"
+              ><span
+                >Explore templates<!-- -->
+                <span aria-hidden="true" class="hidden text-black/25 sm:inline"
+                  >→</span
+                ></span
+              ></a
+            >
+          </div>
+          <div
+            class="pointer-events-none col-start-1 row-start-5 flex md:row-span-3 md:row-start-3 lg:row-span-4 lg:row-start-2 xl:row-span-5 xl:row-start-1 xl:justify-end"
+          >
             <div
-                class="pointer-events-none col-start-1 row-start-5 flex md:row-span-3 md:row-start-3 lg:row-span-4 lg:row-start-2 xl:row-span-5 xl:row-start-1 xl:justify-end">
-                <div
-                    class="mt-12 -ml-[32rem] h-[46.375rem] origin-top scale-[calc(204/299)] select-none sm:-mt-20 sm:-ml-[24rem] sm:h-auto sm:scale-none md:mt-10 md:-ml-64 lg:mt-0 lg:-ml-16 xl:-mr-4 xl:ml-0">
-                    <div class="flex justify-end">
-                        <div class="relative flex items-end">
-                            <div
-                                class="absolute -inset-x-8 bottom-0 h-px bg-slate-900/15 [mask-image:linear-gradient(to_right,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
-                            <div class="absolute top-full left-16 -mt-px h-8 overflow-hidden">
-                                <div class="flex -mt-px h-[2px] w-56">
-                                    <div
-                                        class="w-full flex-none [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)] blur-xs"></div>
-                                    <div
-                                        class="-ml-[100%] w-full flex-none [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)] blur-[1px]"></div>
-                                </div>
-                            </div>
-                            <div>
-                                <div class="p-4">
-                                    <div
-                                        class="ml-auto pointer-events-auto h-6 w-10 rounded-full p-1 ring-1 transition duration-200 ease-in-out ring-inset bg-indigo-600 ring-black/20">
-                                        <div
-                                            class="size-4 rounded-full bg-white ring-1 shadow-xs ring-slate-700/10 transition duration-200 ease-in-out translate-x-4"></div>
-                                    </div>
-                                    <div class="mt-8 flex items-center justify-end">
-                                        <div
-                                            class="pointer-events-auto h-6 w-10 rounded-full p-1 ring-1 transition duration-200 ease-in-out ring-inset bg-slate-900/10 ring-slate-900/5">
-                                            <div
-                                                class="size-4 rounded-full bg-white ring-1 shadow-xs ring-slate-700/10 transition duration-200 ease-in-out"></div>
-                                        </div>
-                                        <div
-                                            class="pointer-events-auto ml-8 rounded-md bg-indigo-600 px-3 py-2 text-[0.8125rem]/5 font-semibold text-white hover:bg-indigo-500">
-                                            Button A
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="relative z-10 p-4 text-right">
-                                    <div
-                                        class="absolute -inset-y-8 left-0 w-px bg-slate-900/15 [mask-image:linear-gradient(to_top,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
-                                    <div
-                                        class="absolute -inset-x-8 top-0 h-px bg-slate-900/15 [mask-image:linear-gradient(to_left,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
-                                    <div
-                                        class="absolute inset-0 -right-px bg-linear-to-br from-white/0 via-white/25 to-white/0"></div>
-                                    <div
-                                        class="pointer-events-auto relative inline-flex rounded-md bg-white text-[0.8125rem]/5 font-medium text-slate-700 ring-1 shadow-xs ring-slate-700/10 hover:bg-slate-50 hover:text-slate-900">
-                                        <div class="flex px-3 py-2">
-                                            <svg class="mr-2.5 size-5 flex-none fill-slate-400">
-                                                <path d="M5 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v14l-5-2.5L5 18V4Z"></path>
-                                            </svg>
-                                            Bookmark
-                                        </div>
-                                        <div class="border-l border-slate-400/20 px-2.5 py-2">12k</div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="relative z-10 p-4">
-                                <div
-                                    class="absolute -inset-y-8 right-0 w-px bg-slate-900/15 [mask-image:linear-gradient(to_top,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
-                                <div
-                                    class="absolute -inset-y-8 left-0 w-px bg-slate-900/15 [mask-image:linear-gradient(to_top,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
-                                <div
-                                    class="absolute -inset-x-8 top-0 h-px bg-slate-900/15 [mask-image:linear-gradient(to_left,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
-                                <div class="absolute bottom-full left-40 -mb-px flex h-8 items-end overflow-hidden">
-                                    <div class="flex -mb-px h-[2px] w-56">
-                                        <div
-                                            class="w-full flex-none [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)] blur-xs"></div>
-                                        <div
-                                            class="-ml-[100%] w-full flex-none [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)] blur-[1px]"></div>
-                                    </div>
-                                </div>
-                                <div
-                                    class="w-[24.5rem] divide-y divide-slate-400/20 rounded-lg bg-white text-[0.8125rem]/5 text-slate-900 ring-1 shadow-xl shadow-black/5 ring-slate-700/10">
-                                    <div class="flex items-center p-4"><img src="/plus/img/avatar-1.jpg" alt=""
-                                                                            class="size-10 flex-none rounded-full"/>
-                                        <div class="ml-4 flex-auto">
-                                            <div class="font-medium">Leonard Krasner</div>
-                                            <div class="mt-1 text-slate-700">@leonardkrasner</div>
-                                        </div>
-                                        <div
-                                            class="pointer-events-auto ml-4 flex-none rounded-md px-2 py-[0.3125rem] font-medium text-slate-700 ring-1 shadow-xs ring-slate-700/10 hover:bg-slate-50">
-                                            View
-                                        </div>
-                                    </div>
-                                    <div class="flex items-center p-4"><img src="/plus/img/avatar-2.jpg" alt=""
-                                                                            class="size-10 flex-none rounded-full"/>
-                                        <div class="ml-4 flex-auto">
-                                            <div class="font-medium">Floyd Miles</div>
-                                            <div class="mt-1 text-slate-700">@floydmiles</div>
-                                        </div>
-                                        <div
-                                            class="pointer-events-auto ml-4 flex-none rounded-md px-2 py-[0.3125rem] font-medium text-slate-700 ring-1 shadow-xs ring-slate-700/10 hover:bg-slate-50">
-                                            View
-                                        </div>
-                                    </div>
-                                    <div class="flex items-center p-4"><img src="/plus/img/avatar-3.jpg" alt=""
-                                                                            class="size-10 flex-none rounded-full"/>
-                                        <div class="ml-4 flex-auto">
-                                            <div class="font-medium">Emily Selman</div>
-                                            <div class="mt-1 text-slate-700">@emilyselman</div>
-                                        </div>
-                                        <div
-                                            class="pointer-events-auto ml-4 flex-none rounded-md px-2 py-[0.3125rem] font-medium text-slate-700 ring-1 shadow-xs ring-slate-700/10 hover:bg-slate-50">
-                                            View
-                                        </div>
-                                    </div>
-                                    <div class="p-4">
-                                        <div
-                                            class="pointer-events-auto rounded-md px-4 py-2 text-center font-medium ring-1 shadow-xs ring-slate-700/10 hover:bg-slate-50">
-                                            View all
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
+              class="mt-12 -ml-[32rem] h-[46.375rem] origin-top scale-[calc(204/299)] select-none sm:-mt-20 sm:-ml-[24rem] sm:h-auto sm:scale-none md:mt-10 md:-ml-64 lg:mt-0 lg:-ml-16 xl:-mr-4 xl:ml-0"
+            >
+              <div class="flex justify-end">
+                <div class="relative flex items-end">
+                  <div
+                    class="absolute -inset-x-8 bottom-0 h-px bg-slate-900/15 [mask-image:linear-gradient(to_right,transparent,white_4rem,white_calc(100%-4rem),transparent)]"
+                  ></div>
+                  <div
+                    class="absolute top-full left-16 -mt-px h-8 overflow-hidden"
+                  >
+                    <div class="flex -mt-px h-[2px] w-56">
+                      <div
+                        class="w-full flex-none [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)] blur-xs"
+                      ></div>
+                      <div
+                        class="-ml-[100%] w-full flex-none [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)] blur-[1px]"
+                      ></div>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="p-4">
+                      <div
+                        class="ml-auto pointer-events-auto h-6 w-10 rounded-full p-1 ring-1 transition duration-200 ease-in-out ring-inset bg-indigo-600 ring-black/20"
+                      >
+                        <div
+                          class="size-4 rounded-full bg-white ring-1 shadow-xs ring-slate-700/10 transition duration-200 ease-in-out translate-x-4"
+                        ></div>
+                      </div>
+                      <div class="mt-8 flex items-center justify-end">
+                        <div
+                          class="pointer-events-auto h-6 w-10 rounded-full p-1 ring-1 transition duration-200 ease-in-out ring-inset bg-slate-900/10 ring-slate-900/5"
+                        >
+                          <div
+                            class="size-4 rounded-full bg-white ring-1 shadow-xs ring-slate-700/10 transition duration-200 ease-in-out"
+                          ></div>
+                        </div>
+                        <div
+                          class="pointer-events-auto ml-8 rounded-md bg-indigo-600 px-3 py-2 text-[0.8125rem]/5 font-semibold text-white hover:bg-indigo-500"
+                        >
+                          Button A
                         </div>
+                      </div>
                     </div>
-                    <div class="flex justify-end">
-                        <div class="relative z-10 p-4">
-                            <div
-                                class="flex w-[41rem] rounded-lg bg-white ring-1 shadow-xl shadow-black/5 ring-slate-700/10">
-                                <div class="flex items-center space-x-4 px-6 py-4">
-                                    <svg class="size-6 flex-none" fill="none">
-                                        <path
-                                            d="M6.22 11.03a.75.75 0 1 0 1.06-1.06l-1.06 1.06ZM3 6.75l-.53-.53a.75.75 0 0 0 0 1.06L3 6.75Zm4.28-3.22a.75.75 0 0 0-1.06-1.06l1.06 1.06ZM13.5 18a.75.75 0 0 0 0 1.5V18ZM7.28 9.97 3.53 6.22 2.47 7.28l3.75 3.75 1.06-1.06ZM3.53 7.28l3.75-3.75-1.06-1.06-3.75 3.75 1.06 1.06Zm16.72 5.47c0 2.9-2.35 5.25-5.25 5.25v1.5a6.75 6.75 0 0 0 6.75-6.75h-1.5ZM15 7.5c2.9 0 5.25 2.35 5.25 5.25h1.5A6.75 6.75 0 0 0 15 6v1.5ZM15 6H3v1.5h12V6Zm0 12h-1.5v1.5H15V18Z"
-                                            fill="#64748B"></path>
-                                        <path d="M3 15.75h.75V21" stroke="#64748B" stroke-width="1.5"
-                                              stroke-linecap="round" stroke-linejoin="round"></path>
-                                        <path
-                                            d="M9 16.5A.75.75 0 0 0 9 15v1.5Zm-2.25-.75V15a.75.75 0 0 0-.75.75h.75Zm0 2.25H6c0 .414.336.75.75.75V18Zm0 2.25a.75.75 0 0 0 0 1.5v-1.5ZM9 15H6.75v1.5H9V15Zm-3 .75V18h1.5v-2.25H6Zm.75 3h1.5v-1.5h-1.5v1.5Zm1.5 1.5h-1.5v1.5h1.5v-1.5ZM9 19.5a.75.75 0 0 1-.75.75v1.5a2.25 2.25 0 0 0 2.25-2.25H9Zm-.75-.75a.75.75 0 0 1 .75.75h1.5a2.25 2.25 0 0 0-2.25-2.25v1.5Z"
-                                            fill="#64748B"></path>
-                                    </svg>
-                                    <svg class="size-10 flex-none" fill="none">
-                                        <circle cx="20" cy="20" r="20" fill="#0F172A"></circle>
-                                        <path fill-rule="evenodd" clip-rule="evenodd"
-                                              d="M13.5 13.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L16.28 27.99c-1.25.687-2.779-.217-2.779-1.643V13.653Z"
-                                              fill="#fff"></path>
-                                    </svg>
-                                    <svg class="size-6 flex-none" fill="none">
-                                        <path
-                                            d="M16.72 9.97a.75.75 0 1 0 1.06 1.06l-1.06-1.06ZM21 6.75l.53.53a.75.75 0 0 0 0-1.06l-.53.53Zm-3.22-4.28a.75.75 0 1 0-1.06 1.06l1.06-1.06ZM10.5 19.5a.75.75 0 0 0 0-1.5v1.5Zm3.75-4.5a.75.75 0 0 0 0 1.5V15Zm.75.75h.75A.75.75 0 0 0 15 15v.75ZM14.25 21a.75.75 0 0 0 1.5 0h-1.5Zm6-4.5a.75.75 0 0 0 0-1.5v1.5ZM18 15.75V15a.75.75 0 0 0-.75.75H18ZM18 18h-.75c0 .414.336.75.75.75V18Zm0 2.25a.75.75 0 0 0 0 1.5v-1.5Zm-.22-9.22 3.75-3.75-1.06-1.06-3.75 3.75 1.06 1.06Zm3.75-4.81-3.75-3.75-1.06 1.06 3.75 3.75 1.06-1.06ZM2.25 12.75A6.75 6.75 0 0 0 9 19.5V18a5.25 5.25 0 0 1-5.25-5.25h-1.5ZM9 6a6.75 6.75 0 0 0-6.75 6.75h1.5C3.75 9.85 6.1 7.5 9 7.5V6Zm0 1.5h12V6H9v1.5Zm0 12h1.5V18H9v1.5Zm5.25-3H15V15h-.75v1.5Zm0-.75V21h1.5v-5.25h-1.5Zm6-.75H18v1.5h2.25V15Zm-3 .75V18h1.5v-2.25h-1.5Zm.75 3h1.5v-1.5H18v1.5Zm1.5 1.5H18v1.5h1.5v-1.5Zm.75-.75a.75.75 0 0 1-.75.75v1.5a2.25 2.25 0 0 0 2.25-2.25h-1.5Zm-.75-.75a.75.75 0 0 1 .75.75h1.5a2.25 2.25 0 0 0-2.25-2.25v1.5Z"
-                                            fill="#64748B"></path>
-                                    </svg>
-                                </div>
-                                <div
-                                    class="flex flex-auto items-center border-l border-slate-200/60 pr-4 pl-6 text-[0.8125rem]/5 text-slate-700">
-                                    <div>00:51</div>
-                                    <div class="ml-4 flex flex-auto rounded-full bg-slate-100">
-                                        <div
-                                            class="h-2 w-1/3 flex-none rounded-l-full rounded-r-[1px] bg-indigo-600"></div>
-                                        <div
-                                            class="-my-[0.3125rem] ml-0.5 h-[1.125rem] w-1 rounded-full bg-indigo-600"></div>
-                                    </div>
-                                    <div class="ml-4">55:43</div>
-                                    <svg class="ml-6 size-6 flex-none" fill="none">
-                                        <path d="M14 5 9 9H6a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h3l5 4V5Z" fill="#64748B"
-                                              stroke="#64748B" stroke-width="2" stroke-linecap="round"
-                                              stroke-linejoin="round"></path>
-                                        <path d="M19 12c0-1.5-1-2-1-2v4s1-.5 1-2Z" stroke="#64748B" stroke-width="2"
-                                              stroke-linecap="round" stroke-linejoin="round"></path>
-                                    </svg>
-                                    <svg class="ml-6 size-6 flex-none" fill="none">
-                                        <path
-                                            d="M12 8v1a1 1 0 0 0 1-1h-1Zm0 0h-1a1 1 0 0 0 1 1V8Zm0 0V7a1 1 0 0 0-1 1h1Zm0 0h1a1 1 0 0 0-1-1v1ZM12 12v1a1 1 0 0 0 1-1h-1Zm0 0h-1a1 1 0 0 0 1 1v-1Zm0 0v-1a1 1 0 0 0-1 1h1Zm0 0h1a1 1 0 0 0-1-1v1ZM12 16v1a1 1 0 0 0 1-1h-1Zm0 0h-1a1 1 0 0 0 1 1v-1Zm0 0v-1a1 1 0 0 0-1 1h1Zm0 0h1a1 1 0 0 0-1-1v1Z"
-                                            fill="#64748B"></path>
-                                    </svg>
-                                </div>
-                            </div>
+                    <div class="relative z-10 p-4 text-right">
+                      <div
+                        class="absolute -inset-y-8 left-0 w-px bg-slate-900/15 [mask-image:linear-gradient(to_top,transparent,white_4rem,white_calc(100%-4rem),transparent)]"
+                      ></div>
+                      <div
+                        class="absolute -inset-x-8 top-0 h-px bg-slate-900/15 [mask-image:linear-gradient(to_left,transparent,white_4rem,white_calc(100%-4rem),transparent)]"
+                      ></div>
+                      <div
+                        class="absolute inset-0 -right-px bg-linear-to-br from-white/0 via-white/25 to-white/0"
+                      ></div>
+                      <div
+                        class="pointer-events-auto relative inline-flex rounded-md bg-white text-[0.8125rem]/5 font-medium text-slate-700 ring-1 shadow-xs ring-slate-700/10 hover:bg-slate-50 hover:text-slate-900"
+                      >
+                        <div class="flex px-3 py-2">
+                          <svg class="mr-2.5 size-5 flex-none fill-slate-400">
+                            <path
+                              d="M5 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v14l-5-2.5L5 18V4Z"
+                            ></path>
+                          </svg>
+                          Bookmark
+                        </div>
+                        <div class="border-l border-slate-400/20 px-2.5 py-2">
+                          12k
                         </div>
+                      </div>
                     </div>
-                    <div class="flex items-start justify-end">
-                        <div>
-                            <div class="relative flex items-end justify-end">
-                                <div
-                                    class="absolute -inset-x-8 bottom-0 h-px bg-slate-900/15 [mask-image:linear-gradient(to_left,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
-                                <div>
-                                    <div class="flex justify-end p-4">
-                                        <div
-                                            class="pointer-events-auto flex divide-x divide-slate-400/20 overflow-hidden rounded-md bg-white text-[0.8125rem]/5 font-medium text-slate-700 ring-1 shadow-xs ring-slate-700/10">
-                                            <div class="px-4 py-2 hover:bg-slate-50 hover:text-slate-900">Years</div>
-                                            <div class="px-4 py-2 hover:bg-slate-50 hover:text-slate-900">Months</div>
-                                            <div class="px-4 py-2 hover:bg-slate-50 hover:text-slate-900">Days</div>
-                                        </div>
-                                    </div>
-                                    <div class="relative z-10 p-4">
-                                        <div
-                                            class="absolute -inset-x-8 top-0 h-px bg-slate-900/15 [mask-image:linear-gradient(to_left,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
-                                        <div
-                                            class="absolute -inset-y-8 left-0 w-px bg-slate-900/15 [mask-image:linear-gradient(to_top,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
-                                        <div
-                                            class="absolute -inset-y-8 right-0 w-px bg-slate-900/15 [mask-image:linear-gradient(to_top,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
-                                        <div
-                                            class="absolute bottom-full left-16 -mb-px flex h-8 items-end overflow-hidden">
-                                            <div class="flex -mb-px h-[2px] w-56">
-                                                <div
-                                                    class="w-full flex-none [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)] blur-xs"></div>
-                                                <div
-                                                    class="-ml-[100%] w-full flex-none [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)] blur-[1px]"></div>
-                                            </div>
-                                        </div>
-                                        <div
-                                            class="flex w-[23.5625rem] items-center rounded-md bg-white p-4 ring-1 shadow-xl shadow-black/5 ring-slate-700/10">
-                                            <svg class="size-6 flex-none stroke-slate-500" stroke-width="2"
-                                                 stroke-linecap="round" fill="none">
-                                                <path d="M4 7h16M4 12h16M4 17h16"></path>
-                                            </svg>
-                                            <svg class="ml-6 size-10 flex-none" viewBox="0 0 40 40" fill="none">
-                                                <path fill-rule="evenodd" clip-rule="evenodd"
-                                                      d="M10.8322 6.12083C11.1486 5.56355 11.74 5.21924 12.3808 5.21924H27.1431C27.7322 5.21924 28.2831 5.51055 28.6148 5.99738L37.4718 18.9974C37.8542 19.5587 37.884 20.2887 37.5487 20.8793L30.1679 33.8793C29.8515 34.4366 29.2601 34.7809 28.6192 34.7809L12.3808 34.7809C11.74 34.7809 11.1486 34.4366 10.8322 33.8793L3.45137 20.8793C3.14178 20.334 3.14178 19.6661 3.45137 19.1208L10.8322 6.12083ZM12.3808 10.607L17.7138 20.0001L12.3808 29.3931L7.04787 20.0001L12.3808 10.607ZM15.4397 31.2192L27.5825 31.2192L32.9411 21.7809H20.7984L15.4397 31.2192ZM20.7984 18.2192H32.6319L26.2015 8.78092H15.4397L20.7984 18.2192Z"
-                                                      fill="#38BDF8"></path>
-                                            </svg>
-                                            <div
-                                                class="ml-auto flex size-6 items-center justify-center rounded-md ring-1 shadow-sm ring-slate-900/10">
-                                                <svg class="size-4" viewBox="0 0 16 16" fill="none">
-                                                    <path fill-rule="evenodd" clip-rule="evenodd"
-                                                          d="M7 1C7 0.447715 7.44772 0 8 0C8.55228 0 9 0.447715 9 1V2C9 2.55228 8.55228 3 8 3C7.44772 3 7 2.55228 7 2V1ZM11 8C11 9.65685 9.65685 11 8 11C6.34315 11 5 9.65685 5 8C5 6.34315 6.34315 5 8 5C9.65685 5 11 6.34315 11 8ZM13.6563 2.34285C13.2658 1.95232 12.6326 1.95232 12.2421 2.34285L11.535 3.04996C11.1445 3.44048 11.1445 4.07365 11.535 4.46417C11.9255 4.85469 12.5587 4.85469 12.9492 4.46417L13.6563 3.75706C14.0469 3.36654 14.0469 2.73337 13.6563 2.34285ZM12.242 13.6563L11.5349 12.9492C11.1443 12.5587 11.1443 11.9255 11.5349 11.535C11.9254 11.1445 12.5585 11.1445 12.9491 11.535L13.6562 12.2421C14.0467 12.6326 14.0467 13.2658 13.6562 13.6563C13.2656 14.0468 12.6325 14.0468 12.242 13.6563ZM16 7.99902C16 7.44674 15.5523 6.99902 15 6.99902H14C13.4477 6.99902 13 7.44674 13 7.99902C13 8.55131 13.4477 8.99902 14 8.99902H15C15.5523 8.99902 16 8.55131 16 7.99902ZM7 14C7 13.4477 7.44772 13 8 13C8.55228 13 9 13.4477 9 14V15C9 15.5523 8.55228 16 8 16C7.44772 16 7 15.5523 7 15V14ZM4.46492 11.5352C4.0744 11.1447 3.44123 11.1447 3.05071 11.5352L2.3436 12.2423C1.95307 12.6329 1.95307 13.266 2.3436 13.6566C2.73412 14.0471 3.36729 14.0471 3.75781 13.6566L4.46492 12.9494C4.85544 12.5589 4.85544 11.9258 4.46492 11.5352ZM4.46477 3.04973C4.85529 3.44025 4.85529 4.07342 4.46477 4.46394C4.07424 4.85447 3.44108 4.85447 3.05055 4.46394L2.34345 3.75684C1.95292 3.36631 1.95292 2.73315 2.34345 2.34262C2.73397 1.9521 3.36714 1.9521 3.75766 2.34262L4.46477 3.04973ZM3 8C3 7.44772 2.55228 7 2 7H1C0.447715 7 0 7.44772 0 8C0 8.55228 0.447715 9 1 9H2C2.55228 9 3 8.55228 3 8Z"
-                                                          fill="#38BDF8"></path>
-                                                </svg>
-                                            </div>
-                                            <div class="ml-6 text-[0.8125rem] font-medium text-slate-700">v3.0</div>
-                                            <svg class="ml-2 size-1.5 overflow-visible fill-slate-400 stroke-slate-400">
-                                                <path d="M0 0H6L3 4Z" stroke-width="1" stroke-linejoin="round"></path>
-                                            </svg>
-                                            <svg viewBox="0 0 16 16" class="ml-6 size-6 fill-slate-400">
-                                                <path
-                                                    d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"></path>
-                                            </svg>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="relative z-10 p-4">
-                                    <div class="space-y-4">
-                                        <div
-                                            class="pointer-events-auto w-[21rem] rounded-lg bg-white p-4 text-[0.8125rem]/5 shadow-xl shadow-black/5 hover:bg-slate-50 ring-2 ring-indigo-600">
-                                            <div class="flex justify-between">
-                                                <div class="font-medium text-slate-900">Newsletter</div>
-                                                <svg class="size-5 flex-none" fill="none">
-                                                    <path fill-rule="evenodd" clip-rule="evenodd"
-                                                          d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.707-9.293a1 1 0 0 0-1.414-1.414L9 10.586 7.707 9.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4Z"
-                                                          fill="#4F46E5"></path>
-                                                </svg>
-                                            </div>
-                                            <div class="mt-1 text-slate-700">Last message sent an hour ago</div>
-                                            <div class="mt-6 font-medium text-slate-900">621<!-- --> users</div>
-                                        </div>
-                                        <div
-                                            class="pointer-events-auto w-[21rem] rounded-lg bg-white p-4 text-[0.8125rem]/5 shadow-xl shadow-black/5 hover:bg-slate-50 ring-1 ring-slate-700/10">
-                                            <div class="flex justify-between">
-                                                <div class="font-medium text-slate-900">Existing customers</div>
-                                            </div>
-                                            <div class="mt-1 text-slate-700">Last message sent an hour ago</div>
-                                            <div class="mt-6 font-medium text-slate-900">1200<!-- --> users</div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="flex items-start justify-end">
-                                <div class="relative p-4">
-                                    <div
-                                        class="absolute -inset-y-8 left-0 w-px bg-slate-900/15 [mask-image:linear-gradient(to_top,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
-                                    <div
-                                        class="absolute -inset-x-8 bottom-0 h-px bg-slate-900/15 [mask-image:linear-gradient(to_left,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
-                                    <div
-                                        class="pointer-events-auto w-36 space-y-1 rounded-lg bg-white p-3 text-[0.8125rem]/6 font-medium text-slate-700 ring-1 shadow-xl shadow-black/5 ring-slate-700/10">
-                                        <div class="flex rounded-[10px] p-1 bg-slate-50">
-                                            <div
-                                                class="flex size-6 flex-none items-center justify-center rounded-md bg-white ring-1 shadow-sm ring-slate-900/10">
-                                                <svg class="size-4 fill-slate-400">
-                                                    <path fill-rule="evenodd" clip-rule="evenodd"
-                                                          d="M7 1C7 0.447715 7.44772 0 8 0C8.55228 0 9 0.447715 9 1V2C9 2.55228 8.55228 3 8 3C7.44772 3 7 2.55228 7 2V1ZM11 8C11 9.65685 9.65685 11 8 11C6.34315 11 5 9.65685 5 8C5 6.34315 6.34315 5 8 5C9.65685 5 11 6.34315 11 8ZM13.6563 2.34285C13.2658 1.95232 12.6326 1.95232 12.2421 2.34285L11.535 3.04996C11.1445 3.44048 11.1445 4.07365 11.535 4.46417C11.9255 4.85469 12.5587 4.85469 12.9492 4.46417L13.6563 3.75706C14.0469 3.36654 14.0469 2.73337 13.6563 2.34285ZM12.242 13.6563L11.5349 12.9492C11.1443 12.5587 11.1443 11.9255 11.5349 11.535C11.9254 11.1445 12.5585 11.1445 12.9491 11.535L13.6562 12.2421C14.0467 12.6326 14.0467 13.2658 13.6562 13.6563C13.2656 14.0468 12.6325 14.0468 12.242 13.6563ZM16 7.99902C16 7.44674 15.5523 6.99902 15 6.99902H14C13.4477 6.99902 13 7.44674 13 7.99902C13 8.55131 13.4477 8.99902 14 8.99902H15C15.5523 8.99902 16 8.55131 16 7.99902ZM7 14C7 13.4477 7.44772 13 8 13C8.55228 13 9 13.4477 9 14V15C9 15.5523 8.55228 16 8 16C7.44772 16 7 15.5523 7 15V14ZM4.46492 11.5352C4.0744 11.1447 3.44123 11.1447 3.05071 11.5352L2.3436 12.2423C1.95307 12.6329 1.95307 13.266 2.3436 13.6566C2.73412 14.0471 3.36729 14.0471 3.75781 13.6566L4.46492 12.9494C4.85544 12.5589 4.85544 11.9258 4.46492 11.5352ZM4.46477 3.04973C4.85529 3.44025 4.85529 4.07342 4.46477 4.46394C4.07424 4.85447 3.44108 4.85447 3.05055 4.46394L2.34345 3.75684C1.95292 3.36631 1.95292 2.73315 2.34345 2.34262C2.73397 1.9521 3.36714 1.9521 3.75766 2.34262L4.46477 3.04973ZM3 8C3 7.44772 2.55228 7 2 7H1C0.447715 7 0 7.44772 0 8C0 8.55228 0.447715 9 1 9H2C2.55228 9 3 8.55228 3 8Z"
-                                                          fill="#38BDF8"></path>
-                                                </svg>
-                                            </div>
-                                            <div class="ml-3 text-slate-900">Light</div>
-                                        </div>
-                                        <div class="flex rounded-[10px] p-1">
-                                            <div
-                                                class="flex size-6 flex-none items-center justify-center rounded-md bg-white ring-1 shadow-sm ring-slate-900/10">
-                                                <svg class="size-4 fill-slate-400">
-                                                    <path fill-rule="evenodd" clip-rule="evenodd"
-                                                          d="M7.23 3.333C7.757 2.905 7.68 2 7 2a6 6 0 1 0 0 12c.68 0 .758-.905.23-1.332A5.989 5.989 0 0 1 5 8c0-1.885.87-3.568 2.23-4.668ZM12 5a1 1 0 0 1 1 1 1 1 0 0 0 1 1 1 1 0 1 1 0 2 1 1 0 0 0-1 1 1 1 0 1 1-2 0 1 1 0 0 0-1-1 1 1 0 1 1 0-2 1 1 0 0 0 1-1 1 1 0 0 1 1-1Z"></path>
-                                                </svg>
-                                            </div>
-                                            <div class="ml-3">Dark</div>
-                                        </div>
-                                        <div class="flex rounded-[10px] p-1">
-                                            <div
-                                                class="flex size-6 flex-none items-center justify-center rounded-md bg-white ring-1 shadow-sm ring-slate-900/10">
-                                                <svg class="size-4 fill-slate-400">
-                                                    <path fill-rule="evenodd" clip-rule="evenodd"
-                                                          d="M1 4a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3h-1.5l.31 1.242c.084.333.36.573.63.808.091.08.182.158.264.24A1 1 0 0 1 11 15H5a1 1 0 0 1-.704-1.71c.082-.082.173-.16.264-.24.27-.235.546-.475.63-.808L5.5 11H4a3 3 0 0 1-3-3V4Zm3-1a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H4Z"></path>
-                                                </svg>
-                                            </div>
-                                            <div class="ml-3">System</div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="relative p-4">
-                                    <div
-                                        class="absolute -inset-y-8 right-0 w-px bg-slate-900/15 [mask-image:linear-gradient(to_top,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
-                                    <div
-                                        class="absolute -inset-y-8 left-0 w-px bg-slate-900/15 [mask-image:linear-gradient(to_top,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
-                                    <div
-                                        class="absolute -inset-x-8 bottom-0 h-px bg-slate-900/15 [mask-image:linear-gradient(to_left,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
-                                    <div class="absolute -top-px right-16 h-8 overflow-hidden">
-                                        <div class="flex -mt-px h-[2px] w-56 -scale-x-100">
-                                            <div
-                                                class="w-full flex-none [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)] blur-xs"></div>
-                                            <div
-                                                class="-ml-[100%] w-full flex-none [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)] blur-[1px]"></div>
-                                        </div>
-                                    </div>
-                                    <div class="pointer-events-auto w-[28.125rem] text-[0.8125rem]/5 text-slate-700">
-                                        <div class="font-semibold text-slate-900">Assigned to</div>
-                                        <div
-                                            class="mt-2 flex items-center justify-between rounded-md bg-white px-3 py-2 ring-1 shadow-xs ring-slate-700/10">
-                                            Tom Cook
-                                            <svg class="size-5 flex-none fill-slate-400">
-                                                <path
-                                                    d="M10 3a1 1 0 0 1 .707.293l3 3a1 1 0 0 1-1.414 1.414L10 5.414 7.707 7.707a1 1 0 0 1-1.414-1.414l3-3A1 1 0 0 1 10 3Zm-3.707 9.293a1 1 0 0 1 1.414 0L10 14.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-3 3a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 0-1.414Z"></path>
-                                            </svg>
-                                        </div>
-                                        <div
-                                            class="mt-4 overflow-hidden rounded-md bg-white py-1 ring-1 shadow-xl shadow-black/5 ring-slate-700/10">
-                                            <div class="px-3 py-2 bg-indigo-600 text-white">Wade Cooper</div>
-                                            <div class="px-3 py-2">Arlene Mccoy</div>
-                                            <div class="px-3 py-2">Tom Cook</div>
-                                            <div class="px-3 py-2">Devon Webb</div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
+                  </div>
+                  <div class="relative z-10 p-4">
+                    <div
+                      class="absolute -inset-y-8 right-0 w-px bg-slate-900/15 [mask-image:linear-gradient(to_top,transparent,white_4rem,white_calc(100%-4rem),transparent)]"
+                    ></div>
+                    <div
+                      class="absolute -inset-y-8 left-0 w-px bg-slate-900/15 [mask-image:linear-gradient(to_top,transparent,white_4rem,white_calc(100%-4rem),transparent)]"
+                    ></div>
+                    <div
+                      class="absolute -inset-x-8 top-0 h-px bg-slate-900/15 [mask-image:linear-gradient(to_left,transparent,white_4rem,white_calc(100%-4rem),transparent)]"
+                    ></div>
+                    <div
+                      class="absolute bottom-full left-40 -mb-px flex h-8 items-end overflow-hidden"
+                    >
+                      <div class="flex -mb-px h-[2px] w-56">
+                        <div
+                          class="w-full flex-none [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)] blur-xs"
+                        ></div>
+                        <div
+                          class="-ml-[100%] w-full flex-none [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)] blur-[1px]"
+                        ></div>
+                      </div>
+                    </div>
+                    <div
+                      class="w-[24.5rem] divide-y divide-slate-400/20 rounded-lg bg-white text-[0.8125rem]/5 text-slate-900 ring-1 shadow-xl shadow-black/5 ring-slate-700/10"
+                    >
+                      <div class="flex items-center p-4">
+                        <img
+                          src="/plus/img/avatar-1.jpg"
+                          alt=""
+                          class="size-10 flex-none rounded-full"
+                        />
+                        <div class="ml-4 flex-auto">
+                          <div class="font-medium">Leonard Krasner</div>
+                          <div class="mt-1 text-slate-700">@leonardkrasner</div>
                         </div>
-                        <div>
-                            <div class="relative p-4">
-                                <div
-                                    class="pointer-events-auto w-[25.625rem] rounded-lg bg-white text-[0.8125rem]/5 text-slate-700 ring-1 shadow-xl shadow-black/5 ring-slate-700/10">
-                                    <div class="flex items-center px-3.5 py-2.5 text-slate-400">
-                                        <svg class="mr-2 size-5 stroke-slate-500" fill="none" viewBox="0 0 24 24"
-                                             stroke-width="2">
-                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-                                        </svg>
-                                        Search projects...
-                                    </div>
-                                    <div class="border-t border-slate-400/20 px-3.5 py-3">
-                                        <div class="mb-1.5 text-[0.6875rem] font-semibold text-slate-500">Recent
-                                            searches
-                                        </div>
-                                        <div class="flex items-center rounded-md p-1.5 bg-indigo-600 text-white">
-                                            <svg class="mr-2.5 size-5 flex-none stroke-white" fill="none"
-                                                 viewBox="0 0 24 24" stroke-width="2">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                      d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
-                                            </svg>
-                                            Tailwind Labs / Website Redesign
-                                        </div>
-                                        <div class="flex items-center rounded-md p-1.5">
-                                            <svg class="mr-2.5 size-5 flex-none stroke-slate-400" fill="none"
-                                                 viewBox="0 0 24 24" stroke-width="2">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                      d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
-                                            </svg>
-                                            Laravel LLC / Conference Branding
-                                        </div>
-                                    </div>
-                                    <div class="border-t border-slate-400/20 px-3.5 py-3">
-                                        <div class="flex items-center rounded-md p-1.5">
-                                            <svg class="mr-2.5 size-5 flex-none stroke-slate-400" fill="none"
-                                                 viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round"
-                                                 stroke-linejoin="round">
-                                                <path
-                                                    d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
-                                            </svg>
-                                            Add new file...
-                                        </div>
-                                        <div class="flex items-center rounded-md p-1.5">
-                                            <svg class="mr-2.5 size-5 flex-none stroke-slate-400" fill="none"
-                                                 viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round"
-                                                 stroke-linejoin="round">
-                                                <path
-                                                    d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"></path>
-                                            </svg>
-                                            Add new folder...
-                                        </div>
-                                        <div class="flex items-center rounded-md p-1.5">
-                                            <svg class="mr-2.5 size-5 flex-none stroke-slate-400" fill="none"
-                                                 viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round"
-                                                 stroke-linejoin="round">
-                                                <path d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"></path>
-                                            </svg>
-                                            Add hashtag...
-                                        </div>
-                                        <div class="flex items-center rounded-md p-1.5">
-                                            <svg class="mr-2.5 size-5 flex-none stroke-slate-400" fill="none"
-                                                 viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round"
-                                                 stroke-linejoin="round">
-                                                <path
-                                                    d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
-                                            </svg>
-                                            Add label...
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="relative p-4">
-                                <div
-                                    class="-mr-[4.625rem] w-[30.25rem] rounded-md bg-white p-4 ring-1 shadow-xl shadow-black/5 ring-slate-700/10">
-                                    <div class="text-[0.8125rem]/5 font-semibold text-slate-900">Account</div>
-                                    <div class="mt-2 text-[0.8125rem]/5 text-slate-500">Manage how information is
-                                        displayed on your account.
-                                    </div>
-                                    <div class="mt-4 text-[0.8125rem]/6 text-slate-900">
-                                        <div class="flex items-center border-t border-slate-400/20 py-3"><span
-                                            class="w-2/5 flex-none">Language</span><span class="">English</span><span
-                                            class="pointer-events-auto ml-auto font-medium text-indigo-600 hover:text-indigo-500">Update</span>
-                                        </div>
-                                        <div class="flex items-center border-t border-slate-400/20 py-3"><span
-                                            class="w-2/5 flex-none">Date format</span><span
-                                            class="">DD-MM-YYYY</span><span
-                                            class="ml-auto flex items-center font-medium text-indigo-600"><span
-                                            class="pointer-events-auto hover:text-indigo-500">Update</span><span
-                                            class="mx-3 h-6 w-px bg-slate-400/20"></span><span
-                                            class="pointer-events-auto hover:text-indigo-500">Remove</span></span></div>
-                                        <div class="flex items-center border-t border-slate-400/20 py-3"><span>Automatic timezone</span><span
-                                            class="ml-auto"><div
-                                            class="pointer-events-auto h-6 w-10 rounded-full p-1 ring-1 transition duration-200 ease-in-out ring-inset bg-indigo-600 ring-black/20"><div
-                                            class="size-4 rounded-full bg-white ring-1 shadow-xs ring-slate-700/10 transition duration-200 ease-in-out translate-x-4"></div></div></span>
-                                        </div>
-                                        <div class="flex items-center border-t border-slate-400/20 pt-3"><span>Auto-update applicant data</span><span
-                                            class="ml-auto"><div
-                                            class="pointer-events-auto h-6 w-10 rounded-full p-1 ring-1 transition duration-200 ease-in-out ring-inset bg-slate-900/10 ring-slate-900/5"><div
-                                            class="size-4 rounded-full bg-white ring-1 shadow-xs ring-slate-700/10 transition duration-200 ease-in-out"></div></div></span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
+                        <div
+                          class="pointer-events-auto ml-4 flex-none rounded-md px-2 py-[0.3125rem] font-medium text-slate-700 ring-1 shadow-xs ring-slate-700/10 hover:bg-slate-50"
+                        >
+                          View
+                        </div>
+                      </div>
+                      <div class="flex items-center p-4">
+                        <img
+                          src="/plus/img/avatar-2.jpg"
+                          alt=""
+                          class="size-10 flex-none rounded-full"
+                        />
+                        <div class="ml-4 flex-auto">
+                          <div class="font-medium">Floyd Miles</div>
+                          <div class="mt-1 text-slate-700">@floydmiles</div>
+                        </div>
+                        <div
+                          class="pointer-events-auto ml-4 flex-none rounded-md px-2 py-[0.3125rem] font-medium text-slate-700 ring-1 shadow-xs ring-slate-700/10 hover:bg-slate-50"
+                        >
+                          View
+                        </div>
+                      </div>
+                      <div class="flex items-center p-4">
+                        <img
+                          src="/plus/img/avatar-3.jpg"
+                          alt=""
+                          class="size-10 flex-none rounded-full"
+                        />
+                        <div class="ml-4 flex-auto">
+                          <div class="font-medium">Emily Selman</div>
+                          <div class="mt-1 text-slate-700">@emilyselman</div>
+                        </div>
+                        <div
+                          class="pointer-events-auto ml-4 flex-none rounded-md px-2 py-[0.3125rem] font-medium text-slate-700 ring-1 shadow-xs ring-slate-700/10 hover:bg-slate-50"
+                        >
+                          View
                         </div>
+                      </div>
+                      <div class="p-4">
+                        <div
+                          class="pointer-events-auto rounded-md px-4 py-2 text-center font-medium ring-1 shadow-xs ring-slate-700/10 hover:bg-slate-50"
+                        >
+                          View all
+                        </div>
+                      </div>
                     </div>
+                  </div>
                 </div>
-            </div>
-        </div>
-    </div>
-    <section class="max-w-container mx-auto w-full px-4 sm:px-6 lg:px-8">
-        <div class="max-w-2xl"><h2 class="text-base/7 font-semibold text-indigo-600">Components</h2>
-            <p class="mt-4 text-4xl font-extrabold tracking-tight text-slate-900">Beautifully crafted UI components,
-                ready for your next project.</p></div>
-        <div class="max-w-xl"><p class="mt-4 text-base/7 text-slate-700">Over 500+ professionally designed, fully
-            responsive, expertly crafted component examples you can drop into your Tailwind projects and customize to
-            your heart’s content.</p></div>
-        <div class="mt-6"><a class="text-base font-semibold text-indigo-600 hover:text-indigo-700" href="/components">Browse
-            all components <span aria-hidden="true">→</span></a></div>
-        <button type="button" aria-hidden="true"
-                style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0"></button>
-        <div>
-            <div
-                class="mt-16 flex border-t border-slate-200 sm:space-x-10 md:grid md:grid-cols-3 md:gap-x-8 md:space-x-0"
-                role="tablist" aria-orientation="horizontal">
-                <div>
-                    <div class="relative -mt-px border-t pt-4 pb-6 text-left md:pt-8 md:pb-10 border-indigo-500">
-                        <h3>
-                            <button
-                                class="text-sm/7 font-semibold whitespace-nowrap not-data-focus-visible-added:focus:outline-hidden sm:text-base text-indigo-600"
-                                id="headlessui-tabs-tab-:R5b8r:" role="tab" type="button" aria-selected="true"
-                                tabindex="0" data-headlessui-state="selected" data-selected=""><span
-                                class="absolute inset-0 -top-px"></span>Application UI
-                            </button>
-                        </h3>
-                        <p class="mt-2 hidden text-sm/6 text-slate-700 md:block">Form layouts, tables, modal dialogs —
-                            everything you need to build beautiful responsive web applications.</p></div>
-                </div>
-                <div class="w-10 min-w-[1rem] shrink sm:hidden" aria-hidden="true"></div>
-                <div>
+              </div>
+              <div class="flex justify-end">
+                <div class="relative z-10 p-4">
+                  <div
+                    class="flex w-[41rem] rounded-lg bg-white ring-1 shadow-xl shadow-black/5 ring-slate-700/10"
+                  >
+                    <div class="flex items-center space-x-4 px-6 py-4">
+                      <svg class="size-6 flex-none" fill="none">
+                        <path
+                          d="M6.22 11.03a.75.75 0 1 0 1.06-1.06l-1.06 1.06ZM3 6.75l-.53-.53a.75.75 0 0 0 0 1.06L3 6.75Zm4.28-3.22a.75.75 0 0 0-1.06-1.06l1.06 1.06ZM13.5 18a.75.75 0 0 0 0 1.5V18ZM7.28 9.97 3.53 6.22 2.47 7.28l3.75 3.75 1.06-1.06ZM3.53 7.28l3.75-3.75-1.06-1.06-3.75 3.75 1.06 1.06Zm16.72 5.47c0 2.9-2.35 5.25-5.25 5.25v1.5a6.75 6.75 0 0 0 6.75-6.75h-1.5ZM15 7.5c2.9 0 5.25 2.35 5.25 5.25h1.5A6.75 6.75 0 0 0 15 6v1.5ZM15 6H3v1.5h12V6Zm0 12h-1.5v1.5H15V18Z"
+                          fill="#64748B"
+                        ></path>
+                        <path
+                          d="M3 15.75h.75V21"
+                          stroke="#64748B"
+                          stroke-width="1.5"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        ></path>
+                        <path
+                          d="M9 16.5A.75.75 0 0 0 9 15v1.5Zm-2.25-.75V15a.75.75 0 0 0-.75.75h.75Zm0 2.25H6c0 .414.336.75.75.75V18Zm0 2.25a.75.75 0 0 0 0 1.5v-1.5ZM9 15H6.75v1.5H9V15Zm-3 .75V18h1.5v-2.25H6Zm.75 3h1.5v-1.5h-1.5v1.5Zm1.5 1.5h-1.5v1.5h1.5v-1.5ZM9 19.5a.75.75 0 0 1-.75.75v1.5a2.25 2.25 0 0 0 2.25-2.25H9Zm-.75-.75a.75.75 0 0 1 .75.75h1.5a2.25 2.25 0 0 0-2.25-2.25v1.5Z"
+                          fill="#64748B"
+                        ></path>
+                      </svg>
+                      <svg class="size-10 flex-none" fill="none">
+                        <circle cx="20" cy="20" r="20" fill="#0F172A"></circle>
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M13.5 13.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L16.28 27.99c-1.25.687-2.779-.217-2.779-1.643V13.653Z"
+                          fill="#fff"
+                        ></path>
+                      </svg>
+                      <svg class="size-6 flex-none" fill="none">
+                        <path
+                          d="M16.72 9.97a.75.75 0 1 0 1.06 1.06l-1.06-1.06ZM21 6.75l.53.53a.75.75 0 0 0 0-1.06l-.53.53Zm-3.22-4.28a.75.75 0 1 0-1.06 1.06l1.06-1.06ZM10.5 19.5a.75.75 0 0 0 0-1.5v1.5Zm3.75-4.5a.75.75 0 0 0 0 1.5V15Zm.75.75h.75A.75.75 0 0 0 15 15v.75ZM14.25 21a.75.75 0 0 0 1.5 0h-1.5Zm6-4.5a.75.75 0 0 0 0-1.5v1.5ZM18 15.75V15a.75.75 0 0 0-.75.75H18ZM18 18h-.75c0 .414.336.75.75.75V18Zm0 2.25a.75.75 0 0 0 0 1.5v-1.5Zm-.22-9.22 3.75-3.75-1.06-1.06-3.75 3.75 1.06 1.06Zm3.75-4.81-3.75-3.75-1.06 1.06 3.75 3.75 1.06-1.06ZM2.25 12.75A6.75 6.75 0 0 0 9 19.5V18a5.25 5.25 0 0 1-5.25-5.25h-1.5ZM9 6a6.75 6.75 0 0 0-6.75 6.75h1.5C3.75 9.85 6.1 7.5 9 7.5V6Zm0 1.5h12V6H9v1.5Zm0 12h1.5V18H9v1.5Zm5.25-3H15V15h-.75v1.5Zm0-.75V21h1.5v-5.25h-1.5Zm6-.75H18v1.5h2.25V15Zm-3 .75V18h1.5v-2.25h-1.5Zm.75 3h1.5v-1.5H18v1.5Zm1.5 1.5H18v1.5h1.5v-1.5Zm.75-.75a.75.75 0 0 1-.75.75v1.5a2.25 2.25 0 0 0 2.25-2.25h-1.5Zm-.75-.75a.75.75 0 0 1 .75.75h1.5a2.25 2.25 0 0 0-2.25-2.25v1.5Z"
+                          fill="#64748B"
+                        ></path>
+                      </svg>
+                    </div>
                     <div
-                        class="relative -mt-px border-t pt-4 pb-6 text-left md:pt-8 md:pb-10 border-transparent hover:border-slate-400">
-                        <h3>
-                            <button
-                                class="text-sm/7 font-semibold whitespace-nowrap not-data-focus-visible-added:focus:outline-hidden sm:text-base text-slate-900"
-                                id="headlessui-tabs-tab-:R5j8r:" role="tab" type="button" aria-selected="false"
-                                tabindex="-1" data-headlessui-state=""><span class="absolute inset-0 -top-px"></span>Marketing
-                            </button>
-                        </h3>
-                        <p class="mt-2 hidden text-sm/6 text-slate-700 md:block">Heroes, feature sections, newsletter
-                            sign up forms — everything you need to build beautiful marketing websites.</p></div>
+                      class="flex flex-auto items-center border-l border-slate-200/60 pr-4 pl-6 text-[0.8125rem]/5 text-slate-700"
+                    >
+                      <div>00:51</div>
+                      <div
+                        class="ml-4 flex flex-auto rounded-full bg-slate-100"
+                      >
+                        <div
+                          class="h-2 w-1/3 flex-none rounded-l-full rounded-r-[1px] bg-indigo-600"
+                        ></div>
+                        <div
+                          class="-my-[0.3125rem] ml-0.5 h-[1.125rem] w-1 rounded-full bg-indigo-600"
+                        ></div>
+                      </div>
+                      <div class="ml-4">55:43</div>
+                      <svg class="ml-6 size-6 flex-none" fill="none">
+                        <path
+                          d="M14 5 9 9H6a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h3l5 4V5Z"
+                          fill="#64748B"
+                          stroke="#64748B"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        ></path>
+                        <path
+                          d="M19 12c0-1.5-1-2-1-2v4s1-.5 1-2Z"
+                          stroke="#64748B"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        ></path>
+                      </svg>
+                      <svg class="ml-6 size-6 flex-none" fill="none">
+                        <path
+                          d="M12 8v1a1 1 0 0 0 1-1h-1Zm0 0h-1a1 1 0 0 0 1 1V8Zm0 0V7a1 1 0 0 0-1 1h1Zm0 0h1a1 1 0 0 0-1-1v1ZM12 12v1a1 1 0 0 0 1-1h-1Zm0 0h-1a1 1 0 0 0 1 1v-1Zm0 0v-1a1 1 0 0 0-1 1h1Zm0 0h1a1 1 0 0 0-1-1v1ZM12 16v1a1 1 0 0 0 1-1h-1Zm0 0h-1a1 1 0 0 0 1 1v-1Zm0 0v-1a1 1 0 0 0-1 1h1Zm0 0h1a1 1 0 0 0-1-1v1Z"
+                          fill="#64748B"
+                        ></path>
+                      </svg>
+                    </div>
+                  </div>
                 </div>
-                <div class="w-10 min-w-[1rem] shrink sm:hidden" aria-hidden="true"></div>
+              </div>
+              <div class="flex items-start justify-end">
                 <div>
+                  <div class="relative flex items-end justify-end">
                     <div
-                        class="relative -mt-px border-t pt-4 pb-6 text-left md:pt-8 md:pb-10 border-transparent hover:border-slate-400">
-                        <h3>
-                            <button
-                                class="text-sm/7 font-semibold whitespace-nowrap not-data-focus-visible-added:focus:outline-hidden sm:text-base text-slate-900"
-                                id="headlessui-tabs-tab-:R5r8r:" role="tab" type="button" aria-selected="false"
-                                tabindex="-1" data-headlessui-state=""><span class="absolute inset-0 -top-px"></span>Ecommerce
-                            </button>
-                        </h3>
-                        <p class="mt-2 hidden text-sm/6 text-slate-700 md:block">Checkout forms, shopping carts, product
-                            views — everything you need to build your next ecommerce front-end.</p></div>
-                </div>
-            </div>
-            <div>
-                <div id="headlessui-tabs-panel-:Rd8r:" role="tabpanel" tabindex="0" data-headlessui-state="selected"
-                     data-selected=""><p class="text-sm/6 text-slate-700 md:hidden">Form layouts, tables, modal dialogs
-                    — everything you need to build beautiful responsive web applications.</p>
-                    <div class="relative mt-10 md:mt-0">
-                        <ul class="grid grid-cols-[repeat(auto-fill,minmax(12rem,1fr))] gap-x-8 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-                            <li class="">
-                                <div
-                                    class="group relative before:absolute before:-inset-2.5 before:rounded-[20px] before:bg-gray-50 before:opacity-0 hover:before:opacity-100">
-                                    <div
-                                        class="relative aspect-2/1 overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
-                                        <img src="/plus/img/category-thumbnails/application-ui/stacked.png" alt=""
-                                             class="absolute inset-0 h-full w-full"/></div>
-                                    <h4 class="mt-4 text-sm font-medium text-slate-900 group-hover:text-indigo-600"><a
-                                        href="https://tailwindui.com/components/application-ui/application-shells/stacked"><span
-                                        class="absolute -inset-2.5 z-10"></span><span
-                                        class="relative">Stacked Layouts</span></a></h4>
-                                    <p class="relative mt-1.5 text-xs font-medium text-slate-500">9 components</p></div>
-                            </li>
-                            <li class="">
-                                <div
-                                    class="group relative before:absolute before:-inset-2.5 before:rounded-[20px] before:bg-gray-50 before:opacity-0 hover:before:opacity-100">
-                                    <div
-                                        class="relative aspect-2/1 overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
-                                        <img src="/plus/img/category-thumbnails/application-ui/sidebar.png" alt=""
-                                             class="absolute inset-0 h-full w-full"/></div>
-                                    <h4 class="mt-4 text-sm font-medium text-slate-900 group-hover:text-indigo-600"><a
-                                        href="https://tailwindui.com/components/application-ui/application-shells/sidebar"><span
-                                        class="absolute -inset-2.5 z-10"></span><span
-                                        class="relative">Sidebar Layouts</span></a></h4>
-                                    <p class="relative mt-1.5 text-xs font-medium text-slate-500">8 components</p></div>
-                            </li>
-                            <li class="">
-                                <div
-                                    class="group relative before:absolute before:-inset-2.5 before:rounded-[20px] before:bg-gray-50 before:opacity-0 hover:before:opacity-100">
-                                    <div
-                                        class="relative aspect-2/1 overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
-                                        <img src="/plus/img/category-thumbnails/application-ui/page-headings.png" alt=""
-                                             class="absolute inset-0 h-full w-full"/></div>
-                                    <h4 class="mt-4 text-sm font-medium text-slate-900 group-hover:text-indigo-600"><a
-                                        href="https://tailwindui.com/components/application-ui/headings/page-headings"><span
-                                        class="absolute -inset-2.5 z-10"></span><span
-                                        class="relative">Page Headings</span></a></h4>
-                                    <p class="relative mt-1.5 text-xs font-medium text-slate-500">13 components</p>
-                                </div>
-                            </li>
-                            <li class="">
-                                <div
-                                    class="group relative before:absolute before:-inset-2.5 before:rounded-[20px] before:bg-gray-50 before:opacity-0 hover:before:opacity-100">
-                                    <div
-                                        class="relative aspect-2/1 overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
-                                        <img src="/plus/img/category-thumbnails/application-ui/calendars.png" alt=""
-                                             class="absolute inset-0 h-full w-full"/></div>
-                                    <h4 class="mt-4 text-sm font-medium text-slate-900 group-hover:text-indigo-600"><a
-                                        href="https://tailwindui.com/components/application-ui/data-display/calendars"><span
-                                        class="absolute -inset-2.5 z-10"></span><span class="relative">Calendars</span></a>
-                                    </h4>
-                                    <p class="relative mt-1.5 text-xs font-medium text-slate-500">8 components</p></div>
-                            </li>
-                            <li class="">
-                                <div
-                                    class="group relative before:absolute before:-inset-2.5 before:rounded-[20px] before:bg-gray-50 before:opacity-0 hover:before:opacity-100">
-                                    <div
-                                        class="relative aspect-2/1 overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
-                                        <img src="/plus/img/category-thumbnails/application-ui/tables.png" alt=""
-                                             class="absolute inset-0 h-full w-full"/></div>
-                                    <h4 class="mt-4 text-sm font-medium text-slate-900 group-hover:text-indigo-600"><a
-                                        href="https://tailwindui.com/components/application-ui/lists/tables"><span
-                                        class="absolute -inset-2.5 z-10"></span><span class="relative">Tables</span></a>
-                                    </h4>
-                                    <p class="relative mt-1.5 text-xs font-medium text-slate-500">20 components</p>
-                                </div>
-                            </li>
-                            <li class="">
-                                <div
-                                    class="group relative before:absolute before:-inset-2.5 before:rounded-[20px] before:bg-gray-50 before:opacity-0 hover:before:opacity-100">
-                                    <div
-                                        class="relative aspect-2/1 overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
-                                        <img src="/plus/img/category-thumbnails/application-ui/form-layouts.png" alt=""
-                                             class="absolute inset-0 h-full w-full"/></div>
-                                    <h4 class="mt-4 text-sm font-medium text-slate-900 group-hover:text-indigo-600"><a
-                                        href="https://tailwindui.com/components/application-ui/forms/form-layouts"><span
-                                        class="absolute -inset-2.5 z-10"></span><span
-                                        class="relative">Form Layouts</span></a></h4>
-                                    <p class="relative mt-1.5 text-xs font-medium text-slate-500">5 components</p></div>
-                            </li>
-                            <li class="hidden lg:block">
-                                <div
-                                    class="group relative before:absolute before:-inset-2.5 before:rounded-[20px] before:bg-gray-50 before:opacity-0 hover:before:opacity-100">
-                                    <div
-                                        class="relative aspect-2/1 overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
-                                        <img src="/plus/img/category-thumbnails/application-ui/input-groups.png" alt=""
-                                             class="absolute inset-0 h-full w-full"/></div>
-                                    <h4 class="mt-4 text-sm font-medium text-slate-900 group-hover:text-indigo-600"><a
-                                        href="https://tailwindui.com/components/application-ui/forms/input-groups"><span
-                                        class="absolute -inset-2.5 z-10"></span><span
-                                        class="relative">Input Groups</span></a></h4>
-                                    <p class="relative mt-1.5 text-xs font-medium text-slate-500">21 components</p>
-                                </div>
-                            </li>
-                            <li class="hidden lg:block">
-                                <div
-                                    class="group relative before:absolute before:-inset-2.5 before:rounded-[20px] before:bg-gray-50 before:opacity-0 hover:before:opacity-100">
-                                    <div
-                                        class="relative aspect-2/1 overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
-                                        <img src="/plus/img/category-thumbnails/application-ui/sign-in-forms.png" alt=""
-                                             class="absolute inset-0 h-full w-full"/></div>
-                                    <h4 class="mt-4 text-sm font-medium text-slate-900 group-hover:text-indigo-600"><a
-                                        href="https://tailwindui.com/components/application-ui/forms/sign-in-forms"><span
-                                        class="absolute -inset-2.5 z-10"></span><span class="relative">Sign-in and Registration</span></a>
-                                    </h4>
-                                    <p class="relative mt-1.5 text-xs font-medium text-slate-500">5 components</p></div>
-                            </li>
-                            <li class="hidden lg:block">
-                                <div
-                                    class="group relative before:absolute before:-inset-2.5 before:rounded-[20px] before:bg-gray-50 before:opacity-0 hover:before:opacity-100">
-                                    <div
-                                        class="relative aspect-2/1 overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
-                                        <img src="/plus/img/category-thumbnails/application-ui/pagination.png" alt=""
-                                             class="absolute inset-0 h-full w-full"/></div>
-                                    <h4 class="mt-4 text-sm font-medium text-slate-900 group-hover:text-indigo-600"><a
-                                        href="https://tailwindui.com/components/application-ui/navigation/pagination"><span
-                                        class="absolute -inset-2.5 z-10"></span><span class="relative">Pagination</span></a>
-                                    </h4>
-                                    <p class="relative mt-1.5 text-xs font-medium text-slate-500">3 components</p></div>
-                            </li>
-                            <li class="hidden xl:block">
-                                <div
-                                    class="group relative before:absolute before:-inset-2.5 before:rounded-[20px] before:bg-gray-50 before:opacity-0 hover:before:opacity-100">
-                                    <div
-                                        class="relative aspect-2/1 overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
-                                        <img src="/plus/img/category-thumbnails/application-ui/command-palettes.png"
-                                             alt="" class="absolute inset-0 h-full w-full"/></div>
-                                    <h4 class="mt-4 text-sm font-medium text-slate-900 group-hover:text-indigo-600"><a
-                                        href="https://tailwindui.com/components/application-ui/navigation/command-palettes"><span
-                                        class="absolute -inset-2.5 z-10"></span><span
-                                        class="relative">Command Palettes</span></a></h4>
-                                    <p class="relative mt-1.5 text-xs font-medium text-slate-500">9 components</p></div>
-                            </li>
-                        </ul>
+                      class="absolute -inset-x-8 bottom-0 h-px bg-slate-900/15 [mask-image:linear-gradient(to_left,transparent,white_4rem,white_calc(100%-4rem),transparent)]"
+                    ></div>
+                    <div>
+                      <div class="flex justify-end p-4">
+                        <div
+                          class="pointer-events-auto flex divide-x divide-slate-400/20 overflow-hidden rounded-md bg-white text-[0.8125rem]/5 font-medium text-slate-700 ring-1 shadow-xs ring-slate-700/10"
+                        >
+                          <div
+                            class="px-4 py-2 hover:bg-slate-50 hover:text-slate-900"
+                          >
+                            Years
+                          </div>
+                          <div
+                            class="px-4 py-2 hover:bg-slate-50 hover:text-slate-900"
+                          >
+                            Months
+                          </div>
+                          <div
+                            class="px-4 py-2 hover:bg-slate-50 hover:text-slate-900"
+                          >
+                            Days
+                          </div>
+                        </div>
+                      </div>
+                      <div class="relative z-10 p-4">
+                        <div
+                          class="absolute -inset-x-8 top-0 h-px bg-slate-900/15 [mask-image:linear-gradient(to_left,transparent,white_4rem,white_calc(100%-4rem),transparent)]"
+                        ></div>
+                        <div
+                          class="absolute -inset-y-8 left-0 w-px bg-slate-900/15 [mask-image:linear-gradient(to_top,transparent,white_4rem,white_calc(100%-4rem),transparent)]"
+                        ></div>
+                        <div
+                          class="absolute -inset-y-8 right-0 w-px bg-slate-900/15 [mask-image:linear-gradient(to_top,transparent,white_4rem,white_calc(100%-4rem),transparent)]"
+                        ></div>
+                        <div
+                          class="absolute bottom-full left-16 -mb-px flex h-8 items-end overflow-hidden"
+                        >
+                          <div class="flex -mb-px h-[2px] w-56">
+                            <div
+                              class="w-full flex-none [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)] blur-xs"
+                            ></div>
+                            <div
+                              class="-ml-[100%] w-full flex-none [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)] blur-[1px]"
+                            ></div>
+                          </div>
+                        </div>
+                        <div
+                          class="flex w-[23.5625rem] items-center rounded-md bg-white p-4 ring-1 shadow-xl shadow-black/5 ring-slate-700/10"
+                        >
+                          <svg
+                            class="size-6 flex-none stroke-slate-500"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            fill="none"
+                          >
+                            <path d="M4 7h16M4 12h16M4 17h16"></path>
+                          </svg>
+                          <svg
+                            class="ml-6 size-10 flex-none"
+                            viewBox="0 0 40 40"
+                            fill="none"
+                          >
+                            <path
+                              fill-rule="evenodd"
+                              clip-rule="evenodd"
+                              d="M10.8322 6.12083C11.1486 5.56355 11.74 5.21924 12.3808 5.21924H27.1431C27.7322 5.21924 28.2831 5.51055 28.6148 5.99738L37.4718 18.9974C37.8542 19.5587 37.884 20.2887 37.5487 20.8793L30.1679 33.8793C29.8515 34.4366 29.2601 34.7809 28.6192 34.7809L12.3808 34.7809C11.74 34.7809 11.1486 34.4366 10.8322 33.8793L3.45137 20.8793C3.14178 20.334 3.14178 19.6661 3.45137 19.1208L10.8322 6.12083ZM12.3808 10.607L17.7138 20.0001L12.3808 29.3931L7.04787 20.0001L12.3808 10.607ZM15.4397 31.2192L27.5825 31.2192L32.9411 21.7809H20.7984L15.4397 31.2192ZM20.7984 18.2192H32.6319L26.2015 8.78092H15.4397L20.7984 18.2192Z"
+                              fill="#38BDF8"
+                            ></path>
+                          </svg>
+                          <div
+                            class="ml-auto flex size-6 items-center justify-center rounded-md ring-1 shadow-sm ring-slate-900/10"
+                          >
+                            <svg class="size-4" viewBox="0 0 16 16" fill="none">
+                              <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M7 1C7 0.447715 7.44772 0 8 0C8.55228 0 9 0.447715 9 1V2C9 2.55228 8.55228 3 8 3C7.44772 3 7 2.55228 7 2V1ZM11 8C11 9.65685 9.65685 11 8 11C6.34315 11 5 9.65685 5 8C5 6.34315 6.34315 5 8 5C9.65685 5 11 6.34315 11 8ZM13.6563 2.34285C13.2658 1.95232 12.6326 1.95232 12.2421 2.34285L11.535 3.04996C11.1445 3.44048 11.1445 4.07365 11.535 4.46417C11.9255 4.85469 12.5587 4.85469 12.9492 4.46417L13.6563 3.75706C14.0469 3.36654 14.0469 2.73337 13.6563 2.34285ZM12.242 13.6563L11.5349 12.9492C11.1443 12.5587 11.1443 11.9255 11.5349 11.535C11.9254 11.1445 12.5585 11.1445 12.9491 11.535L13.6562 12.2421C14.0467 12.6326 14.0467 13.2658 13.6562 13.6563C13.2656 14.0468 12.6325 14.0468 12.242 13.6563ZM16 7.99902C16 7.44674 15.5523 6.99902 15 6.99902H14C13.4477 6.99902 13 7.44674 13 7.99902C13 8.55131 13.4477 8.99902 14 8.99902H15C15.5523 8.99902 16 8.55131 16 7.99902ZM7 14C7 13.4477 7.44772 13 8 13C8.55228 13 9 13.4477 9 14V15C9 15.5523 8.55228 16 8 16C7.44772 16 7 15.5523 7 15V14ZM4.46492 11.5352C4.0744 11.1447 3.44123 11.1447 3.05071 11.5352L2.3436 12.2423C1.95307 12.6329 1.95307 13.266 2.3436 13.6566C2.73412 14.0471 3.36729 14.0471 3.75781 13.6566L4.46492 12.9494C4.85544 12.5589 4.85544 11.9258 4.46492 11.5352ZM4.46477 3.04973C4.85529 3.44025 4.85529 4.07342 4.46477 4.46394C4.07424 4.85447 3.44108 4.85447 3.05055 4.46394L2.34345 3.75684C1.95292 3.36631 1.95292 2.73315 2.34345 2.34262C2.73397 1.9521 3.36714 1.9521 3.75766 2.34262L4.46477 3.04973ZM3 8C3 7.44772 2.55228 7 2 7H1C0.447715 7 0 7.44772 0 8C0 8.55228 0.447715 9 1 9H2C2.55228 9 3 8.55228 3 8Z"
+                                fill="#38BDF8"
+                              ></path>
+                            </svg>
+                          </div>
+                          <div
+                            class="ml-6 text-[0.8125rem] font-medium text-slate-700"
+                          >
+                            v3.0
+                          </div>
+                          <svg
+                            class="ml-2 size-1.5 overflow-visible fill-slate-400 stroke-slate-400"
+                          >
+                            <path
+                              d="M0 0H6L3 4Z"
+                              stroke-width="1"
+                              stroke-linejoin="round"
+                            ></path>
+                          </svg>
+                          <svg
+                            viewBox="0 0 16 16"
+                            class="ml-6 size-6 fill-slate-400"
+                          >
+                            <path
+                              d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
+                            ></path>
+                          </svg>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="relative z-10 p-4">
+                      <div class="space-y-4">
                         <div
-                            class="pointer-events-none absolute -inset-x-2.5 -bottom-2.5 h-[16.6%] bg-linear-to-t from-white to-white/25 sm:h-[33.3%]"></div>
+                          class="pointer-events-auto w-[21rem] rounded-lg bg-white p-4 text-[0.8125rem]/5 shadow-xl shadow-black/5 hover:bg-slate-50 ring-2 ring-indigo-600"
+                        >
+                          <div class="flex justify-between">
+                            <div class="font-medium text-slate-900">
+                              Newsletter
+                            </div>
+                            <svg class="size-5 flex-none" fill="none">
+                              <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.707-9.293a1 1 0 0 0-1.414-1.414L9 10.586 7.707 9.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4Z"
+                                fill="#4F46E5"
+                              ></path>
+                            </svg>
+                          </div>
+                          <div class="mt-1 text-slate-700">
+                            Last message sent an hour ago
+                          </div>
+                          <div class="mt-6 font-medium text-slate-900">
+                            621<!-- -->
+                            users
+                          </div>
+                        </div>
+                        <div
+                          class="pointer-events-auto w-[21rem] rounded-lg bg-white p-4 text-[0.8125rem]/5 shadow-xl shadow-black/5 hover:bg-slate-50 ring-1 ring-slate-700/10"
+                        >
+                          <div class="flex justify-between">
+                            <div class="font-medium text-slate-900">
+                              Existing customers
+                            </div>
+                          </div>
+                          <div class="mt-1 text-slate-700">
+                            Last message sent an hour ago
+                          </div>
+                          <div class="mt-6 font-medium text-slate-900">
+                            1200<!-- -->
+                            users
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="flex items-start justify-end">
+                    <div class="relative p-4">
+                      <div
+                        class="absolute -inset-y-8 left-0 w-px bg-slate-900/15 [mask-image:linear-gradient(to_top,transparent,white_4rem,white_calc(100%-4rem),transparent)]"
+                      ></div>
+                      <div
+                        class="absolute -inset-x-8 bottom-0 h-px bg-slate-900/15 [mask-image:linear-gradient(to_left,transparent,white_4rem,white_calc(100%-4rem),transparent)]"
+                      ></div>
+                      <div
+                        class="pointer-events-auto w-36 space-y-1 rounded-lg bg-white p-3 text-[0.8125rem]/6 font-medium text-slate-700 ring-1 shadow-xl shadow-black/5 ring-slate-700/10"
+                      >
+                        <div class="flex rounded-[10px] p-1 bg-slate-50">
+                          <div
+                            class="flex size-6 flex-none items-center justify-center rounded-md bg-white ring-1 shadow-sm ring-slate-900/10"
+                          >
+                            <svg class="size-4 fill-slate-400">
+                              <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M7 1C7 0.447715 7.44772 0 8 0C8.55228 0 9 0.447715 9 1V2C9 2.55228 8.55228 3 8 3C7.44772 3 7 2.55228 7 2V1ZM11 8C11 9.65685 9.65685 11 8 11C6.34315 11 5 9.65685 5 8C5 6.34315 6.34315 5 8 5C9.65685 5 11 6.34315 11 8ZM13.6563 2.34285C13.2658 1.95232 12.6326 1.95232 12.2421 2.34285L11.535 3.04996C11.1445 3.44048 11.1445 4.07365 11.535 4.46417C11.9255 4.85469 12.5587 4.85469 12.9492 4.46417L13.6563 3.75706C14.0469 3.36654 14.0469 2.73337 13.6563 2.34285ZM12.242 13.6563L11.5349 12.9492C11.1443 12.5587 11.1443 11.9255 11.5349 11.535C11.9254 11.1445 12.5585 11.1445 12.9491 11.535L13.6562 12.2421C14.0467 12.6326 14.0467 13.2658 13.6562 13.6563C13.2656 14.0468 12.6325 14.0468 12.242 13.6563ZM16 7.99902C16 7.44674 15.5523 6.99902 15 6.99902H14C13.4477 6.99902 13 7.44674 13 7.99902C13 8.55131 13.4477 8.99902 14 8.99902H15C15.5523 8.99902 16 8.55131 16 7.99902ZM7 14C7 13.4477 7.44772 13 8 13C8.55228 13 9 13.4477 9 14V15C9 15.5523 8.55228 16 8 16C7.44772 16 7 15.5523 7 15V14ZM4.46492 11.5352C4.0744 11.1447 3.44123 11.1447 3.05071 11.5352L2.3436 12.2423C1.95307 12.6329 1.95307 13.266 2.3436 13.6566C2.73412 14.0471 3.36729 14.0471 3.75781 13.6566L4.46492 12.9494C4.85544 12.5589 4.85544 11.9258 4.46492 11.5352ZM4.46477 3.04973C4.85529 3.44025 4.85529 4.07342 4.46477 4.46394C4.07424 4.85447 3.44108 4.85447 3.05055 4.46394L2.34345 3.75684C1.95292 3.36631 1.95292 2.73315 2.34345 2.34262C2.73397 1.9521 3.36714 1.9521 3.75766 2.34262L4.46477 3.04973ZM3 8C3 7.44772 2.55228 7 2 7H1C0.447715 7 0 7.44772 0 8C0 8.55228 0.447715 9 1 9H2C2.55228 9 3 8.55228 3 8Z"
+                                fill="#38BDF8"
+                              ></path>
+                            </svg>
+                          </div>
+                          <div class="ml-3 text-slate-900">Light</div>
+                        </div>
+                        <div class="flex rounded-[10px] p-1">
+                          <div
+                            class="flex size-6 flex-none items-center justify-center rounded-md bg-white ring-1 shadow-sm ring-slate-900/10"
+                          >
+                            <svg class="size-4 fill-slate-400">
+                              <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M7.23 3.333C7.757 2.905 7.68 2 7 2a6 6 0 1 0 0 12c.68 0 .758-.905.23-1.332A5.989 5.989 0 0 1 5 8c0-1.885.87-3.568 2.23-4.668ZM12 5a1 1 0 0 1 1 1 1 1 0 0 0 1 1 1 1 0 1 1 0 2 1 1 0 0 0-1 1 1 1 0 1 1-2 0 1 1 0 0 0-1-1 1 1 0 1 1 0-2 1 1 0 0 0 1-1 1 1 0 0 1 1-1Z"
+                              ></path>
+                            </svg>
+                          </div>
+                          <div class="ml-3">Dark</div>
+                        </div>
+                        <div class="flex rounded-[10px] p-1">
+                          <div
+                            class="flex size-6 flex-none items-center justify-center rounded-md bg-white ring-1 shadow-sm ring-slate-900/10"
+                          >
+                            <svg class="size-4 fill-slate-400">
+                              <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M1 4a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3h-1.5l.31 1.242c.084.333.36.573.63.808.091.08.182.158.264.24A1 1 0 0 1 11 15H5a1 1 0 0 1-.704-1.71c.082-.082.173-.16.264-.24.27-.235.546-.475.63-.808L5.5 11H4a3 3 0 0 1-3-3V4Zm3-1a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H4Z"
+                              ></path>
+                            </svg>
+                          </div>
+                          <div class="ml-3">System</div>
+                        </div>
+                      </div>
                     </div>
-                    <div class="pointer-events-none relative z-10 -mt-5 flex justify-center"><a
-                        class="inline-flex justify-center rounded-lg text-sm font-semibold py-3 px-4 bg-slate-900 text-white hover:bg-slate-700 pointer-events-auto"
-                        href="/components/#product-application-ui"><span>Show more...<span class="sr-only">, Application UI</span></span></a>
+                    <div class="relative p-4">
+                      <div
+                        class="absolute -inset-y-8 right-0 w-px bg-slate-900/15 [mask-image:linear-gradient(to_top,transparent,white_4rem,white_calc(100%-4rem),transparent)]"
+                      ></div>
+                      <div
+                        class="absolute -inset-y-8 left-0 w-px bg-slate-900/15 [mask-image:linear-gradient(to_top,transparent,white_4rem,white_calc(100%-4rem),transparent)]"
+                      ></div>
+                      <div
+                        class="absolute -inset-x-8 bottom-0 h-px bg-slate-900/15 [mask-image:linear-gradient(to_left,transparent,white_4rem,white_calc(100%-4rem),transparent)]"
+                      ></div>
+                      <div
+                        class="absolute -top-px right-16 h-8 overflow-hidden"
+                      >
+                        <div class="flex -mt-px h-[2px] w-56 -scale-x-100">
+                          <div
+                            class="w-full flex-none [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)] blur-xs"
+                          ></div>
+                          <div
+                            class="-ml-[100%] w-full flex-none [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)] blur-[1px]"
+                          ></div>
+                        </div>
+                      </div>
+                      <div
+                        class="pointer-events-auto w-[28.125rem] text-[0.8125rem]/5 text-slate-700"
+                      >
+                        <div class="font-semibold text-slate-900">
+                          Assigned to
+                        </div>
+                        <div
+                          class="mt-2 flex items-center justify-between rounded-md bg-white px-3 py-2 ring-1 shadow-xs ring-slate-700/10"
+                        >
+                          Tom Cook
+                          <svg class="size-5 flex-none fill-slate-400">
+                            <path
+                              d="M10 3a1 1 0 0 1 .707.293l3 3a1 1 0 0 1-1.414 1.414L10 5.414 7.707 7.707a1 1 0 0 1-1.414-1.414l3-3A1 1 0 0 1 10 3Zm-3.707 9.293a1 1 0 0 1 1.414 0L10 14.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-3 3a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 0-1.414Z"
+                            ></path>
+                          </svg>
+                        </div>
+                        <div
+                          class="mt-4 overflow-hidden rounded-md bg-white py-1 ring-1 shadow-xl shadow-black/5 ring-slate-700/10"
+                        >
+                          <div class="px-3 py-2 bg-indigo-600 text-white">
+                            Wade Cooper
+                          </div>
+                          <div class="px-3 py-2">Arlene Mccoy</div>
+                          <div class="px-3 py-2">Tom Cook</div>
+                          <div class="px-3 py-2">Devon Webb</div>
+                        </div>
+                      </div>
                     </div>
+                  </div>
                 </div>
-                <span aria-hidden="true" id="headlessui-tabs-panel-:Rl8r:" role="tabpanel" tabindex="-1"
-                      style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0"></span><span
-                aria-hidden="true" id="headlessui-tabs-panel-:Rt8r:" role="tabpanel" tabindex="-1"
-                style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0"></span>
-            </div>
-        </div>
-    </section>
-    <section class="mt-32 w-full overflow-hidden">
-        <div class="max-w-container mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="max-w-2xl"><h2 class="text-base/7 font-semibold text-sky-500">Templates</h2>
-                <p class="mt-4 text-4xl font-extrabold tracking-tight text-slate-900">Production-ready website
-                    templates, built the way you want them.</p></div>
-            <div class="max-w-xl"><p class="mt-4 text-base/7 text-slate-700">Visually-stunning, easy to customize site
-                templates built with React and Next.js. The perfect starting point for your next project and the
-                ultimate resource for learning how experts build real websites with Tailwind CSS.</p></div>
-            <div class="mt-6"><a class="text-base font-semibold text-sky-500 hover:text-slate-700" href="/templates">Explore
-                all templates <span aria-hidden="true">→</span></a></div>
-            <div class="-mx-4 mt-16 flex overflow-x-auto sm:-mx-6 lg:block">
-                <div class="min-w-full flex-none px-4 sm:px-6">
+                <div>
+                  <div class="relative p-4">
                     <div
-                        class="flex space-x-10 border-t border-slate-200 md:space-x-6 lg:grid lg:grid-cols-4 lg:gap-x-8 lg:space-x-0">
+                      class="pointer-events-auto w-[25.625rem] rounded-lg bg-white text-[0.8125rem]/5 text-slate-700 ring-1 shadow-xl shadow-black/5 ring-slate-700/10"
+                    >
+                      <div
+                        class="flex items-center px-3.5 py-2.5 text-slate-400"
+                      >
+                        <svg
+                          class="mr-2 size-5 stroke-slate-500"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke-width="2"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                          ></path>
+                        </svg>
+                        Search projects...
+                      </div>
+                      <div class="border-t border-slate-400/20 px-3.5 py-3">
                         <div
-                            class="group relative -mt-px flex flex-none flex-col items-start border-t pt-4 pb-6 text-left md:w-[35vw] md:pt-8 md:pb-16 lg:w-auto border-blue-500">
-                            <h3 class="md:mt-4">
-                                <button type="button" class="text-base/7 font-semibold md:text-slate-900 text-blue-600">
-                                    <span class="absolute inset-0 -top-px"></span>Primer
-                                </button>
-                            </h3>
-                            <p class="text-sm/6 text-slate-600 md:order-first md:rounded-full md:px-2 md:text-xs/7 md:font-semibold md:bg-blue-500 md:text-white">
-                                Info product</p>
-                            <p class="mt-2 hidden text-sm/6 text-slate-700 md:block">We’ve actually published four info
-                                products ourselves and this landing page is honestly better than the sites we designed
-                                for all of those.</p></div>
+                          class="mb-1.5 text-[0.6875rem] font-semibold text-slate-500"
+                        >
+                          Recent searches
+                        </div>
                         <div
-                            class="group relative -mt-px flex flex-none flex-col items-start border-t pt-4 pb-6 text-left md:w-[35vw] md:pt-8 md:pb-16 lg:w-auto border-transparent hover:border-slate-400">
-                            <h3 class="md:mt-4">
-                                <button type="button"
-                                        class="text-base/7 font-semibold md:text-slate-900 text-slate-900"><span
-                                    class="absolute inset-0 -top-px"></span>Transmit
-                                </button>
-                            </h3>
-                            <p class="text-sm/6 text-slate-600 md:order-first md:rounded-full md:px-2 md:text-xs/7 md:font-semibold md:bg-slate-100 md:text-slate-500 md:group-hover:bg-slate-200">
-                                Podcast</p>
-                            <p class="mt-2 hidden text-sm/6 text-slate-700 md:block">You’ve ordered your SM7B, boom arm,
-                                and a bunch of acoustic foam. With this template, you can finally stop procrastinating
-                                and record your first episode.</p></div>
+                          class="flex items-center rounded-md p-1.5 bg-indigo-600 text-white"
+                        >
+                          <svg
+                            class="mr-2.5 size-5 flex-none stroke-white"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke-width="2"
+                          >
+                            <path
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+                            ></path>
+                          </svg>
+                          Tailwind Labs / Website Redesign
+                        </div>
+                        <div class="flex items-center rounded-md p-1.5">
+                          <svg
+                            class="mr-2.5 size-5 flex-none stroke-slate-400"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke-width="2"
+                          >
+                            <path
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+                            ></path>
+                          </svg>
+                          Laravel LLC / Conference Branding
+                        </div>
+                      </div>
+                      <div class="border-t border-slate-400/20 px-3.5 py-3">
+                        <div class="flex items-center rounded-md p-1.5">
+                          <svg
+                            class="mr-2.5 size-5 flex-none stroke-slate-400"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          >
+                            <path
+                              d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                            ></path>
+                          </svg>
+                          Add new file...
+                        </div>
+                        <div class="flex items-center rounded-md p-1.5">
+                          <svg
+                            class="mr-2.5 size-5 flex-none stroke-slate-400"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          >
+                            <path
+                              d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"
+                            ></path>
+                          </svg>
+                          Add new folder...
+                        </div>
+                        <div class="flex items-center rounded-md p-1.5">
+                          <svg
+                            class="mr-2.5 size-5 flex-none stroke-slate-400"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          >
+                            <path
+                              d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"
+                            ></path>
+                          </svg>
+                          Add hashtag...
+                        </div>
+                        <div class="flex items-center rounded-md p-1.5">
+                          <svg
+                            class="mr-2.5 size-5 flex-none stroke-slate-400"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          >
+                            <path
+                              d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
+                            ></path>
+                          </svg>
+                          Add label...
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="relative p-4">
+                    <div
+                      class="-mr-[4.625rem] w-[30.25rem] rounded-md bg-white p-4 ring-1 shadow-xl shadow-black/5 ring-slate-700/10"
+                    >
+                      <div
+                        class="text-[0.8125rem]/5 font-semibold text-slate-900"
+                      >
+                        Account
+                      </div>
+                      <div class="mt-2 text-[0.8125rem]/5 text-slate-500">
+                        Manage how information is displayed on your account.
+                      </div>
+                      <div class="mt-4 text-[0.8125rem]/6 text-slate-900">
                         <div
-                            class="group relative -mt-px flex flex-none flex-col items-start border-t pt-4 pb-6 text-left md:w-[35vw] md:pt-8 md:pb-16 lg:w-auto border-transparent hover:border-slate-400">
-                            <h3 class="md:mt-4">
-                                <button type="button"
-                                        class="text-base/7 font-semibold md:text-slate-900 text-slate-900"><span
-                                    class="absolute inset-0 -top-px"></span>Syntax
-                                </button>
-                            </h3>
-                            <p class="text-sm/6 text-slate-600 md:order-first md:rounded-full md:px-2 md:text-xs/7 md:font-semibold md:bg-slate-100 md:text-slate-500 md:group-hover:bg-slate-200">
-                                Documentation</p>
-                            <p class="mt-2 hidden text-sm/6 text-slate-700 md:block">Writing documentation is enough to
-                                make you rip your hair out without worrying about the design. Let us help you keep a few
-                                strands.</p></div>
+                          class="flex items-center border-t border-slate-400/20 py-3"
+                        >
+                          <span class="w-2/5 flex-none">Language</span
+                          ><span class="">English</span
+                          ><span
+                            class="pointer-events-auto ml-auto font-medium text-indigo-600 hover:text-indigo-500"
+                            >Update</span
+                          >
+                        </div>
                         <div
-                            class="group relative -mt-px flex flex-none flex-col items-start border-t pt-4 pb-6 text-left md:w-[35vw] md:pt-8 md:pb-16 lg:w-auto border-transparent hover:border-slate-400">
-                            <h3 class="md:mt-4">
-                                <button type="button"
-                                        class="text-base/7 font-semibold md:text-slate-900 text-slate-900"><span
-                                    class="absolute inset-0 -top-px"></span>Salient
-                                </button>
-                            </h3>
-                            <p class="text-sm/6 text-slate-600 md:order-first md:rounded-full md:px-2 md:text-xs/7 md:font-semibold md:bg-slate-100 md:text-slate-500 md:group-hover:bg-slate-200">
-                                SaaS marketing</p>
-                            <p class="mt-2 hidden text-sm/6 text-slate-700 md:block">Every SaaS marketing site uses the
-                                same formula — a hero, feature sections, some testimonials, you know the drill. But some
-                                are prettier than others.</p></div>
+                          class="flex items-center border-t border-slate-400/20 py-3"
+                        >
+                          <span class="w-2/5 flex-none">Date format</span
+                          ><span class="">DD-MM-YYYY</span
+                          ><span
+                            class="ml-auto flex items-center font-medium text-indigo-600"
+                            ><span
+                              class="pointer-events-auto hover:text-indigo-500"
+                              >Update</span
+                            ><span class="mx-3 h-6 w-px bg-slate-400/20"></span
+                            ><span
+                              class="pointer-events-auto hover:text-indigo-500"
+                              >Remove</span
+                            ></span
+                          >
+                        </div>
+                        <div
+                          class="flex items-center border-t border-slate-400/20 py-3"
+                        >
+                          <span>Automatic timezone</span
+                          ><span class="ml-auto"
+                            ><div
+                              class="pointer-events-auto h-6 w-10 rounded-full p-1 ring-1 transition duration-200 ease-in-out ring-inset bg-indigo-600 ring-black/20"
+                            >
+                              <div
+                                class="size-4 rounded-full bg-white ring-1 shadow-xs ring-slate-700/10 transition duration-200 ease-in-out translate-x-4"
+                              ></div></div
+                          ></span>
+                        </div>
+                        <div
+                          class="flex items-center border-t border-slate-400/20 pt-3"
+                        >
+                          <span>Auto-update applicant data</span
+                          ><span class="ml-auto"
+                            ><div
+                              class="pointer-events-auto h-6 w-10 rounded-full p-1 ring-1 transition duration-200 ease-in-out ring-inset bg-slate-900/10 ring-slate-900/5"
+                            >
+                              <div
+                                class="size-4 rounded-full bg-white ring-1 shadow-xs ring-slate-700/10 transition duration-200 ease-in-out"
+                              ></div></div
+                          ></span>
+                        </div>
+                      </div>
                     </div>
+                  </div>
                 </div>
+              </div>
             </div>
-            <div class="-mx-4 flex transition-transform duration-500" style="transform:translateX(0%)">
-                <div class="w-full flex-none sm:px-4"><p class="px-4 text-sm/6 text-slate-700 sm:px-0 md:hidden">We’ve
-                    actually published four info products ourselves and this landing page is honestly better than the
-                    sites we designed for all of those.</p><img src="/plus/img/templates/primer/preview.png"
-                                                                alt="Screenshot of the Primer template"
-                                                                class="mt-10 aspect-1216/640 sm:rounded-3xl md:mt-0"/>
-                </div>
-                <div class="w-full flex-none sm:px-4"><p class="px-4 text-sm/6 text-slate-700 sm:px-0 md:hidden">You’ve
-                    ordered your SM7B, boom arm, and a bunch of acoustic foam. With this template, you can finally stop
-                    procrastinating and record your first episode.</p><img
-                    src="/plus/img/templates/transmit/preview.png" alt="Screenshot of the Transmit template"
-                    class="mt-10 aspect-1216/640 sm:rounded-3xl md:mt-0"/></div>
-                <div class="w-full flex-none sm:px-4"><p class="px-4 text-sm/6 text-slate-700 sm:px-0 md:hidden">Writing
-                    documentation is enough to make you rip your hair out without worrying about the design. Let us help
-                    you keep a few strands.</p><img src="/plus/img/templates/syntax/preview.png"
-                                                    alt="Screenshot of the Syntax template"
-                                                    class="mt-10 aspect-1216/640 sm:rounded-3xl md:mt-0"/></div>
-                <div class="w-full flex-none sm:px-4"><p class="px-4 text-sm/6 text-slate-700 sm:px-0 md:hidden">Every
-                    SaaS marketing site uses the same formula — a hero, feature sections, some testimonials, you know
-                    the drill. But some are prettier than others.</p><img src="/plus/img/templates/salient/preview.png"
-                                                                          alt="Screenshot of the Salient template"
-                                                                          class="mt-10 aspect-1216/640 sm:rounded-3xl md:mt-0"/>
-                </div>
+          </div>
+        </div>
+      </div>
+      <section class="max-w-container mx-auto w-full px-4 sm:px-6 lg:px-8">
+        <div class="max-w-2xl">
+          <h2 class="text-base/7 font-semibold text-indigo-600">Components</h2>
+          <p class="mt-4 text-4xl font-extrabold tracking-tight text-slate-900">
+            Beautifully crafted UI components, ready for your next project.
+          </p>
+        </div>
+        <div class="max-w-xl">
+          <p class="mt-4 text-base/7 text-slate-700">
+            Over 500+ professionally designed, fully responsive, expertly
+            crafted component examples you can drop into your Tailwind projects
+            and customize to your heart’s content.
+          </p>
+        </div>
+        <div class="mt-6">
+          <a
+            class="text-base font-semibold text-indigo-600 hover:text-indigo-700"
+            href="/components"
+            >Browse all components <span aria-hidden="true">→</span></a
+          >
+        </div>
+        <button
+          type="button"
+          aria-hidden="true"
+          style="
+            position: fixed;
+            top: 1px;
+            left: 1px;
+            width: 1px;
+            height: 0;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            white-space: nowrap;
+            border-width: 0;
+          "
+        ></button>
+        <div>
+          <div
+            class="mt-16 flex border-t border-slate-200 sm:space-x-10 md:grid md:grid-cols-3 md:gap-x-8 md:space-x-0"
+            role="tablist"
+            aria-orientation="horizontal"
+          >
+            <div>
+              <div
+                class="relative -mt-px border-t pt-4 pb-6 text-left md:pt-8 md:pb-10 border-indigo-500"
+              >
+                <h3>
+                  <button
+                    class="text-sm/7 font-semibold whitespace-nowrap not-data-focus-visible-added:focus:outline-hidden sm:text-base text-indigo-600"
+                    id="headlessui-tabs-tab-:R5b8r:"
+                    role="tab"
+                    type="button"
+                    aria-selected="true"
+                    tabindex="0"
+                    data-headlessui-state="selected"
+                    data-selected=""
+                  >
+                    <span class="absolute inset-0 -top-px"></span>Application UI
+                  </button>
+                </h3>
+                <p class="mt-2 hidden text-sm/6 text-slate-700 md:block">
+                  Form layouts, tables, modal dialogs — everything you need to
+                  build beautiful responsive web applications.
+                </p>
+              </div>
+            </div>
+            <div
+              class="w-10 min-w-[1rem] shrink sm:hidden"
+              aria-hidden="true"
+            ></div>
+            <div>
+              <div
+                class="relative -mt-px border-t pt-4 pb-6 text-left md:pt-8 md:pb-10 border-transparent hover:border-slate-400"
+              >
+                <h3>
+                  <button
+                    class="text-sm/7 font-semibold whitespace-nowrap not-data-focus-visible-added:focus:outline-hidden sm:text-base text-slate-900"
+                    id="headlessui-tabs-tab-:R5j8r:"
+                    role="tab"
+                    type="button"
+                    aria-selected="false"
+                    tabindex="-1"
+                    data-headlessui-state=""
+                  >
+                    <span class="absolute inset-0 -top-px"></span>Marketing
+                  </button>
+                </h3>
+                <p class="mt-2 hidden text-sm/6 text-slate-700 md:block">
+                  Heroes, feature sections, newsletter sign up forms —
+                  everything you need to build beautiful marketing websites.
+                </p>
+              </div>
             </div>
+            <div
+              class="w-10 min-w-[1rem] shrink sm:hidden"
+              aria-hidden="true"
+            ></div>
+            <div>
+              <div
+                class="relative -mt-px border-t pt-4 pb-6 text-left md:pt-8 md:pb-10 border-transparent hover:border-slate-400"
+              >
+                <h3>
+                  <button
+                    class="text-sm/7 font-semibold whitespace-nowrap not-data-focus-visible-added:focus:outline-hidden sm:text-base text-slate-900"
+                    id="headlessui-tabs-tab-:R5r8r:"
+                    role="tab"
+                    type="button"
+                    aria-selected="false"
+                    tabindex="-1"
+                    data-headlessui-state=""
+                  >
+                    <span class="absolute inset-0 -top-px"></span>Ecommerce
+                  </button>
+                </h3>
+                <p class="mt-2 hidden text-sm/6 text-slate-700 md:block">
+                  Checkout forms, shopping carts, product views — everything you
+                  need to build your next ecommerce front-end.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div>
+            <div
+              id="headlessui-tabs-panel-:Rd8r:"
+              role="tabpanel"
+              tabindex="0"
+              data-headlessui-state="selected"
+              data-selected=""
+            >
+              <p class="text-sm/6 text-slate-700 md:hidden">
+                Form layouts, tables, modal dialogs — everything you need to
+                build beautiful responsive web applications.
+              </p>
+              <div class="relative mt-10 md:mt-0">
+                <ul
+                  class="grid grid-cols-[repeat(auto-fill,minmax(12rem,1fr))] gap-x-8 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+                >
+                  <li class="">
+                    <div
+                      class="group relative before:absolute before:-inset-2.5 before:rounded-[20px] before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
+                    >
+                      <div
+                        class="relative aspect-2/1 overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10"
+                      >
+                        <img
+                          src="/plus/img/category-thumbnails/application-ui/stacked.png"
+                          alt=""
+                          class="absolute inset-0 h-full w-full"
+                        />
+                      </div>
+                      <h4
+                        class="mt-4 text-sm font-medium text-slate-900 group-hover:text-indigo-600"
+                      >
+                        <a
+                          href="https://tailwindui.com/components/application-ui/application-shells/stacked"
+                          ><span class="absolute -inset-2.5 z-10"></span
+                          ><span class="relative">Stacked Layouts</span></a
+                        >
+                      </h4>
+                      <p
+                        class="relative mt-1.5 text-xs font-medium text-slate-500"
+                      >
+                        9 components
+                      </p>
+                    </div>
+                  </li>
+                  <li class="">
+                    <div
+                      class="group relative before:absolute before:-inset-2.5 before:rounded-[20px] before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
+                    >
+                      <div
+                        class="relative aspect-2/1 overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10"
+                      >
+                        <img
+                          src="/plus/img/category-thumbnails/application-ui/sidebar.png"
+                          alt=""
+                          class="absolute inset-0 h-full w-full"
+                        />
+                      </div>
+                      <h4
+                        class="mt-4 text-sm font-medium text-slate-900 group-hover:text-indigo-600"
+                      >
+                        <a
+                          href="https://tailwindui.com/components/application-ui/application-shells/sidebar"
+                          ><span class="absolute -inset-2.5 z-10"></span
+                          ><span class="relative">Sidebar Layouts</span></a
+                        >
+                      </h4>
+                      <p
+                        class="relative mt-1.5 text-xs font-medium text-slate-500"
+                      >
+                        8 components
+                      </p>
+                    </div>
+                  </li>
+                  <li class="">
+                    <div
+                      class="group relative before:absolute before:-inset-2.5 before:rounded-[20px] before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
+                    >
+                      <div
+                        class="relative aspect-2/1 overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10"
+                      >
+                        <img
+                          src="/plus/img/category-thumbnails/application-ui/page-headings.png"
+                          alt=""
+                          class="absolute inset-0 h-full w-full"
+                        />
+                      </div>
+                      <h4
+                        class="mt-4 text-sm font-medium text-slate-900 group-hover:text-indigo-600"
+                      >
+                        <a
+                          href="https://tailwindui.com/components/application-ui/headings/page-headings"
+                          ><span class="absolute -inset-2.5 z-10"></span
+                          ><span class="relative">Page Headings</span></a
+                        >
+                      </h4>
+                      <p
+                        class="relative mt-1.5 text-xs font-medium text-slate-500"
+                      >
+                        13 components
+                      </p>
+                    </div>
+                  </li>
+                  <li class="">
+                    <div
+                      class="group relative before:absolute before:-inset-2.5 before:rounded-[20px] before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
+                    >
+                      <div
+                        class="relative aspect-2/1 overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10"
+                      >
+                        <img
+                          src="/plus/img/category-thumbnails/application-ui/calendars.png"
+                          alt=""
+                          class="absolute inset-0 h-full w-full"
+                        />
+                      </div>
+                      <h4
+                        class="mt-4 text-sm font-medium text-slate-900 group-hover:text-indigo-600"
+                      >
+                        <a
+                          href="https://tailwindui.com/components/application-ui/data-display/calendars"
+                          ><span class="absolute -inset-2.5 z-10"></span
+                          ><span class="relative">Calendars</span></a
+                        >
+                      </h4>
+                      <p
+                        class="relative mt-1.5 text-xs font-medium text-slate-500"
+                      >
+                        8 components
+                      </p>
+                    </div>
+                  </li>
+                  <li class="">
+                    <div
+                      class="group relative before:absolute before:-inset-2.5 before:rounded-[20px] before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
+                    >
+                      <div
+                        class="relative aspect-2/1 overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10"
+                      >
+                        <img
+                          src="/plus/img/category-thumbnails/application-ui/tables.png"
+                          alt=""
+                          class="absolute inset-0 h-full w-full"
+                        />
+                      </div>
+                      <h4
+                        class="mt-4 text-sm font-medium text-slate-900 group-hover:text-indigo-600"
+                      >
+                        <a
+                          href="https://tailwindui.com/components/application-ui/lists/tables"
+                          ><span class="absolute -inset-2.5 z-10"></span
+                          ><span class="relative">Tables</span></a
+                        >
+                      </h4>
+                      <p
+                        class="relative mt-1.5 text-xs font-medium text-slate-500"
+                      >
+                        20 components
+                      </p>
+                    </div>
+                  </li>
+                  <li class="">
+                    <div
+                      class="group relative before:absolute before:-inset-2.5 before:rounded-[20px] before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
+                    >
+                      <div
+                        class="relative aspect-2/1 overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10"
+                      >
+                        <img
+                          src="/plus/img/category-thumbnails/application-ui/form-layouts.png"
+                          alt=""
+                          class="absolute inset-0 h-full w-full"
+                        />
+                      </div>
+                      <h4
+                        class="mt-4 text-sm font-medium text-slate-900 group-hover:text-indigo-600"
+                      >
+                        <a
+                          href="https://tailwindui.com/components/application-ui/forms/form-layouts"
+                          ><span class="absolute -inset-2.5 z-10"></span
+                          ><span class="relative">Form Layouts</span></a
+                        >
+                      </h4>
+                      <p
+                        class="relative mt-1.5 text-xs font-medium text-slate-500"
+                      >
+                        5 components
+                      </p>
+                    </div>
+                  </li>
+                  <li class="hidden lg:block">
+                    <div
+                      class="group relative before:absolute before:-inset-2.5 before:rounded-[20px] before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
+                    >
+                      <div
+                        class="relative aspect-2/1 overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10"
+                      >
+                        <img
+                          src="/plus/img/category-thumbnails/application-ui/input-groups.png"
+                          alt=""
+                          class="absolute inset-0 h-full w-full"
+                        />
+                      </div>
+                      <h4
+                        class="mt-4 text-sm font-medium text-slate-900 group-hover:text-indigo-600"
+                      >
+                        <a
+                          href="https://tailwindui.com/components/application-ui/forms/input-groups"
+                          ><span class="absolute -inset-2.5 z-10"></span
+                          ><span class="relative">Input Groups</span></a
+                        >
+                      </h4>
+                      <p
+                        class="relative mt-1.5 text-xs font-medium text-slate-500"
+                      >
+                        21 components
+                      </p>
+                    </div>
+                  </li>
+                  <li class="hidden lg:block">
+                    <div
+                      class="group relative before:absolute before:-inset-2.5 before:rounded-[20px] before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
+                    >
+                      <div
+                        class="relative aspect-2/1 overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10"
+                      >
+                        <img
+                          src="/plus/img/category-thumbnails/application-ui/sign-in-forms.png"
+                          alt=""
+                          class="absolute inset-0 h-full w-full"
+                        />
+                      </div>
+                      <h4
+                        class="mt-4 text-sm font-medium text-slate-900 group-hover:text-indigo-600"
+                      >
+                        <a
+                          href="https://tailwindui.com/components/application-ui/forms/sign-in-forms"
+                          ><span class="absolute -inset-2.5 z-10"></span
+                          ><span class="relative"
+                            >Sign-in and Registration</span
+                          ></a
+                        >
+                      </h4>
+                      <p
+                        class="relative mt-1.5 text-xs font-medium text-slate-500"
+                      >
+                        5 components
+                      </p>
+                    </div>
+                  </li>
+                  <li class="hidden lg:block">
+                    <div
+                      class="group relative before:absolute before:-inset-2.5 before:rounded-[20px] before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
+                    >
+                      <div
+                        class="relative aspect-2/1 overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10"
+                      >
+                        <img
+                          src="/plus/img/category-thumbnails/application-ui/pagination.png"
+                          alt=""
+                          class="absolute inset-0 h-full w-full"
+                        />
+                      </div>
+                      <h4
+                        class="mt-4 text-sm font-medium text-slate-900 group-hover:text-indigo-600"
+                      >
+                        <a
+                          href="https://tailwindui.com/components/application-ui/navigation/pagination"
+                          ><span class="absolute -inset-2.5 z-10"></span
+                          ><span class="relative">Pagination</span></a
+                        >
+                      </h4>
+                      <p
+                        class="relative mt-1.5 text-xs font-medium text-slate-500"
+                      >
+                        3 components
+                      </p>
+                    </div>
+                  </li>
+                  <li class="hidden xl:block">
+                    <div
+                      class="group relative before:absolute before:-inset-2.5 before:rounded-[20px] before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
+                    >
+                      <div
+                        class="relative aspect-2/1 overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10"
+                      >
+                        <img
+                          src="/plus/img/category-thumbnails/application-ui/command-palettes.png"
+                          alt=""
+                          class="absolute inset-0 h-full w-full"
+                        />
+                      </div>
+                      <h4
+                        class="mt-4 text-sm font-medium text-slate-900 group-hover:text-indigo-600"
+                      >
+                        <a
+                          href="https://tailwindui.com/components/application-ui/navigation/command-palettes"
+                          ><span class="absolute -inset-2.5 z-10"></span
+                          ><span class="relative">Command Palettes</span></a
+                        >
+                      </h4>
+                      <p
+                        class="relative mt-1.5 text-xs font-medium text-slate-500"
+                      >
+                        9 components
+                      </p>
+                    </div>
+                  </li>
+                </ul>
+                <div
+                  class="pointer-events-none absolute -inset-x-2.5 -bottom-2.5 h-[16.6%] bg-linear-to-t from-white to-white/25 sm:h-[33.3%]"
+                ></div>
+              </div>
+              <div
+                class="pointer-events-none relative z-10 -mt-5 flex justify-center"
+              >
+                <a
+                  class="inline-flex justify-center rounded-lg text-sm font-semibold py-3 px-4 bg-slate-900 text-white hover:bg-slate-700 pointer-events-auto"
+                  href="/components/#product-application-ui"
+                  ><span
+                    >Show more...<span class="sr-only"
+                      >, Application UI</span
+                    ></span
+                  ></a
+                >
+              </div>
+            </div>
+            <span
+              aria-hidden="true"
+              id="headlessui-tabs-panel-:Rl8r:"
+              role="tabpanel"
+              tabindex="-1"
+              style="
+                position: fixed;
+                top: 1px;
+                left: 1px;
+                width: 1px;
+                height: 0;
+                padding: 0;
+                margin: -1px;
+                overflow: hidden;
+                clip: rect(0, 0, 0, 0);
+                white-space: nowrap;
+                border-width: 0;
+              "
+            ></span
+            ><span
+              aria-hidden="true"
+              id="headlessui-tabs-panel-:Rt8r:"
+              role="tabpanel"
+              tabindex="-1"
+              style="
+                position: fixed;
+                top: 1px;
+                left: 1px;
+                width: 1px;
+                height: 0;
+                padding: 0;
+                margin: -1px;
+                overflow: hidden;
+                clip: rect(0, 0, 0, 0);
+                white-space: nowrap;
+                border-width: 0;
+              "
+            ></span>
+          </div>
         </div>
-    </section>
-    <footer class="max-w-container mx-auto mt-32 w-full px-4 sm:px-6 lg:px-8" aria-labelledby="footer-heading"><h2
-        id="footer-heading" class="sr-only">Footer</h2>
-        <div class="mb-16">
-            <svg class="h-6 text-slate-900" aria-hidden="true" viewBox="0 0 160 24" fill="none">
-                <path
-                    d="M18.724 1.714c-4.538 0-7.376 2.286-8.51 6.857 1.702-2.285 3.687-3.143 5.957-2.57 1.296.325 2.22 1.271 3.245 2.318 1.668 1.706 3.6 3.681 7.819 3.681 4.539 0 7.376-2.286 8.51-6.857-1.701 2.286-3.687 3.143-5.957 2.571-1.294-.325-2.22-1.272-3.245-2.32-1.668-1.705-3.6-3.68-7.819-3.68zM10.214 12c-4.539 0-7.376 2.286-8.51 6.857 1.701-2.286 3.687-3.143 5.957-2.571 1.294.325 2.22 1.272 3.245 2.32 1.668 1.705 3.6 3.68 7.818 3.68 4.54 0 7.377-2.286 8.511-6.857-1.702 2.286-3.688 3.143-5.957 2.571-1.295-.326-2.22-1.272-3.245-2.32-1.669-1.705-3.6-3.68-7.82-3.68z"
-                    class="fill-sky-400"></path>
-                <path
-                    d="M51.285 9.531V6.857h-3.166v-3.6l-2.758.823v2.777h-2.348v2.674h2.348v6.172c0 3.343 1.686 4.526 5.924 4.011V17.22c-2.094.103-3.166.129-3.166-1.517V9.53h3.166zm12.087-2.674v1.826c-.97-1.337-2.476-2.16-4.468-2.16-3.472 0-6.357 2.931-6.357 6.763 0 3.805 2.885 6.763 6.357 6.763 1.992 0 3.498-.823 4.468-2.186v1.851h2.758V6.857h-2.758zM59.338 17.4c-2.297 0-4.034-1.723-4.034-4.114 0-2.392 1.736-4.115 4.034-4.115s4.034 1.723 4.034 4.115c0 2.391-1.736 4.114-4.034 4.114zM70.723 4.929c.97 0 1.762-.823 1.762-1.775 0-.977-.792-1.774-1.762-1.774s-1.762.797-1.762 1.774c0 .952.792 1.775 1.762 1.775zm-1.379 14.785h2.758V6.857h-2.758v12.857zm5.96 0h2.757V.943h-2.758v18.771zM95.969 6.857l-2.502 8.872-2.655-8.872h-2.63L85.5 15.73l-2.477-8.872h-2.91l4.008 12.857h2.707l2.68-8.665 2.656 8.665h2.706L98.88 6.857h-2.911zm6.32-1.928c.97 0 1.762-.823 1.762-1.775 0-.977-.792-1.774-1.762-1.774s-1.762.797-1.762 1.774c0 .952.792 1.775 1.762 1.775zm-1.379 14.785h2.758V6.857h-2.758v12.857zm12.674-13.191c-1.736 0-3.115.643-3.957 1.98V6.857h-2.758v12.857h2.758v-6.891c0-2.623 1.43-3.703 3.242-3.703 1.737 0 2.86 1.029 2.86 2.983v7.611h2.757V11.82c0-3.343-2.042-5.297-4.902-5.297zm17.982-4.809v6.969c-.971-1.337-2.477-2.16-4.468-2.16-3.473 0-6.358 2.931-6.358 6.763 0 3.805 2.885 6.763 6.358 6.763 1.991 0 3.497-.823 4.468-2.186v1.851h2.757v-18h-2.757zM127.532 17.4c-2.298 0-4.034-1.723-4.034-4.114 0-2.392 1.736-4.115 4.034-4.115 2.297 0 4.034 1.723 4.034 4.115 0 2.391-1.737 4.114-4.034 4.114z"
-                    fill="currentColor"></path>
-                <path fill-rule="evenodd" clip-rule="evenodd"
-                      d="M145.532 3.429h8.511c.902 0 1.768.36 2.407 1.004.638.643.997 1.515.997 2.424v8.572c0 .909-.359 1.781-.997 2.424a3.394 3.394 0 01-2.407 1.004h-8.511a3.39 3.39 0 01-2.407-1.004 3.438 3.438 0 01-.997-2.424V6.857c0-.91.358-1.781.997-2.424a3.39 3.39 0 012.407-1.004zm-5.106 3.428c0-1.364.538-2.672 1.495-3.636a5.09 5.09 0 013.611-1.507h8.511c1.354 0 2.653.542 3.61 1.507a5.16 5.16 0 011.496 3.636v8.572a5.16 5.16 0 01-1.496 3.636 5.086 5.086 0 01-3.61 1.506h-8.511a5.09 5.09 0 01-3.611-1.506 5.164 5.164 0 01-1.495-3.636V6.857zm10.907 6.251c0 1.812-1.359 2.916-3.193 2.916-1.823 0-3.182-1.104-3.182-2.916v-5.65h1.633v5.52c0 .815.429 1.427 1.549 1.427 1.12 0 1.549-.612 1.549-1.428v-5.52h1.644v5.652zm1.72 2.748V7.457h1.644v8.4h-1.644z"
-                      fill="currentColor"></path>
-            </svg>
-            <p class="mt-10 max-w-2xl text-sm/6 text-gray-600">Beautifully designed, expertly crafted components and
-                templates, built by the makers of<!-- --> <span class="whitespace-nowrap">Tailwind CSS</span>. The
-                perfect starting point for your next project.</p>
-            <hr class="mt-10 border-t border-gray-100"/>
-            <div class="mt-10 grid grid-cols-2 gap-x-8 gap-y-10 lg:grid-cols-4">
-                <div><h3 class="text-sm/6 font-semibold text-gray-900">Marketing</h3>
-                    <ul role="list" class="mt-4 space-y-4">
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/marketing/sections/heroes">Hero Sections</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/marketing/sections/feature-sections">Feature Sections</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/marketing/sections/pricing">Pricing Sections</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/marketing/sections/header">Header Sections</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/marketing/sections/newsletter-sections">Newsletter Sections</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/marketing/sections/testimonials">Testimonials</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/marketing/sections/team-sections">Team Sections</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/marketing/sections/content-sections">Content Sections</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/marketing/sections/logo-clouds">Logo Clouds</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/marketing/sections/faq-sections">FAQs</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/marketing/sections/footers">Footers</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/marketing/sections/header">Headers</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/marketing/elements/flyout-menus">Flyout Menus</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/marketing/elements/banners">Banners</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components#product-marketing">Browse all <span>→</span></a></li>
-                    </ul>
+      </section>
+      <section class="mt-32 w-full overflow-hidden">
+        <div class="max-w-container mx-auto px-4 sm:px-6 lg:px-8">
+          <div class="max-w-2xl">
+            <h2 class="text-base/7 font-semibold text-sky-500">Templates</h2>
+            <p
+              class="mt-4 text-4xl font-extrabold tracking-tight text-slate-900"
+            >
+              Production-ready website templates, built the way you want them.
+            </p>
+          </div>
+          <div class="max-w-xl">
+            <p class="mt-4 text-base/7 text-slate-700">
+              Visually-stunning, easy to customize site templates built with
+              React and Next.js. The perfect starting point for your next
+              project and the ultimate resource for learning how experts build
+              real websites with Tailwind CSS.
+            </p>
+          </div>
+          <div class="mt-6">
+            <a
+              class="text-base font-semibold text-sky-500 hover:text-slate-700"
+              href="/templates"
+              >Explore all templates <span aria-hidden="true">→</span></a
+            >
+          </div>
+          <div class="-mx-4 mt-16 flex overflow-x-auto sm:-mx-6 lg:block">
+            <div class="min-w-full flex-none px-4 sm:px-6">
+              <div
+                class="flex space-x-10 border-t border-slate-200 md:space-x-6 lg:grid lg:grid-cols-4 lg:gap-x-8 lg:space-x-0"
+              >
+                <div
+                  class="group relative -mt-px flex flex-none flex-col items-start border-t pt-4 pb-6 text-left md:w-[35vw] md:pt-8 md:pb-16 lg:w-auto border-blue-500"
+                >
+                  <h3 class="md:mt-4">
+                    <button
+                      type="button"
+                      class="text-base/7 font-semibold md:text-slate-900 text-blue-600"
+                    >
+                      <span class="absolute inset-0 -top-px"></span>Primer
+                    </button>
+                  </h3>
+                  <p
+                    class="text-sm/6 text-slate-600 md:order-first md:rounded-full md:px-2 md:text-xs/7 md:font-semibold md:bg-blue-500 md:text-white"
+                  >
+                    Info product
+                  </p>
+                  <p class="mt-2 hidden text-sm/6 text-slate-700 md:block">
+                    We’ve actually published four info products ourselves and
+                    this landing page is honestly better than the sites we
+                    designed for all of those.
+                  </p>
                 </div>
-                <div><h3 class="text-sm/6 font-semibold text-gray-900">Application UI</h3>
-                    <ul role="list" class="mt-4 space-y-4">
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/application-ui/lists/tables">Tables</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/application-ui/lists/feeds">Feeds</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/application-ui/forms/form-layouts">Form Layouts</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/application-ui/forms/select-menus">Select Menus</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/application-ui/forms/radio-groups">Radio Groups</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/application-ui/forms/checkboxes">Checkboxes</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/application-ui/forms/comboboxes">Comboboxes</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/application-ui/navigation/navbars">Navbars</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/application-ui/navigation/pagination">Pagination</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/application-ui/navigation/sidebar-navigation">Sidebar Navigation</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/application-ui/navigation/command-palettes">Command Palettes</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/application-ui/overlays/dialogs">Modals</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/application-ui/elements/dropdowns">Dropdowns</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/application-ui/elements/buttons">Buttons</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components#product-application-ui">Browse all <span>→</span></a></li>
-                    </ul>
+                <div
+                  class="group relative -mt-px flex flex-none flex-col items-start border-t pt-4 pb-6 text-left md:w-[35vw] md:pt-8 md:pb-16 lg:w-auto border-transparent hover:border-slate-400"
+                >
+                  <h3 class="md:mt-4">
+                    <button
+                      type="button"
+                      class="text-base/7 font-semibold md:text-slate-900 text-slate-900"
+                    >
+                      <span class="absolute inset-0 -top-px"></span>Transmit
+                    </button>
+                  </h3>
+                  <p
+                    class="text-sm/6 text-slate-600 md:order-first md:rounded-full md:px-2 md:text-xs/7 md:font-semibold md:bg-slate-100 md:text-slate-500 md:group-hover:bg-slate-200"
+                  >
+                    Podcast
+                  </p>
+                  <p class="mt-2 hidden text-sm/6 text-slate-700 md:block">
+                    You’ve ordered your SM7B, boom arm, and a bunch of acoustic
+                    foam. With this template, you can finally stop
+                    procrastinating and record your first episode.
+                  </p>
                 </div>
-                <div><h3 class="text-sm/6 font-semibold text-gray-900">Ecommerce</h3>
-                    <ul role="list" class="mt-4 space-y-4">
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/ecommerce/components/product-overviews">Product Overviews</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/ecommerce/components/product-lists">Product Lists</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/ecommerce/components/category-previews">Category Previews</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/ecommerce/components/shopping-carts">Shopping Carts</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/ecommerce/components/category-filters">Category Filters</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/ecommerce/components/product-quickviews">Product Quickviews</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/ecommerce/components/product-features">Product Features</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/ecommerce/components/store-navigation">Store Navigation</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/ecommerce/components/promo-sections">Promo Sections</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/ecommerce/components/checkout-forms">Checkout Forms</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/ecommerce/components/reviews">Reviews</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/ecommerce/components/order-summaries">Order Summaries</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/ecommerce/components/order-history">Order History</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components/ecommerce/components/incentives">Incentives</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/components#product-ecommerce">Browse all <span>→</span></a></li>
-                    </ul>
+                <div
+                  class="group relative -mt-px flex flex-none flex-col items-start border-t pt-4 pb-6 text-left md:w-[35vw] md:pt-8 md:pb-16 lg:w-auto border-transparent hover:border-slate-400"
+                >
+                  <h3 class="md:mt-4">
+                    <button
+                      type="button"
+                      class="text-base/7 font-semibold md:text-slate-900 text-slate-900"
+                    >
+                      <span class="absolute inset-0 -top-px"></span>Syntax
+                    </button>
+                  </h3>
+                  <p
+                    class="text-sm/6 text-slate-600 md:order-first md:rounded-full md:px-2 md:text-xs/7 md:font-semibold md:bg-slate-100 md:text-slate-500 md:group-hover:bg-slate-200"
+                  >
+                    Documentation
+                  </p>
+                  <p class="mt-2 hidden text-sm/6 text-slate-700 md:block">
+                    Writing documentation is enough to make you rip your hair
+                    out without worrying about the design. Let us help you keep
+                    a few strands.
+                  </p>
                 </div>
-                <div><h3 class="text-sm/6 font-semibold text-gray-900">Templates &amp; UI Kits</h3>
-                    <ul role="list" class="mt-4 space-y-4">
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/templates/catalyst">Catalyst UI Kit</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/templates/spotlight">Personal Website Template</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/templates/salient">Landing Page Template</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/templates/protocol">API Reference Template</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/templates/commit">Changelog Template</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/templates/primer">Info Product Template</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/templates/studio">Agency Template</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/templates/transmit">Podcast Template</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/templates/pocket">App Marketing Template</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/templates/syntax">Documentation Template</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/templates/keynote">Conference Template</a></li>
-                        <li class="group"><a
-                            class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
-                            href="/templates">Browse all <span>→</span></a></li>
-                    </ul>
+                <div
+                  class="group relative -mt-px flex flex-none flex-col items-start border-t pt-4 pb-6 text-left md:w-[35vw] md:pt-8 md:pb-16 lg:w-auto border-transparent hover:border-slate-400"
+                >
+                  <h3 class="md:mt-4">
+                    <button
+                      type="button"
+                      class="text-base/7 font-semibold md:text-slate-900 text-slate-900"
+                    >
+                      <span class="absolute inset-0 -top-px"></span>Salient
+                    </button>
+                  </h3>
+                  <p
+                    class="text-sm/6 text-slate-600 md:order-first md:rounded-full md:px-2 md:text-xs/7 md:font-semibold md:bg-slate-100 md:text-slate-500 md:group-hover:bg-slate-200"
+                  >
+                    SaaS marketing
+                  </p>
+                  <p class="mt-2 hidden text-sm/6 text-slate-700 md:block">
+                    Every SaaS marketing site uses the same formula — a hero,
+                    feature sections, some testimonials, you know the drill. But
+                    some are prettier than others.
+                  </p>
                 </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="-mx-4 flex transition-transform duration-500"
+            style="transform: translateX(0%)"
+          >
+            <div class="w-full flex-none sm:px-4">
+              <p class="px-4 text-sm/6 text-slate-700 sm:px-0 md:hidden">
+                We’ve actually published four info products ourselves and this
+                landing page is honestly better than the sites we designed for
+                all of those.
+              </p>
+              <img
+                src="/plus/img/templates/primer/preview.png"
+                alt="Screenshot of the Primer template"
+                class="mt-10 aspect-1216/640 sm:rounded-3xl md:mt-0"
+              />
             </div>
+            <div class="w-full flex-none sm:px-4">
+              <p class="px-4 text-sm/6 text-slate-700 sm:px-0 md:hidden">
+                You’ve ordered your SM7B, boom arm, and a bunch of acoustic
+                foam. With this template, you can finally stop procrastinating
+                and record your first episode.
+              </p>
+              <img
+                src="/plus/img/templates/transmit/preview.png"
+                alt="Screenshot of the Transmit template"
+                class="mt-10 aspect-1216/640 sm:rounded-3xl md:mt-0"
+              />
+            </div>
+            <div class="w-full flex-none sm:px-4">
+              <p class="px-4 text-sm/6 text-slate-700 sm:px-0 md:hidden">
+                Writing documentation is enough to make you rip your hair out
+                without worrying about the design. Let us help you keep a few
+                strands.
+              </p>
+              <img
+                src="/plus/img/templates/syntax/preview.png"
+                alt="Screenshot of the Syntax template"
+                class="mt-10 aspect-1216/640 sm:rounded-3xl md:mt-0"
+              />
+            </div>
+            <div class="w-full flex-none sm:px-4">
+              <p class="px-4 text-sm/6 text-slate-700 sm:px-0 md:hidden">
+                Every SaaS marketing site uses the same formula — a hero,
+                feature sections, some testimonials, you know the drill. But
+                some are prettier than others.
+              </p>
+              <img
+                src="/plus/img/templates/salient/preview.png"
+                alt="Screenshot of the Salient template"
+                class="mt-10 aspect-1216/640 sm:rounded-3xl md:mt-0"
+              />
+            </div>
+          </div>
         </div>
-        <div class="items-centers grid grid-cols-1 justify-between gap-4 border-t border-gray-100 py-6 md:grid-cols-2">
-            <p class="text-sm/6 text-slate-600 max-md:text-center">© <!-- -->2024<!-- --> Tailwind Labs Inc. All rights
-                reserved.</p>
-            <div
-                class="flex items-center justify-center space-x-4 text-sm/6 font-semibold text-slate-900 md:justify-end">
-                <a href="/privacy-policy">Privacy policy</a>
-                <div class="h-4 w-px bg-slate-200"></div>
-                <a href="/changelog">Changelog</a></div>
+      </section>
+      <footer
+        class="max-w-container mx-auto mt-32 w-full px-4 sm:px-6 lg:px-8"
+        aria-labelledby="footer-heading"
+      >
+        <h2 id="footer-heading" class="sr-only">Footer</h2>
+        <div class="mb-16">
+          <svg
+            class="h-6 text-slate-900"
+            aria-hidden="true"
+            viewBox="0 0 160 24"
+            fill="none"
+          >
+            <path
+              d="M18.724 1.714c-4.538 0-7.376 2.286-8.51 6.857 1.702-2.285 3.687-3.143 5.957-2.57 1.296.325 2.22 1.271 3.245 2.318 1.668 1.706 3.6 3.681 7.819 3.681 4.539 0 7.376-2.286 8.51-6.857-1.701 2.286-3.687 3.143-5.957 2.571-1.294-.325-2.22-1.272-3.245-2.32-1.668-1.705-3.6-3.68-7.819-3.68zM10.214 12c-4.539 0-7.376 2.286-8.51 6.857 1.701-2.286 3.687-3.143 5.957-2.571 1.294.325 2.22 1.272 3.245 2.32 1.668 1.705 3.6 3.68 7.818 3.68 4.54 0 7.377-2.286 8.511-6.857-1.702 2.286-3.688 3.143-5.957 2.571-1.295-.326-2.22-1.272-3.245-2.32-1.669-1.705-3.6-3.68-7.82-3.68z"
+              class="fill-sky-400"
+            ></path>
+            <path
+              d="M51.285 9.531V6.857h-3.166v-3.6l-2.758.823v2.777h-2.348v2.674h2.348v6.172c0 3.343 1.686 4.526 5.924 4.011V17.22c-2.094.103-3.166.129-3.166-1.517V9.53h3.166zm12.087-2.674v1.826c-.97-1.337-2.476-2.16-4.468-2.16-3.472 0-6.357 2.931-6.357 6.763 0 3.805 2.885 6.763 6.357 6.763 1.992 0 3.498-.823 4.468-2.186v1.851h2.758V6.857h-2.758zM59.338 17.4c-2.297 0-4.034-1.723-4.034-4.114 0-2.392 1.736-4.115 4.034-4.115s4.034 1.723 4.034 4.115c0 2.391-1.736 4.114-4.034 4.114zM70.723 4.929c.97 0 1.762-.823 1.762-1.775 0-.977-.792-1.774-1.762-1.774s-1.762.797-1.762 1.774c0 .952.792 1.775 1.762 1.775zm-1.379 14.785h2.758V6.857h-2.758v12.857zm5.96 0h2.757V.943h-2.758v18.771zM95.969 6.857l-2.502 8.872-2.655-8.872h-2.63L85.5 15.73l-2.477-8.872h-2.91l4.008 12.857h2.707l2.68-8.665 2.656 8.665h2.706L98.88 6.857h-2.911zm6.32-1.928c.97 0 1.762-.823 1.762-1.775 0-.977-.792-1.774-1.762-1.774s-1.762.797-1.762 1.774c0 .952.792 1.775 1.762 1.775zm-1.379 14.785h2.758V6.857h-2.758v12.857zm12.674-13.191c-1.736 0-3.115.643-3.957 1.98V6.857h-2.758v12.857h2.758v-6.891c0-2.623 1.43-3.703 3.242-3.703 1.737 0 2.86 1.029 2.86 2.983v7.611h2.757V11.82c0-3.343-2.042-5.297-4.902-5.297zm17.982-4.809v6.969c-.971-1.337-2.477-2.16-4.468-2.16-3.473 0-6.358 2.931-6.358 6.763 0 3.805 2.885 6.763 6.358 6.763 1.991 0 3.497-.823 4.468-2.186v1.851h2.757v-18h-2.757zM127.532 17.4c-2.298 0-4.034-1.723-4.034-4.114 0-2.392 1.736-4.115 4.034-4.115 2.297 0 4.034 1.723 4.034 4.115 0 2.391-1.737 4.114-4.034 4.114z"
+              fill="currentColor"
+            ></path>
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M145.532 3.429h8.511c.902 0 1.768.36 2.407 1.004.638.643.997 1.515.997 2.424v8.572c0 .909-.359 1.781-.997 2.424a3.394 3.394 0 01-2.407 1.004h-8.511a3.39 3.39 0 01-2.407-1.004 3.438 3.438 0 01-.997-2.424V6.857c0-.91.358-1.781.997-2.424a3.39 3.39 0 012.407-1.004zm-5.106 3.428c0-1.364.538-2.672 1.495-3.636a5.09 5.09 0 013.611-1.507h8.511c1.354 0 2.653.542 3.61 1.507a5.16 5.16 0 011.496 3.636v8.572a5.16 5.16 0 01-1.496 3.636 5.086 5.086 0 01-3.61 1.506h-8.511a5.09 5.09 0 01-3.611-1.506 5.164 5.164 0 01-1.495-3.636V6.857zm10.907 6.251c0 1.812-1.359 2.916-3.193 2.916-1.823 0-3.182-1.104-3.182-2.916v-5.65h1.633v5.52c0 .815.429 1.427 1.549 1.427 1.12 0 1.549-.612 1.549-1.428v-5.52h1.644v5.652zm1.72 2.748V7.457h1.644v8.4h-1.644z"
+              fill="currentColor"
+            ></path>
+          </svg>
+          <p class="mt-10 max-w-2xl text-sm/6 text-gray-600">
+            Beautifully designed, expertly crafted components and templates,
+            built by the makers of<!-- -->
+            <span class="whitespace-nowrap">Tailwind CSS</span>. The perfect
+            starting point for your next project.
+          </p>
+          <hr class="mt-10 border-t border-gray-100" />
+          <div class="mt-10 grid grid-cols-2 gap-x-8 gap-y-10 lg:grid-cols-4">
+            <div>
+              <h3 class="text-sm/6 font-semibold text-gray-900">Marketing</h3>
+              <ul role="list" class="mt-4 space-y-4">
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/marketing/sections/heroes"
+                    >Hero Sections</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/marketing/sections/feature-sections"
+                    >Feature Sections</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/marketing/sections/pricing"
+                    >Pricing Sections</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/marketing/sections/header"
+                    >Header Sections</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/marketing/sections/newsletter-sections"
+                    >Newsletter Sections</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/marketing/sections/testimonials"
+                    >Testimonials</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/marketing/sections/team-sections"
+                    >Team Sections</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/marketing/sections/content-sections"
+                    >Content Sections</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/marketing/sections/logo-clouds"
+                    >Logo Clouds</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/marketing/sections/faq-sections"
+                    >FAQs</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/marketing/sections/footers"
+                    >Footers</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/marketing/sections/header"
+                    >Headers</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/marketing/elements/flyout-menus"
+                    >Flyout Menus</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/marketing/elements/banners"
+                    >Banners</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components#product-marketing"
+                    >Browse all <span>→</span></a
+                  >
+                </li>
+              </ul>
+            </div>
+            <div>
+              <h3 class="text-sm/6 font-semibold text-gray-900">
+                Application UI
+              </h3>
+              <ul role="list" class="mt-4 space-y-4">
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/application-ui/lists/tables"
+                    >Tables</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/application-ui/lists/feeds"
+                    >Feeds</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/application-ui/forms/form-layouts"
+                    >Form Layouts</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/application-ui/forms/select-menus"
+                    >Select Menus</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/application-ui/forms/radio-groups"
+                    >Radio Groups</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/application-ui/forms/checkboxes"
+                    >Checkboxes</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/application-ui/forms/comboboxes"
+                    >Comboboxes</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/application-ui/navigation/navbars"
+                    >Navbars</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/application-ui/navigation/pagination"
+                    >Pagination</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/application-ui/navigation/sidebar-navigation"
+                    >Sidebar Navigation</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/application-ui/navigation/command-palettes"
+                    >Command Palettes</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/application-ui/overlays/dialogs"
+                    >Modals</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/application-ui/elements/dropdowns"
+                    >Dropdowns</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/application-ui/elements/buttons"
+                    >Buttons</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components#product-application-ui"
+                    >Browse all <span>→</span></a
+                  >
+                </li>
+              </ul>
+            </div>
+            <div>
+              <h3 class="text-sm/6 font-semibold text-gray-900">Ecommerce</h3>
+              <ul role="list" class="mt-4 space-y-4">
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/ecommerce/components/product-overviews"
+                    >Product Overviews</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/ecommerce/components/product-lists"
+                    >Product Lists</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/ecommerce/components/category-previews"
+                    >Category Previews</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/ecommerce/components/shopping-carts"
+                    >Shopping Carts</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/ecommerce/components/category-filters"
+                    >Category Filters</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/ecommerce/components/product-quickviews"
+                    >Product Quickviews</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/ecommerce/components/product-features"
+                    >Product Features</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/ecommerce/components/store-navigation"
+                    >Store Navigation</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/ecommerce/components/promo-sections"
+                    >Promo Sections</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/ecommerce/components/checkout-forms"
+                    >Checkout Forms</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/ecommerce/components/reviews"
+                    >Reviews</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/ecommerce/components/order-summaries"
+                    >Order Summaries</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/ecommerce/components/order-history"
+                    >Order History</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components/ecommerce/components/incentives"
+                    >Incentives</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/components#product-ecommerce"
+                    >Browse all <span>→</span></a
+                  >
+                </li>
+              </ul>
+            </div>
+            <div>
+              <h3 class="text-sm/6 font-semibold text-gray-900">
+                Templates &amp; UI Kits
+              </h3>
+              <ul role="list" class="mt-4 space-y-4">
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/templates/catalyst"
+                    >Catalyst UI Kit</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/templates/spotlight"
+                    >Personal Website Template</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/templates/salient"
+                    >Landing Page Template</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/templates/protocol"
+                    >API Reference Template</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/templates/commit"
+                    >Changelog Template</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/templates/primer"
+                    >Info Product Template</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/templates/studio"
+                    >Agency Template</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/templates/transmit"
+                    >Podcast Template</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/templates/pocket"
+                    >App Marketing Template</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/templates/syntax"
+                    >Documentation Template</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/templates/keynote"
+                    >Conference Template</a
+                  >
+                </li>
+                <li class="group">
+                  <a
+                    class="text-sm/6 text-gray-600 group-last:text-slate-900 hover:text-gray-900 group-last:[&amp;&gt;span]:inline-block group-last:[&amp;&gt;span]:transition hover:group-last:[&amp;&gt;span]:translate-x-0.5"
+                    href="/templates"
+                    >Browse all <span>→</span></a
+                  >
+                </li>
+              </ul>
+            </div>
+          </div>
         </div>
-    </footer>
-</div>
-</body>
+        <div
+          class="items-centers grid grid-cols-1 justify-between gap-4 border-t border-gray-100 py-6 md:grid-cols-2"
+        >
+          <p class="text-sm/6 text-slate-600 max-md:text-center">
+            ©
+            <!-- -->2024<!-- -->
+            Tailwind Labs Inc. All rights reserved.
+          </p>
+          <div
+            class="flex items-center justify-center space-x-4 text-sm/6 font-semibold text-slate-900 md:justify-end"
+          >
+            <a href="/privacy-policy">Privacy policy</a>
+            <div class="h-4 w-px bg-slate-200"></div>
+            <a href="/changelog">Changelog</a>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </body>
 </html>
diff --git a/tsconfig.json b/tsconfig.json
index 62fc78f..9f7f611 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,10 +3,7 @@
     "target": "ES2021",
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
-    "lib": [
-      "ES2021",
-      "DOM"
-    ],
+    "lib": ["ES2021", "DOM"],
     "strict": true,
     "declaration": true,
     "noUnusedLocals": true