Tailwind CSS Pricing Tables Blocks

All Blocks
Marketing
Pricing Tables

Pricing Tables

Tailwind CSS pricing table blocks for plan comparisons, feature matrices, and side-by-side subscription plan checks.

Plan Feature Comparison Table Pro

Feature rows run down the page while plan columns stay aligned for side-by-side checks.

Create a responsive UI block named "Plan Feature Comparison Table" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/marketing/pricing-tables/#plan-feature-comparison-table. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.

Source metadata:
- Catalog family: marketing/pricing-tables
- Block ID: plan-feature-comparison-table
- Source description: Feature rows run down the page while plan columns stay aligned for side-by-side checks.
- Preview iframe: https://preline.co/blocks/marketing/pricing-tables/iframes/pro/plan-feature-comparison-table.html (repo path: blocks/marketing/pricing-tables/iframes/pro/plan-feature-comparison-table.html)
- Source markup reference:
  - partials/pro/saas-startup/layouts-components/pricing-compare-plan-features.html

Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.

Block-specific fidelity rules:
- Preserve the source marketing hierarchy, first-viewport signal, media subject, CTA order, proof/social elements, visual rhythm, and responsive composition.
- Do not convert distinctive hero/marketing visuals into a generic split card layout or invent decorative media that is not present in the source.
- Preserve row/list density, column meaning, trailing metadata/action gutters, truncation mechanics, sorting/filter controls, pagination, status icons, and empty/loading states.
- Text columns should truncate before reserved metadata/action lanes rather than wrapping under them or reaching the row edge.
- Source content inventory (from the source markup):
  - Centered heading `Compare plan features` (`font-semibold text-3xl`) inside a `max-w-2xl mx-auto text-center` wrapper; no subtitle and no billing toggle.
  - Desktop-only sticky header (`hidden lg:block sticky top-16 inset-s-0 py-2 bg-background border-b border-layer-line`) using `grid grid-cols-6 gap-6`: a `col-span-2` `Features` label, then `Free` / `Free forever`, `Startup` / `$39 per month billed annually`, `Team` / `$89 per month billed annually`, `Enterprise` / `$149 per month billed annually`.
  - 21 `<ul class="grid lg:grid-cols-6 lg:gap-6">` rows: 4 section headings `General`, `Financial data`, `On-chain data`, `Social data`, plus 17 feature rows in this exact order - `Number of seats`, `Storage`, `Email sharing`, `Any time, anywhere access`, `Open/High/Low/Close`, `Price-volume difference indicator`, `Network growth`, `Average token age consumed`, `Exchange flow`, `Total ERC20 exchange funds flow`, `Transaction volume`, `Total circulation (beta)`, `Velocity of tokens (beta)`, `ETH gas used`, `Dev activity`, `Topic search`, `Relative social dominance`.
  - Only two rows carry text values: `Number of seats` = `1` / `Up to 3` / `Up to 10` / `Unlimited`, and `Storage` = `15 GB` / `1 TB` / `15 TB` / `Unlimited`; all 15 other feature rows show icons only.
  - Included cells use a 24-viewBox check polyline at `shrink-0 size-5 text-primary`; excluded cells use a single horizontal dash (`M5 12h14`) at `shrink-0 size-5 text-foreground`. Every value cell carries `border-b border-line-2` as the row rule.
  - Below `lg` each value cell is `grid grid-cols-2 md:grid-cols-6 lg:block` with an `lg:hidden` repeated plan label (`Free`, `Startup`, `Team`, `Enterprise`); there is no `<table>` element and no horizontal scroll wrapper - the matrix is nested `ul`/`li` grids.
  - A desktop-only footer row (`hidden lg:block mt-6`, `grid grid-cols-6 gap-6`) repeats 4 `Get started` links after the empty `col-span-2` gutter: the Free one is the outline/layer style, the Startup, Team, and Enterprise ones are primary with `shadow-md`.
  - Fully static: every control is an `<a href="#">`; no Preline JS plugin, tabs, accordion, or interactive state is present.

Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.

Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.

Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.

Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.

<div class="relative">
                      <div class="mb-8 max-w-2xl mx-auto text-center">
                        <h2 class="font-semibold text-3xl text-foreground">
                          Compare plan features
                        </h2>
                      </div>

<div class="hidden lg:block sticky top-16 inset-s-0 py-2 bg-background border-b border-layer-line">
                        
                        <div class="grid grid-cols-6 gap-6">
                          <div class="col-span-2 pb-4">
                            <span class="font-semibold text-lg text-foreground">
                              Features
                            </span>
                          </div>

<div class="col-span-1 pb-4">
                            <span class="font-semibold text-lg text-foreground">
                              Free
                            </span>
                            <p class="mt-2 text-sm text-muted-foreground-1">
                              Free forever
                            </p>
                          </div>

<div class="col-span-1 pb-4">
                            <span class="font-semibold text-lg text-foreground">
                              Startup
                            </span>
                            <p class="mt-2 text-sm text-muted-foreground-1">
                              $39 per month billed annually
                            </p>
                          </div>

<div class="col-span-1 pb-4">
                            <span class="font-semibold text-lg text-foreground">
                              Team
                            </span>
                            <p class="mt-2 text-sm text-muted-foreground-1">
                              $89 per month billed annually
                            </p>
                          </div>

<div class="col-span-1 pb-4">
                            <span class="font-semibold text-lg text-foreground">
                              Enterprise
                            </span>
                            <p class="mt-2 text-sm text-muted-foreground-1">
                              $149 per month billed annually
                            </p>
                          </div>
                          
                        </div>
                        
                      </div>

<div class="mt-6 space-y-4 lg:space-y-0">
                        
                        <ul class="grid lg:grid-cols-6 lg:gap-6">
                          
                          <li class="lg:col-span-2 lg:py-3">
                            <span class="text-lg font-semibold text-foreground">
                              General
                            </span>
                          </li>

<li class="hidden lg:block lg:col-span-1 py-1.5 lg:py-3 px-4 lg:px-0 lg:text-center">
                          </li>

<li class="hidden lg:block lg:col-span-1 py-1.5 lg:py-3 px-4 lg:px-0 lg:text-center">
                          </li>
                          
                        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
                          
                          <li class="lg:col-span-2 pb-1.5 lg:py-3">
                            <span class="font-semibold lg:font-normal text-sm text-foreground">
                              Number of seats
                            </span>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Enterprise
                              </span>
                              <span class="text-sm text-foreground">
                                Unlimited
                              </span>
                            </div>
                          </li>
                          
                        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
                          
                          <li class="lg:col-span-2 pb-1.5 lg:py-3">
                            <span class="font-semibold lg:font-normal text-sm text-foreground">
                              Storage
                            </span>
                          </li>

<ul class="grid lg:grid-cols-6 lg:gap-6">
                          
                          <li class="lg:col-span-2 pb-1.5 lg:py-3">
                            <span class="font-semibold lg:font-normal text-sm text-foreground">
                              Email sharing
                            </span>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Free
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Startup
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Team
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Enterprise
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>
                          
                        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
                          
                          <li class="lg:col-span-2 pb-1.5 lg:py-3">
                            <span class="font-semibold lg:font-normal text-sm text-foreground">
                              Any time, anywhere access
                            </span>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Free
                              </span>
                              <svg class="shrink-0 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Startup
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Team
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Enterprise
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>
                          
                        </ul>
                        
                      </div>

<div class="mt-6 space-y-4 lg:space-y-0">
                        
                        <ul class="grid lg:grid-cols-6 lg:gap-6">
                          
                          <li class="lg:col-span-2 lg:py-3">
                            <span class="text-lg font-semibold text-foreground">
                              Financial data
                            </span>
                          </li>

<ul class="grid lg:grid-cols-6 lg:gap-6">
                          
                          <li class="lg:col-span-2 pb-1.5 lg:py-3">
                            <span class="font-semibold lg:font-normal text-sm text-foreground">
                              Open/High/Low/Close
                            </span>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Free
                              </span>
                              <svg class="shrink-0 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Startup
                              </span>
                              <svg class="shrink-0 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Team
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Enterprise
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>
                          
                        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
                          
                          <li class="lg:col-span-2 pb-1.5 lg:py-3">
                            <span class="font-semibold lg:font-normal text-sm text-foreground">
                              Price-volume difference indicator
                            </span>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Free
                              </span>
                              <svg class="shrink-0 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Startup
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Team
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Enterprise
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>
                          
                        </ul>
                        
                      </div>

<div class="mt-6 space-y-4 lg:space-y-0">
                        
                        <ul class="grid lg:grid-cols-6 lg:gap-6">
                          
                          <li class="lg:col-span-2 lg:py-3">
                            <span class="text-lg font-semibold text-foreground">
                              On-chain data
                            </span>
                          </li>

<ul class="grid lg:grid-cols-6 lg:gap-6">
                          
                          <li class="lg:col-span-2 pb-1.5 lg:py-3">
                            <span class="font-semibold lg:font-normal text-sm text-foreground">
                              Network growth
                            </span>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Free
                              </span>
                              <svg class="shrink-0 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Startup
                              </span>
                              <svg class="shrink-0 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Team
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Enterprise
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>
                          
                        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
                          
                          <li class="lg:col-span-2 pb-1.5 lg:py-3">
                            <span class="font-semibold lg:font-normal text-sm text-foreground">
                              Average token age consumed
                            </span>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Free
                              </span>
                              <svg class="shrink-0 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Startup
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Team
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Enterprise
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>
                          
                        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
                          
                          <li class="lg:col-span-2 pb-1.5 lg:py-3">
                            <span class="font-semibold lg:font-normal text-sm text-foreground">
                              Exchange flow
                            </span>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Free
                              </span>
                              <svg class="shrink-0 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Startup
                              </span>
                              <svg class="shrink-0 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Team
                              </span>
                              <svg class="shrink-0 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Enterprise
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>
                          
                        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
                          
                          <li class="lg:col-span-2 pb-1.5 lg:py-3">
                            <span class="font-semibold lg:font-normal text-sm text-foreground">
                              Total ERC20 exchange funds flow
                            </span>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Free
                              </span>
                              <svg class="shrink-0 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Startup
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Team
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Enterprise
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>
                          
                        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
                          
                          <li class="lg:col-span-2 pb-1.5 lg:py-3">
                            <span class="font-semibold lg:font-normal text-sm text-foreground">
                              Transaction volume
                            </span>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Free
                              </span>
                              <svg class="shrink-0 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Startup
                              </span>
                              <svg class="shrink-0 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Team
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Enterprise
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>
                          
                        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
                          
                          <li class="lg:col-span-2 pb-1.5 lg:py-3">
                            <span class="font-semibold lg:font-normal text-sm text-foreground">
                              Total circulation (beta)
                            </span>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Free
                              </span>
                              <svg class="shrink-0 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Startup
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Team
                              </span>
                              <svg class="shrink-0 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Enterprise
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>
                          
                        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
                          
                          <li class="lg:col-span-2 pb-1.5 lg:py-3">
                            <span class="font-semibold lg:font-normal text-sm text-foreground">
                              Velocity of tokens (beta)
                            </span>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Free
                              </span>
                              <svg class="shrink-0 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Startup
                              </span>
                              <svg class="shrink-0 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Team
                              </span>
                              <svg class="shrink-0 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Enterprise
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>
                          
                        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
                          
                          <li class="lg:col-span-2 pb-1.5 lg:py-3">
                            <span class="font-semibold lg:font-normal text-sm text-foreground">
                              ETH gas used
                            </span>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Free
                              </span>
                              <svg class="shrink-0 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Startup
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Team
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Enterprise
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>
                          
                        </ul>
                        
                      </div>

<div class="mt-6 space-y-4 lg:space-y-0">
                        
                        <ul class="grid lg:grid-cols-6 lg:gap-6">
                          
                          <li class="lg:col-span-2 lg:py-3">
                            <span class="text-lg font-semibold text-foreground">
                              Social data
                            </span>
                          </li>

<ul class="grid lg:grid-cols-6 lg:gap-6">
                          
                          <li class="lg:col-span-2 pb-1.5 lg:py-3">
                            <span class="font-semibold lg:font-normal text-sm text-foreground">
                              Dev activity
                            </span>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Free
                              </span>
                              <svg class="shrink-0 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Startup
                              </span>
                              <svg class="shrink-0 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Team
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Enterprise
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>
                          
                        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
                          
                          <li class="lg:col-span-2 pb-1.5 lg:py-3">
                            <span class="font-semibold lg:font-normal text-sm text-foreground">
                              Topic search
                            </span>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Free
                              </span>
                              <svg class="shrink-0 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Startup
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Team
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Enterprise
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>
                          
                        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
                          
                          <li class="lg:col-span-2 pb-1.5 lg:py-3">
                            <span class="font-semibold lg:font-normal text-sm text-foreground">
                              Relative social dominance
                            </span>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Free
                              </span>
                              <svg class="shrink-0 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Startup
                              </span>
                              <svg class="shrink-0 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Team
                              </span>
                              <svg class="shrink-0 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
                            </div>
                          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
                            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
                              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                                Enterprise
                              </span>
                              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                          </li>
                          
                        </ul>
                        
                      </div>

<div class="hidden lg:block mt-6">
                        
                        <div class="grid grid-cols-6 gap-6">
                          <div class="col-span-2">
                          </div>

<div class="col-span-1">
                            <a class="py-2.5 px-3.5 w-full inline-flex justify-center items-center gap-x-1.5 whitespace-nowrap text-[13px] md:text-sm rounded-lg bg-layer border border-layer-line text-layer-foreground hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                              Get started
                            </a>
                          </div>

<div class="col-span-1">
                            <a class="py-2.5 px-3.5 w-full inline-flex justify-center items-center gap-x-1.5 whitespace-nowrap text-[13px] md:text-sm rounded-lg shadow-md bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover hover:shadow-none focus:outline-hidden focus:bg-primary-focus focus:shadow-none disabled:opacity-50 disabled:pointer-events-none" href="#">
                              Get started
                            </a>
                          </div>

Open related SaaS Startup pricing page

Plan Comparison Table Pro

Plan columns and capability rows are grouped into a full comparison matrix with a compact tier header.

Create a responsive UI block named "Plan Comparison Table" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/marketing/pricing-tables/#plan-comparison-table. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: marketing/pricing-tables
- Block ID: plan-comparison-table
- Source description: Plan columns and capability rows are grouped into a full comparison matrix with a compact tier header.
- Preview iframe: https://preline.co/blocks/marketing/pricing-tables/iframes/pro/plan-comparison-table.html (repo path: blocks/marketing/pricing-tables/iframes/pro/plan-comparison-table.html)
- Source markup reference:
  - partials/pro/admin-dashboard/layouts-components/compare-plans.html
  - partials/pro/admin-dashboard/layouts-components/compare-plans-header.html
  - partials/pro/admin-dashboard/layouts-components/simple-title-text-faq.html

Block-specific fidelity rules:
- Preserve the source marketing hierarchy, first-viewport signal, media subject, CTA order, proof/social elements, visual rhythm, and responsive composition.
- Do not convert distinctive hero/marketing visuals into a generic split card layout or invent decorative media that is not present in the source.
- Preserve row/list density, column meaning, trailing metadata/action gutters, truncation mechanics, sorting/filter controls, pagination, status icons, and empty/loading states.
- Text columns should truncate before reserved metadata/action lanes rather than wrapping under them or reaching the row edge.
- Source content inventory (from the source markup):
  - Centered heading `Compare plans` (`text-xl font-semibold`); the FAQ partial is excluded from this block (the iframe renders it with the FAQ flag off), so no `Frequently Asked Questions` grid and no `Get in touch` row appear.
  - Desktop-only sticky plan header (`hidden lg:block sticky top-14 inset-s-0 py-2 bg-layer`) over `grid lg:grid-cols-6 lg:gap-x-6`: an empty `col-span-2` label gutter, then 4 plan columns - `Free` / `Free forever`, `Startup` / `$29 per month billed annually`, `Team` / `$59 per month billed annually`, `Enterprise` / `$119 per month billed annually`.
  - Header buttons in column order: disabled outline `Free trial`, disabled outline `Current plan`, enabled primary `Upgrade` carrying `data-hs-overlay="#hs-pro-dutprom"` (the target modal is not part of this block), disabled outline `Upgrade`.
  - 21 `<ul class="grid lg:grid-cols-6 lg:gap-x-6">` rows: 4 section headings `General`, `Financial data`, `On-chain data`, `Social data`, plus 17 feature rows in this exact order - `Number of seats`, `Storage`, `Email sharing`, `Any time, anywhere access`, `Open/High/Low/Close`, `Price-volume difference indicator`, `Network growth`, `Average token age consumed`, `Exchange flow`, `Total ERC20 exchange funds flow`, `Transaction volume`, `Total circulation (beta)`, `Velocity of tokens (beta)`, `ETH gas used`, `Dev activity`, `Topic search`, `Relative social dominance`.
  - Only two rows carry text values: `Number of seats` = `1` / `Up to 3` / `Up to 10` / `Unlimited`, and `Storage` = `15 GB` / `1 TB` / `15 TB` / `Unlimited`; all 15 other feature rows show icons only.
  - Included cells use a 24-viewBox check polyline at `size-5 text-primary`; excluded cells use a single horizontal dash (`M5 12h14`) at `size-4 text-muted-foreground-1`.
  - Below `lg` each value cell is `grid grid-cols-2 lg:block` with an `lg:hidden` repeated plan label (`Free`, `Startup`, `Team`, `Enterprise`) so rows read as label/value pairs; there is no `<table>` element and no horizontal scroll wrapper - the matrix is nested `ul`/`li` grids.
  - Fully static apart from the sticky header offset; no billing monthly/annual toggle, accordion, tabs, or Preline JS plugin drives the table.

<div class="relative">
  <div class="py-8 text-center">
    <h2 class="text-xl font-semibold text-foreground">
      Compare plans
    </h2>
  </div>

<div class="hidden lg:block sticky top-14 inset-s-0 py-2 bg-layer">
    
    <div class="grid lg:grid-cols-6 lg:gap-x-3 lg:gap-x-6">
      <div class="col-span-2">
        
        <div class="h-full">
        </div>
        
      </div>

<div class="col-span-1">
        
        <div class="p-4 h-full flex flex-col justify-between text-center">
          <div>
            <p class="text-lg font-semibold text-foreground">
              Free
            </p>
            <p class="text-sm text-muted-foreground-1">
              Free forever
            </p>
          </div>
          <div class="mt-2">
            <button type="button" class="w-full py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" disabled>
              Free trial
            </button>
          </div>
        </div>
        
      </div>

<div class="col-span-1">
        
        <div class="p-4 h-full flex flex-col justify-between text-center">
          <div>
            <p class="text-lg font-semibold text-foreground">
              Startup
            </p>
            <p class="text-sm text-muted-foreground-1">
              $29 per month billed annually
            </p>
          </div>
          <div class="mt-2">
            <button type="button" class="w-full py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" disabled>
              Current plan
            </button>
          </div>
        </div>
        
      </div>
  
      <div class="col-span-1">
        
        <div class="p-4 h-full flex flex-col justify-between text-center">
          <div>
            <p class="text-lg font-semibold text-foreground">
              Team
            </p>
            <p class="text-sm text-muted-foreground-1">
              $59 per month billed annually
            </p>
          </div>
          <div class="mt-2">
            
            <button type="button" class="w-full py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus" data-hs-overlay="#hs-pro-dutprom" >
              Upgrade
            </button>
          </div>
        </div>
        
      </div>
  
      <div class="col-span-1">
        
        <div class="p-4 h-full flex flex-col justify-between text-center">
          <div>
            <p class="text-lg font-semibold text-foreground">
              Enterprise
            </p>
            <p class="text-sm text-muted-foreground-1">
              $119 per month billed annually
            </p>
          </div>
          <div class="mt-2">
            <button type="button" class="w-full py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" disabled>
              Upgrade
            </button>
          </div>
        </div>
        
      </div>
      
    </div>
    
  </div>

<div class="space-y-4 lg:space-y-0">
    
    <ul class="grid lg:grid-cols-6 lg:gap-x-6">
      
      <li class="lg:col-span-2 lg:py-3">
        <span class="text-lg font-semibold text-foreground">
          General
        </span>
      </li>

<li class="hidden lg:block lg:col-span-1 py-0.5 lg:py-3 lg:text-center">
      </li>

<li class="hidden lg:block lg:col-span-1 py-0.5 lg:py-3 lg:text-center">
      </li>
      
    </ul>

<ul class="grid lg:grid-cols-6 lg:gap-x-6">
      
      <li class="lg:col-span-2 pb-1.5 lg:py-2">
        <span class="text-sm font-medium lg:font-normal text-foreground">
          Number of seats
        </span>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Startup
          </span>
          <span class="text-sm font-medium lg:font-normal text-foreground">
            Up to 3
          </span>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Team
          </span>
          <span class="text-sm font-medium lg:font-normal text-foreground">
            Up to 10
          </span>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Enterprise
          </span>
          <span class="text-sm font-medium lg:font-normal text-foreground">
            Unlimited
          </span>
        </div>
      </li>
      
    </ul>

<ul class="grid lg:grid-cols-6 lg:gap-x-6">
      
      <li class="lg:col-span-2 pb-1.5 lg:py-2">
        <span class="text-sm font-medium lg:font-normal text-foreground">
          Storage
        </span>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Free
          </span>
          <span class="text-sm font-medium lg:font-normal text-foreground">
            15 GB
          </span>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Startup
          </span>
          <span class="text-sm font-medium lg:font-normal text-foreground">
            1 TB
          </span>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Team
          </span>
          <span class="text-sm font-medium lg:font-normal text-foreground">
            15 TB
          </span>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Enterprise
          </span>
          <span class="text-sm font-medium lg:font-normal text-foreground">
            Unlimited
          </span>
        </div>
      </li>
      
    </ul>

<ul class="grid lg:grid-cols-6 lg:gap-x-6">
      
      <li class="lg:col-span-2 pb-1.5 lg:py-2">
        <span class="text-sm font-medium lg:font-normal text-foreground">
          Email sharing
        </span>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Free
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Startup
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Team
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Enterprise
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>
      
    </ul>

<ul class="grid lg:grid-cols-6 lg:gap-x-6">
      
      <li class="lg:col-span-2 pb-1.5 lg:py-2">
        <span class="text-sm font-medium lg:font-normal text-foreground">
          Any time, anywhere access
        </span>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Free
          </span>
          <svg class="size-4 lg:mx-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Startup
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Team
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Enterprise
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>
      
    </ul>
    
  </div>

<div class="mt-6 space-y-4 lg:space-y-0">
    
    <ul class="grid lg:grid-cols-6 lg:gap-x-6">
      
      <li class="lg:col-span-2 lg:py-3">
        <span class="text-lg font-semibold text-foreground">
          Financial data
        </span>
      </li>

<li class="hidden lg:block lg:col-span-1 py-0.5 lg:py-3 lg:text-center">
      </li>

<li class="hidden lg:block lg:col-span-1 py-0.5 lg:py-3 lg:text-center">
      </li>
      
    </ul>

<ul class="grid lg:grid-cols-6 lg:gap-x-6">
      
      <li class="lg:col-span-2 pb-1.5 lg:py-2">
        <span class="text-sm font-medium lg:font-normal text-foreground">
          Open/High/Low/Close
        </span>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Free
          </span>
          <svg class="size-4 lg:mx-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Startup
          </span>
          <svg class="size-4 lg:mx-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Team
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Enterprise
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>
      
    </ul>

<ul class="grid lg:grid-cols-6 lg:gap-x-6">
      
      <li class="lg:col-span-2 pb-1.5 lg:py-2">
        <span class="text-sm font-medium lg:font-normal text-foreground">
          Price-volume difference indicator
        </span>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Free
          </span>
          <svg class="size-4 lg:mx-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Startup
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Team
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Enterprise
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>
      
    </ul>
    
  </div>

<div class="mt-6 space-y-4 lg:space-y-0">
    
    <ul class="grid lg:grid-cols-6 lg:gap-x-6">
      
      <li class="lg:col-span-2 lg:py-3">
        <span class="text-lg font-semibold text-foreground">
          On-chain data
        </span>
      </li>

<li class="hidden lg:block lg:col-span-1 py-0.5 lg:py-3 lg:text-center">
      </li>

<li class="hidden lg:block lg:col-span-1 py-0.5 lg:py-3 lg:text-center">
      </li>
      
    </ul>

<ul class="grid lg:grid-cols-6 lg:gap-x-6">
      
      <li class="lg:col-span-2 pb-1.5 lg:py-2">
        <span class="text-sm font-medium lg:font-normal text-foreground">
          Network growth
        </span>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Free
          </span>
          <svg class="size-4 lg:mx-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Startup
          </span>
          <svg class="size-4 lg:mx-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Team
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Enterprise
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>
      
    </ul>

<ul class="grid lg:grid-cols-6 lg:gap-x-6">
      
      <li class="lg:col-span-2 pb-1.5 lg:py-2">
        <span class="text-sm font-medium lg:font-normal text-foreground">
          Average token age consumed
        </span>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Free
          </span>
          <svg class="size-4 lg:mx-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Startup
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Team
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Enterprise
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>
      
    </ul>

<ul class="grid lg:grid-cols-6 lg:gap-x-6">
      
      <li class="lg:col-span-2 pb-1.5 lg:py-2">
        <span class="text-sm font-medium lg:font-normal text-foreground">
          Exchange flow
        </span>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Free
          </span>
          <svg class="size-4 lg:mx-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Startup
          </span>
          <svg class="size-4 lg:mx-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Team
          </span>
          <svg class="size-4 lg:mx-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Enterprise
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>
      
    </ul>

<ul class="grid lg:grid-cols-6 lg:gap-x-6">
      
      <li class="lg:col-span-2 pb-1.5 lg:py-2">
        <span class="text-sm font-medium lg:font-normal text-foreground">
          Total ERC20 exchange funds flow
        </span>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Free
          </span>
          <svg class="size-4 lg:mx-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Startup
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Team
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Enterprise
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>
      
    </ul>

<ul class="grid lg:grid-cols-6 lg:gap-x-6">
      
      <li class="lg:col-span-2 pb-1.5 lg:py-2">
        <span class="text-sm font-medium lg:font-normal text-foreground">
          Transaction volume
        </span>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Free
          </span>
          <svg class="size-4 lg:mx-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Startup
          </span>
          <svg class="size-4 lg:mx-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Team
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Enterprise
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>
      
    </ul>

<ul class="grid lg:grid-cols-6 lg:gap-x-6">
      
      <li class="lg:col-span-2 pb-1.5 lg:py-2">
        <span class="text-sm font-medium lg:font-normal text-foreground">
          Total circulation (beta)
        </span>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Free
          </span>
          <svg class="size-4 lg:mx-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Startup
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Team
          </span>
          <svg class="size-4 lg:mx-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Enterprise
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>
      
    </ul>

<ul class="grid lg:grid-cols-6 lg:gap-x-6">
      
      <li class="lg:col-span-2 pb-1.5 lg:py-2">
        <span class="text-sm font-medium lg:font-normal text-foreground">
          Velocity of tokens (beta)
        </span>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Free
          </span>
          <svg class="size-4 lg:mx-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Startup
          </span>
          <svg class="size-4 lg:mx-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Team
          </span>
          <svg class="size-4 lg:mx-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Enterprise
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>
      
    </ul>

<ul class="grid lg:grid-cols-6 lg:gap-x-6">
      
      <li class="lg:col-span-2 pb-1.5 lg:py-2">
        <span class="text-sm font-medium lg:font-normal text-foreground">
          ETH gas used
        </span>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Free
          </span>
          <svg class="size-4 lg:mx-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Startup
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Team
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Enterprise
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>
      
    </ul>
    
  </div>

<div class="mt-6 space-y-4 lg:space-y-0">
    
    <ul class="grid lg:grid-cols-6 lg:gap-x-6">
      
      <li class="lg:col-span-2 lg:py-3">
        <span class="text-lg font-semibold text-foreground">
          Social data
        </span>
      </li>

<li class="hidden lg:block lg:col-span-1 py-0.5 lg:py-3 lg:text-center">
      </li>

<li class="hidden lg:block lg:col-span-1 py-0.5 lg:py-3 lg:text-center">
      </li>
      
    </ul>

<ul class="grid lg:grid-cols-6 lg:gap-x-6">
      
      <li class="lg:col-span-2 pb-1.5 lg:py-2">
        <span class="text-sm font-medium lg:font-normal text-foreground">
          Dev activity
        </span>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Free
          </span>
          <svg class="size-4 lg:mx-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Startup
          </span>
          <svg class="size-4 lg:mx-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Team
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Enterprise
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>
      
    </ul>

<ul class="grid lg:grid-cols-6 lg:gap-x-6">
      
      <li class="lg:col-span-2 pb-1.5 lg:py-2">
        <span class="text-sm font-medium lg:font-normal text-foreground">
          Topic search
        </span>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Free
          </span>
          <svg class="size-4 lg:mx-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Startup
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Team
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Enterprise
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>
      
    </ul>

<ul class="grid lg:grid-cols-6 lg:gap-x-6">
      
      <li class="lg:col-span-2 pb-1.5 lg:py-2">
        <span class="text-sm font-medium lg:font-normal text-foreground">
          Relative social dominance
        </span>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Free
          </span>
          <svg class="size-4 lg:mx-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Startup
          </span>
          <svg class="size-4 lg:mx-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Team
          </span>
          <svg class="size-4 lg:mx-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
        </div>
      </li>

<li class="col-span-1 py-0.5 lg:py-2 lg:text-center">
        <div class="grid grid-cols-2 lg:block">
          <span class="lg:hidden text-sm text-muted-foreground-1">
            Enterprise
          </span>
          <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
      </li>
      
    </ul>
    
  </div>
  
</div>

Open related Admin Dashboard plans page

Pricing Cards with Header Accent Free

Each card starts with a stronger header band before the price, features, and action area.

Create a responsive UI block named "Pricing Cards with Header Accent" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/marketing/pricing-tables/#pricing-cards-with-header-accent. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: marketing/pricing-tables
- Block ID: pricing-cards-with-header-accent
- Source description: Each card starts with a stronger header band before the price, features, and action area.
- Preview iframe: https://preline.co/blocks/marketing/pricing-tables/iframes/free/pricing-cards-with-header-accent.html (repo path: blocks/marketing/pricing-tables/iframes/free/pricing-cards-with-header-accent.html)
- Source markup reference:
  - partials/blocks/sources/pages/pricing-card-header-style.html

Block-specific fidelity rules:
- Preserve the source marketing hierarchy, first-viewport signal, media subject, CTA order, proof/social elements, visual rhythm, and responsive composition.
- Do not convert distinctive hero/marketing visuals into a generic split card layout or invent decorative media that is not present in the source.
- Preserve row/list density, column meaning, trailing metadata/action gutters, truncation mechanics, sorting/filter controls, pagination, status icons, and empty/loading states.
- Text columns should truncate before reserved metadata/action lanes rather than wrapping under them or reaching the row edge.
- Source content inventory (from the source markup):
  - Centered intro in `max-w-2xl mx-auto text-center mb-10 lg:mb-14`: `<h2>` `Simple, transparent pricing` (`text-2xl font-bold md:text-3xl`) over `Increase your teams productivity. Get things done in rapid time.`; outer container is `max-w-340 px-4 py-10 sm:px-6 lg:px-8 md:py-14 lg:py-20 mx-auto`.
  - The header accent is a desktop-only sticky row (`hidden lg:block sticky top-0 inset-s-0 py-2 bg-layer`) on `grid grid-cols-6 gap-6`: an empty `col-span-2` gutter, then 4 plan cards styled `h-full p-4 flex flex-col justify-between bg-card border border-card-line rounded-xl` - `Free` / `Free forever`, `Startup` / `$39 per month billed annually`, `Team` / `$89 per month billed annually`, `Enterprise` / `$149 per month billed annually`.
  - Every plan card ends with a full-width `Get started` link; only the Startup card uses the primary style, the other three use the outline/layer style.
  - 26 `<ul class="grid lg:grid-cols-6 lg:gap-6">` rows: 5 section headings `General`, `Financial data`, `On-chain data`, `Social data`, `Additional features`, plus 21 feature rows in this exact order - `Number of seats`, `Storage`, `Email sharing`, `Any time, anywhere access`, `Open/High/Low/Close`, `Price-volume difference indicator`, `Network growth`, `Average token age consumed`, `Exchange flow`, `Total ERC20 exchange funds flow`, `Transaction volume`, `Total circulation (beta)`, `Velocity of tokens (beta)`, `ETH gas used`, `Dev activity`, `Topic search`, `Relative social dominance`, `Dedicated account manager`, `24/7 support`, `Rewards`, `Business API`.
  - The `Additional features` section lives inside `<div id="view-all-features-button" class="hs-collapse hidden ..." role="region">` and is collapsed on first load; the centered toggle below it is a `hs-collapse-toggle` button with `id="view-all-features"`, `aria-expanded="false"`, `aria-controls="view-all-features-button"`, `data-hs-collapse="#view-all-features-button"` - Preline HSCollapse. Its label `View all features` is `hs-collapse-open:hidden` and is swapped for a rotating X icon when open.
  - Only two rows carry text values: `Number of seats` = `1` / `Up to 3` / `Up to 10` / `Unlimited`, and `Storage` = `15 GB` / `1 TB` / `15 TB` / `Unlimited`; all other feature rows show icons only - a check at `size-5 text-primary` for included and a single dash (`M5 12h14`) at `size-5 text-muted-foreground` for excluded.
  - The comparison area sits in a wrapper with a bottom fade overlay: `after:absolute after:inset-x-0 after:bottom-0 after:z-10 after:w-full after:h-48 after:bg-linear-to-t after:from-layer after:via-layer/70`.
  - Value cells carry `bg-surface` and, below `lg`, use `grid grid-cols-6 lg:block` with an `lg:hidden col-span-2 font-semibold` plan label (`Free`, `Startup`, `Team`, `Enterprise`); there is no `<table>` element and no billing monthly/annual toggle.

<div class="relative">
  <div class="max-w-340 px-4 py-10 sm:px-6 lg:px-8 md:py-14 lg:py-20 mx-auto">
    <div class="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
      <h2 class="text-2xl font-bold md:text-3xl md:leading-tight text-foreground">Simple, transparent pricing</h2>
      <p class="mt-1 text-muted-foreground-2">Increase your teams productivity. Get things done in rapid time.</p>
    </div>

<div class="col-span-1">
            
            <div class="h-full p-4 flex flex-col justify-between bg-card border border-card-line rounded-xl">
              <div>
                <span class="font-semibold text-lg text-foreground">
                  Free
                </span>
                <p class="text-xs text-muted-foreground-1">
                  Free forever
                </p>
              </div>
              <div class="mt-2">
                <a class="w-full py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="#">
                  Get started
                </a>
              </div>
            </div>
            
          </div>

<div class="col-span-1">
            
            <div class="h-full p-4 flex flex-col justify-between bg-card border border-card-line rounded-xl">
              <div>
                <span class="font-semibold text-lg text-foreground">
                  Startup
                </span>
                <p class="text-xs text-muted-foreground-1">
                  $39 per month billed annually
                </p>
              </div>
              <div class="mt-2">
                <a class="w-full py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                  Get started
                </a>
              </div>
            </div>
            
          </div>

<div class="col-span-1">
            
            <div class="h-full p-4 flex flex-col justify-between bg-card border border-card-line rounded-xl">
              <div>
                <span class="font-semibold text-lg text-foreground">
                  Team
                </span>
                <p class="text-xs text-muted-foreground-1">
                  $89 per month billed annually
                </p>
              </div>
              <div class="mt-2">
                <a class="w-full py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="#">
                  Get started
                </a>
              </div>
            </div>
            
          </div>

<div class="col-span-1">
            
            <div class="h-full p-4 flex flex-col justify-between bg-card border border-card-line rounded-xl">
              <div>
                <span class="font-semibold text-lg text-foreground">
                  Enterprise
                </span>
                <p class="text-xs text-muted-foreground-1">
                  $149 per month billed annually
                </p>
              </div>
              <div class="mt-2">
                <a class="w-full py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="#">
                  Get started
                </a>
              </div>
            </div>
            
          </div>
          
        </div>
        
      </div>

<div class="space-y-4 lg:space-y-0">
        
        <ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 lg:py-3">
            <span class="text-lg font-semibold text-foreground">
              General
            </span>
          </li>

<li class="hidden lg:block lg:col-span-1 py-1.5 lg:py-3 px-4 lg:px-0 lg:text-center">
          </li>

<li class="hidden lg:block lg:col-span-1 py-1.5 lg:py-3 px-4 lg:px-0 lg:text-center">
          </li>
          
        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="text-sm text-foreground">
              Number of seats
            </span>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 px-4 lg:px-0 lg:text-center bg-surface">
            <div class="grid grid-cols-6 lg:block">
              <span class="lg:hidden col-span-2 font-semibold text-sm text-foreground">
                Startup
              </span>
              <span class="text-sm text-foreground">
                Up to 3
              </span>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 px-4 lg:px-0 lg:text-center bg-surface">
            <div class="grid grid-cols-6 lg:block">
              <span class="lg:hidden col-span-2 font-semibold text-sm text-foreground">
                Team
              </span>
              <span class="text-sm text-foreground">
                Up to 10
              </span>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 px-4 lg:px-0 lg:text-center bg-surface">
            <div class="grid grid-cols-6 lg:block">
              <span class="lg:hidden col-span-2 font-semibold text-sm text-foreground">
                Enterprise
              </span>
              <span class="text-sm text-foreground">
                Unlimited
              </span>
            </div>
          </li>
          
        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="text-sm text-foreground">
              Storage
            </span>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 px-4 lg:px-0 lg:text-center bg-surface">
            <div class="grid grid-cols-6 lg:block">
              <span class="lg:hidden col-span-2 font-semibold text-sm text-foreground">
                Startup
              </span>
              <span class="text-sm text-foreground">
                1 TB
              </span>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 px-4 lg:px-0 lg:text-center bg-surface">
            <div class="grid grid-cols-6 lg:block">
              <span class="lg:hidden col-span-2 font-semibold text-sm text-foreground">
                Enterprise
              </span>
              <span class="text-sm text-foreground">
                Unlimited
              </span>
            </div>
          </li>
          
        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="text-sm text-foreground">
              Email sharing
            </span>
          </li>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="text-sm text-foreground">
              Any time, anywhere access
            </span>
          </li>

<li class="hidden lg:block lg:col-span-1 py-1.5 lg:py-3 px-4 lg:px-0 lg:text-center">
          </li>

<li class="hidden lg:block lg:col-span-1 py-1.5 lg:py-3 px-4 lg:px-0 lg:text-center">
          </li>
          
        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="text-sm text-foreground">
              Open/High/Low/Close
            </span>
          </li>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="text-sm text-foreground">
              Price-volume difference indicator
            </span>
          </li>

<li class="hidden lg:block lg:col-span-1 py-1.5 lg:py-3 px-4 lg:px-0 lg:text-center">
          </li>

<li class="hidden lg:block lg:col-span-1 py-1.5 lg:py-3 px-4 lg:px-0 lg:text-center">
          </li>
          
        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="text-sm text-foreground">
              Network growth
            </span>
          </li>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="text-sm text-foreground">
              Average token age consumed
            </span>
          </li>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="text-sm text-foreground">
              Exchange flow
            </span>
          </li>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="text-sm text-foreground">
              Total ERC20 exchange funds flow
            </span>
          </li>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="text-sm text-foreground">
              Transaction volume
            </span>
          </li>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="text-sm text-foreground">
              Total circulation (beta)
            </span>
          </li>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="text-sm text-foreground">
              Velocity of tokens (beta)
            </span>
          </li>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="text-sm text-foreground">
              ETH gas used
            </span>
          </li>

<li class="hidden lg:block lg:col-span-1 py-1.5 lg:py-3 px-4 lg:px-0 lg:text-center">
          </li>

<li class="hidden lg:block lg:col-span-1 py-1.5 lg:py-3 px-4 lg:px-0 lg:text-center">
          </li>
          
        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="text-sm text-foreground">
              Dev activity
            </span>
          </li>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="text-sm text-foreground">
              Topic search
            </span>
          </li>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="text-sm text-foreground">
              Relative social dominance
            </span>
          </li>

<div id="view-all-features-button" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="view-all-features" role="region">
        
        <div class="mt-6 relative z-20 space-y-4 lg:space-y-0">
          
          <ul class="grid lg:grid-cols-6 lg:gap-6">
            
            <li class="lg:col-span-2 lg:py-3">
              <span class="text-lg font-semibold text-foreground">
                Additional features
              </span>
            </li>

<li class="hidden lg:block lg:col-span-1 py-1.5 lg:py-3 px-4 lg:px-0 lg:text-center">
            </li>

<li class="hidden lg:block lg:col-span-1 py-1.5 lg:py-3 px-4 lg:px-0 lg:text-center">
            </li>
            
          </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
            
            <li class="lg:col-span-2 pb-1.5 lg:py-3">
              <span class="text-sm text-foreground">
                Dedicated account manager
              </span>
            </li>

<ul class="grid lg:grid-cols-6 lg:gap-6">
            
            <li class="lg:col-span-2 pb-1.5 lg:py-3">
              <span class="text-sm text-foreground">
                24/7 support
              </span>
            </li>

<ul class="grid lg:grid-cols-6 lg:gap-6">
            
            <li class="lg:col-span-2 pb-1.5 lg:py-3">
              <span class="text-sm text-foreground">
                Rewards
              </span>
            </li>

<ul class="grid lg:grid-cols-6 lg:gap-6">
            
            <li class="lg:col-span-2 pb-1.5 lg:py-3">
              <span class="text-sm text-foreground">
                Business API
              </span>
            </li>

<li class="col-span-1 py-1.5 lg:py-3 px-4 lg:px-0 lg:text-center bg-surface">
              <div class="grid grid-cols-6 lg:block">
                <span class="lg:hidden col-span-2 font-semibold text-sm text-foreground">
                  Enterprise
                </span>
                <svg class="size-5 lg:mx-auto text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/>
                </svg>
              </div>
            </li>
            
          </ul>
          
        </div>
        
      </div>
      
    </div>
      
    
    <div class="mt-8 text-center">
      <button type="button" class="hs-collapse-toggle hs-collapse-open:rounded-full hs-collapse-open:px-3 group py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-full bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" id="view-all-features" aria-expanded="false" aria-controls="view-all-features-button" data-hs-collapse="#view-all-features-button">
        <span class="hs-collapse-open:hidden">View all features</span>
        <svg class="hidden hs-collapse-open:block group-hover:rotate-180 transition duration-300 shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
      </button>
    </div>
    
  </div>
</div>