18 Tailwind CSS Settings Pages
13 / 18

All 18 in 18 Tailwind CSS Settings Pages

  1. 01Tailwind Account Settings Page Layout
  2. 02Tailwind Billing and Plan Settings Page
  3. 03Tailwind Usage Page with Quota Meters
  4. 04Tailwind Invoice History Table
  5. 05Tailwind Payment Method Settings Card
  6. 06Tailwind Team Members Page with Roles
  7. 07Tailwind Invite Teammates Form
  8. 08Tailwind Roles and Permissions Matrix
  9. 09Tailwind API Keys Management Page
  10. 10Tailwind Two-Factor Authentication Setup
  11. 11Tailwind Active Sessions Settings Page
  12. 12Tailwind Notification Preferences Page
  13. 13Tailwind Connected Apps Settings Page
  14. 14Tailwind Appearance Settings Page
  15. 15Tailwind Data Export Request Page
  16. 16Tailwind Audit Log Activity Page
  17. 17Tailwind Webhooks Settings Page
  18. 18Tailwind Danger Zone Delete Account
Pure TailwindMIT licensed

Tailwind Connected Apps Settings Page

A zero-JavaScript integrations directory: category chips that filter the grid, a 'Connected' chip that shows only what you've linked, connect buttons built on real checkboxes that flip to 'Connected' and reveal what each app can access, and a sticky footer whose live count comes from a CSS counter — not a script.

Live Demo
Plain CSSTailwind v4
Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<section class="tsp-13 group/apps w-full min-h-svh bg-tsp13-bg px-4 py-10 font-tsp13-sans text-tsp13-ink antialiased [counter-reset:tsp13] sm:px-8 sm:py-14" aria-labelledby="tsp-13-h">
  <div class="mx-auto grid w-full max-w-6xl gap-6 pb-24">
    <header class="grid gap-1"><h1 id="tsp-13-h" class="text-3xl font-extrabold tracking-tight sm:text-4xl">Connected apps</h1><p class="text-pretty text-tsp13-mut">Bring the tools your team already uses into Northwind.</p></header>

    <fieldset class="flex flex-wrap gap-2">
      <legend class="sr-only">Filter apps</legend>
      <label class="inline-flex min-h-11 cursor-pointer items-center rounded-full border border-tsp13-line bg-white px-4 text-sm font-semibold text-tsp13-mut transition hover:text-tsp13-ink has-checked:border-transparent has-checked:bg-tsp13-ink has-checked:text-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="radio" name="tsp-13-cat" id="tsp-13-c-all" class="sr-only" checked>All</label>
      <label class="inline-flex min-h-11 cursor-pointer items-center gap-2 rounded-full border border-tsp13-line bg-white px-4 text-sm font-semibold text-tsp13-mut transition hover:text-tsp13-ink has-checked:border-transparent has-checked:bg-tsp13-acc has-checked:text-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="radio" name="tsp-13-cat" id="tsp-13-c-on" class="sr-only"><span class="size-1.5 rounded-full bg-emerald-500"></span>Connected</label>
      <label class="inline-flex min-h-11 cursor-pointer items-center rounded-full border border-tsp13-line bg-white px-4 text-sm font-semibold text-tsp13-mut transition hover:text-tsp13-ink has-checked:border-transparent has-checked:bg-tsp13-ink has-checked:text-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="radio" name="tsp-13-cat" id="tsp-13-c-comm" class="sr-only">Communication</label>
      <label class="inline-flex min-h-11 cursor-pointer items-center rounded-full border border-tsp13-line bg-white px-4 text-sm font-semibold text-tsp13-mut transition hover:text-tsp13-ink has-checked:border-transparent has-checked:bg-tsp13-ink has-checked:text-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="radio" name="tsp-13-cat" id="tsp-13-c-dev" class="sr-only">Developer</label>
      <label class="inline-flex min-h-11 cursor-pointer items-center rounded-full border border-tsp13-line bg-white px-4 text-sm font-semibold text-tsp13-mut transition hover:text-tsp13-ink has-checked:border-transparent has-checked:bg-tsp13-ink has-checked:text-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="radio" name="tsp-13-cat" id="tsp-13-c-design" class="sr-only">Design</label>
      <label class="inline-flex min-h-11 cursor-pointer items-center rounded-full border border-tsp13-line bg-white px-4 text-sm font-semibold text-tsp13-mut transition hover:text-tsp13-ink has-checked:border-transparent has-checked:bg-tsp13-ink has-checked:text-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="radio" name="tsp-13-cat" id="tsp-13-c-prod" class="sr-only">Productivity</label>
      <label class="inline-flex min-h-11 cursor-pointer items-center rounded-full border border-tsp13-line bg-white px-4 text-sm font-semibold text-tsp13-mut transition hover:text-tsp13-ink has-checked:border-transparent has-checked:bg-tsp13-ink has-checked:text-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="radio" name="tsp-13-cat" id="tsp-13-c-sales" class="sr-only">Sales</label>
    </fieldset>

    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 group-has-[#tsp-13-c-on:checked]/apps:[&>article:not(:has(input:checked))]:hidden group-has-[#tsp-13-c-comm:checked]/apps:[&>[data-cat]:not([data-cat=comm])]:hidden group-has-[#tsp-13-c-dev:checked]/apps:[&>[data-cat]:not([data-cat=dev])]:hidden group-has-[#tsp-13-c-design:checked]/apps:[&>[data-cat]:not([data-cat=design])]:hidden group-has-[#tsp-13-c-prod:checked]/apps:[&>[data-cat]:not([data-cat=prod])]:hidden group-has-[#tsp-13-c-sales:checked]/apps:[&>[data-cat]:not([data-cat=sales])]:hidden">
      <article data-cat="comm" class="group/card grid content-start gap-4 rounded-3xl border border-tsp13-line bg-white p-5 shadow-[0_1px_2px_rgb(0_0_0/0.04)] transition hover:-translate-y-0.5 hover:shadow-[0_18px_40px_-24px_rgb(20_20_40/0.3)] has-checked:border-tsp13-acc/40 has-checked:ring-4 has-checked:ring-tsp13-acc/8 motion-reduce:transition-none">
        <div class="flex items-start gap-4"><span class="grid size-12 flex-none place-items-center rounded-2xl bg-[#4a154b] text-lg font-extrabold text-white">S</span><div class="min-w-0 flex-1"><h2 class="font-bold">Slack</h2><p class="text-xs font-semibold uppercase tracking-wide text-tsp13-mut">Communication</p></div></div>
        <p class="text-sm text-tsp13-mut">Post updates to channels and turn messages into tasks.</p>
        <div class="hidden gap-1 rounded-2xl bg-tsp13-bg p-3 text-xs text-tsp13-mut group-has-checked/card:grid"><span><strong class="font-semibold text-tsp13-ink">Can:</strong> read channel names, post messages</span><span>Connected by Ava · posting to #eng-alerts</span></div>
        <label class="inline-flex min-h-11 w-fit cursor-pointer items-center gap-2 rounded-xl border border-tsp13-line px-4 text-sm font-bold transition hover:bg-tsp13-bg has-checked:border-emerald-200 has-checked:bg-emerald-50 has-checked:text-emerald-700 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="checkbox" class="sr-only checked:[counter-increment:tsp13]" checked aria-label="Connect Slack"><span class="group-has-checked/card:hidden">Connect</span><span class="hidden items-center gap-1.5 group-has-checked/card:inline-flex"><span class="size-1.5 rounded-full bg-emerald-500"></span>Connected</span></label>
      </article>
      <article data-cat="dev" class="group/card grid content-start gap-4 rounded-3xl border border-tsp13-line bg-white p-5 shadow-[0_1px_2px_rgb(0_0_0/0.04)] transition hover:-translate-y-0.5 hover:shadow-[0_18px_40px_-24px_rgb(20_20_40/0.3)] has-checked:border-tsp13-acc/40 has-checked:ring-4 has-checked:ring-tsp13-acc/8 motion-reduce:transition-none">
        <div class="flex items-start gap-4"><span class="grid size-12 flex-none place-items-center rounded-2xl bg-[#1f2328] text-lg font-extrabold text-white">G</span><div class="min-w-0 flex-1"><h2 class="font-bold">GitHub</h2><p class="text-xs font-semibold uppercase tracking-wide text-tsp13-mut">Developer</p></div></div>
        <p class="text-sm text-tsp13-mut">Link pull requests to tasks and close them on merge.</p>
        <div class="hidden gap-1 rounded-2xl bg-tsp13-bg p-3 text-xs text-tsp13-mut group-has-checked/card:grid"><span><strong class="font-semibold text-tsp13-ink">Can:</strong> read repos, PRs and commit status</span><span>Connected by Noah · 14 repositories</span></div>
        <label class="inline-flex min-h-11 w-fit cursor-pointer items-center gap-2 rounded-xl border border-tsp13-line px-4 text-sm font-bold transition hover:bg-tsp13-bg has-checked:border-emerald-200 has-checked:bg-emerald-50 has-checked:text-emerald-700 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="checkbox" class="sr-only checked:[counter-increment:tsp13]" checked aria-label="Connect GitHub"><span class="group-has-checked/card:hidden">Connect</span><span class="hidden items-center gap-1.5 group-has-checked/card:inline-flex"><span class="size-1.5 rounded-full bg-emerald-500"></span>Connected</span></label>
      </article>
      <article data-cat="design" class="group/card grid content-start gap-4 rounded-3xl border border-tsp13-line bg-white p-5 shadow-[0_1px_2px_rgb(0_0_0/0.04)] transition hover:-translate-y-0.5 hover:shadow-[0_18px_40px_-24px_rgb(20_20_40/0.3)] has-checked:border-tsp13-acc/40 has-checked:ring-4 has-checked:ring-tsp13-acc/8 motion-reduce:transition-none">
        <div class="flex items-start gap-4"><span class="grid size-12 flex-none place-items-center rounded-2xl bg-linear-135 from-[#f24e1e] via-[#a259ff] to-[#1abcfe] text-lg font-extrabold text-white">F</span><div class="min-w-0 flex-1"><h2 class="font-bold">Figma</h2><p class="text-xs font-semibold uppercase tracking-wide text-tsp13-mut">Design</p></div></div>
        <p class="text-sm text-tsp13-mut">Embed live frames in docs; previews update as designs change.</p>
        <div class="hidden gap-1 rounded-2xl bg-tsp13-bg p-3 text-xs text-tsp13-mut group-has-checked/card:grid"><span><strong class="font-semibold text-tsp13-ink">Can:</strong> read files you share</span><span>Connected by Mia · 6 embeds</span></div>
        <label class="inline-flex min-h-11 w-fit cursor-pointer items-center gap-2 rounded-xl border border-tsp13-line px-4 text-sm font-bold transition hover:bg-tsp13-bg has-checked:border-emerald-200 has-checked:bg-emerald-50 has-checked:text-emerald-700 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="checkbox" class="sr-only checked:[counter-increment:tsp13]" checked aria-label="Connect Figma"><span class="group-has-checked/card:hidden">Connect</span><span class="hidden items-center gap-1.5 group-has-checked/card:inline-flex"><span class="size-1.5 rounded-full bg-emerald-500"></span>Connected</span></label>
      </article>
      <article data-cat="prod" class="group/card grid content-start gap-4 rounded-3xl border border-tsp13-line bg-white p-5 shadow-[0_1px_2px_rgb(0_0_0/0.04)] transition hover:-translate-y-0.5 hover:shadow-[0_18px_40px_-24px_rgb(20_20_40/0.3)] has-checked:border-tsp13-acc/40 has-checked:ring-4 has-checked:ring-tsp13-acc/8 motion-reduce:transition-none">
        <div class="flex items-start gap-4"><span class="grid size-12 flex-none place-items-center rounded-2xl bg-[#1a73e8] text-lg font-extrabold text-white">D</span><div class="min-w-0 flex-1"><h2 class="font-bold">Google Drive</h2><p class="text-xs font-semibold uppercase tracking-wide text-tsp13-mut">Productivity</p></div></div>
        <p class="text-sm text-tsp13-mut">Attach Docs, Sheets and Slides with live previews.</p>
        <div class="hidden gap-1 rounded-2xl bg-tsp13-bg p-3 text-xs text-tsp13-mut group-has-checked/card:grid"><span><strong class="font-semibold text-tsp13-ink">Can:</strong> open files you pick</span><span>Connected just now</span></div>
        <label class="inline-flex min-h-11 w-fit cursor-pointer items-center gap-2 rounded-xl border border-tsp13-line px-4 text-sm font-bold transition hover:bg-tsp13-bg has-checked:border-emerald-200 has-checked:bg-emerald-50 has-checked:text-emerald-700 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="checkbox" class="sr-only checked:[counter-increment:tsp13]" aria-label="Connect Google Drive"><span class="group-has-checked/card:hidden">Connect</span><span class="hidden items-center gap-1.5 group-has-checked/card:inline-flex"><span class="size-1.5 rounded-full bg-emerald-500"></span>Connected</span></label>
      </article>
      <article data-cat="prod" class="group/card grid content-start gap-4 rounded-3xl border border-tsp13-line bg-white p-5 shadow-[0_1px_2px_rgb(0_0_0/0.04)] transition hover:-translate-y-0.5 hover:shadow-[0_18px_40px_-24px_rgb(20_20_40/0.3)] has-checked:border-tsp13-acc/40 has-checked:ring-4 has-checked:ring-tsp13-acc/8 motion-reduce:transition-none">
        <div class="flex items-start gap-4"><span class="grid size-12 flex-none place-items-center rounded-2xl bg-white text-lg font-extrabold text-black ring-1 ring-tsp13-line">N</span><div class="min-w-0 flex-1"><h2 class="font-bold">Notion</h2><p class="text-xs font-semibold uppercase tracking-wide text-tsp13-mut">Productivity</p></div></div>
        <p class="text-sm text-tsp13-mut">Sync specs and meeting notes into project timelines.</p>
        <div class="hidden gap-1 rounded-2xl bg-tsp13-bg p-3 text-xs text-tsp13-mut group-has-checked/card:grid"><span><strong class="font-semibold text-tsp13-ink">Can:</strong> read pages you share</span><span>Connected just now</span></div>
        <label class="inline-flex min-h-11 w-fit cursor-pointer items-center gap-2 rounded-xl border border-tsp13-line px-4 text-sm font-bold transition hover:bg-tsp13-bg has-checked:border-emerald-200 has-checked:bg-emerald-50 has-checked:text-emerald-700 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="checkbox" class="sr-only checked:[counter-increment:tsp13]" aria-label="Connect Notion"><span class="group-has-checked/card:hidden">Connect</span><span class="hidden items-center gap-1.5 group-has-checked/card:inline-flex"><span class="size-1.5 rounded-full bg-emerald-500"></span>Connected</span></label>
      </article>
      <article data-cat="dev" class="group/card grid content-start gap-4 rounded-3xl border border-tsp13-line bg-white p-5 shadow-[0_1px_2px_rgb(0_0_0/0.04)] transition hover:-translate-y-0.5 hover:shadow-[0_18px_40px_-24px_rgb(20_20_40/0.3)] has-checked:border-tsp13-acc/40 has-checked:ring-4 has-checked:ring-tsp13-acc/8 motion-reduce:transition-none">
        <div class="flex items-start gap-4"><span class="grid size-12 flex-none place-items-center rounded-2xl bg-[#362d59] text-lg font-extrabold text-white">S</span><div class="min-w-0 flex-1"><h2 class="font-bold">Sentry</h2><p class="text-xs font-semibold uppercase tracking-wide text-tsp13-mut">Developer</p></div></div>
        <p class="text-sm text-tsp13-mut">Open issues from errors and link them to releases.</p>
        <div class="hidden gap-1 rounded-2xl bg-tsp13-bg p-3 text-xs text-tsp13-mut group-has-checked/card:grid"><span><strong class="font-semibold text-tsp13-ink">Can:</strong> read issues and releases</span><span>Connected just now</span></div>
        <label class="inline-flex min-h-11 w-fit cursor-pointer items-center gap-2 rounded-xl border border-tsp13-line px-4 text-sm font-bold transition hover:bg-tsp13-bg has-checked:border-emerald-200 has-checked:bg-emerald-50 has-checked:text-emerald-700 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="checkbox" class="sr-only checked:[counter-increment:tsp13]" aria-label="Connect Sentry"><span class="group-has-checked/card:hidden">Connect</span><span class="hidden items-center gap-1.5 group-has-checked/card:inline-flex"><span class="size-1.5 rounded-full bg-emerald-500"></span>Connected</span></label>
      </article>
      <article data-cat="comm" class="group/card grid content-start gap-4 rounded-3xl border border-tsp13-line bg-white p-5 shadow-[0_1px_2px_rgb(0_0_0/0.04)] transition hover:-translate-y-0.5 hover:shadow-[0_18px_40px_-24px_rgb(20_20_40/0.3)] has-checked:border-tsp13-acc/40 has-checked:ring-4 has-checked:ring-tsp13-acc/8 motion-reduce:transition-none">
        <div class="flex items-start gap-4"><span class="grid size-12 flex-none place-items-center rounded-2xl bg-[#2d8cff] text-lg font-extrabold text-white">Z</span><div class="min-w-0 flex-1"><h2 class="font-bold">Zoom</h2><p class="text-xs font-semibold uppercase tracking-wide text-tsp13-mut">Communication</p></div></div>
        <p class="text-sm text-tsp13-mut">Start a call from any task; recordings attach automatically.</p>
        <div class="hidden gap-1 rounded-2xl bg-tsp13-bg p-3 text-xs text-tsp13-mut group-has-checked/card:grid"><span><strong class="font-semibold text-tsp13-ink">Can:</strong> create meetings, read recordings</span><span>Connected just now</span></div>
        <label class="inline-flex min-h-11 w-fit cursor-pointer items-center gap-2 rounded-xl border border-tsp13-line px-4 text-sm font-bold transition hover:bg-tsp13-bg has-checked:border-emerald-200 has-checked:bg-emerald-50 has-checked:text-emerald-700 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="checkbox" class="sr-only checked:[counter-increment:tsp13]" aria-label="Connect Zoom"><span class="group-has-checked/card:hidden">Connect</span><span class="hidden items-center gap-1.5 group-has-checked/card:inline-flex"><span class="size-1.5 rounded-full bg-emerald-500"></span>Connected</span></label>
      </article>
      <article data-cat="sales" class="group/card grid content-start gap-4 rounded-3xl border border-tsp13-line bg-white p-5 shadow-[0_1px_2px_rgb(0_0_0/0.04)] transition hover:-translate-y-0.5 hover:shadow-[0_18px_40px_-24px_rgb(20_20_40/0.3)] has-checked:border-tsp13-acc/40 has-checked:ring-4 has-checked:ring-tsp13-acc/8 motion-reduce:transition-none">
        <div class="flex items-start gap-4"><span class="grid size-12 flex-none place-items-center rounded-2xl bg-[#00a1e0] text-lg font-extrabold text-white">S</span><div class="min-w-0 flex-1"><h2 class="flex items-center gap-2 font-bold">Salesforce <span class="rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-amber-800">Business</span></h2><p class="text-xs font-semibold uppercase tracking-wide text-tsp13-mut">Sales</p></div></div>
        <p class="text-sm text-tsp13-mut">Mirror accounts and opportunities onto customer projects.</p>
        <div class="hidden gap-1 rounded-2xl bg-tsp13-bg p-3 text-xs text-tsp13-mut group-has-checked/card:grid"><span><strong class="font-semibold text-tsp13-ink">Can:</strong> read accounts and opportunities</span><span>Connected just now</span></div>
        <label class="inline-flex min-h-11 w-fit cursor-pointer items-center gap-2 rounded-xl border border-tsp13-line px-4 text-sm font-bold transition hover:bg-tsp13-bg has-checked:border-emerald-200 has-checked:bg-emerald-50 has-checked:text-emerald-700 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="checkbox" class="sr-only checked:[counter-increment:tsp13]" aria-label="Connect Salesforce"><span class="group-has-checked/card:hidden">Connect</span><span class="hidden items-center gap-1.5 group-has-checked/card:inline-flex"><span class="size-1.5 rounded-full bg-emerald-500"></span>Connected</span></label>
      </article>
      <article data-cat="sales" class="group/card grid content-start gap-4 rounded-3xl border border-tsp13-line bg-white p-5 shadow-[0_1px_2px_rgb(0_0_0/0.04)] transition hover:-translate-y-0.5 hover:shadow-[0_18px_40px_-24px_rgb(20_20_40/0.3)] has-checked:border-tsp13-acc/40 has-checked:ring-4 has-checked:ring-tsp13-acc/8 motion-reduce:transition-none">
        <div class="flex items-start gap-4"><span class="grid size-12 flex-none place-items-center rounded-2xl bg-[#ff7a59] text-lg font-extrabold text-white">H</span><div class="min-w-0 flex-1"><h2 class="font-bold">HubSpot</h2><p class="text-xs font-semibold uppercase tracking-wide text-tsp13-mut">Sales</p></div></div>
        <p class="text-sm text-tsp13-mut">Create deals from forms and track handoffs to delivery.</p>
        <div class="hidden gap-1 rounded-2xl bg-tsp13-bg p-3 text-xs text-tsp13-mut group-has-checked/card:grid"><span><strong class="font-semibold text-tsp13-ink">Can:</strong> read contacts and deals</span><span>Connected just now</span></div>
        <label class="inline-flex min-h-11 w-fit cursor-pointer items-center gap-2 rounded-xl border border-tsp13-line px-4 text-sm font-bold transition hover:bg-tsp13-bg has-checked:border-emerald-200 has-checked:bg-emerald-50 has-checked:text-emerald-700 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="checkbox" class="sr-only checked:[counter-increment:tsp13]" aria-label="Connect HubSpot"><span class="group-has-checked/card:hidden">Connect</span><span class="hidden items-center gap-1.5 group-has-checked/card:inline-flex"><span class="size-1.5 rounded-full bg-emerald-500"></span>Connected</span></label>
      </article>
    </div>

    <div class="flex flex-wrap items-center justify-between gap-4 rounded-3xl border border-dashed border-tsp13-line p-5">
      <p class="text-sm text-tsp13-mut"><strong class="font-semibold text-tsp13-ink">Don't see your tool?</strong> Build your own with the REST API and webhooks.</p>
      <a href="#tsp-13-h" class="inline-flex min-h-11 items-center gap-2 rounded-xl px-3 text-sm font-bold text-tsp13-acc transition hover:bg-tsp13-acc/8 focus-visible:outline-2 focus-visible:outline-tsp13-acc">Read the API docs<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
    </div>
  </div>
  <p class="fixed inset-x-0 bottom-4 z-10 mx-auto flex w-fit items-center gap-2 rounded-full bg-tsp13-ink py-2.5 pl-4 pr-5 text-sm font-semibold text-white shadow-2xl before:grid before:size-6 before:place-items-center before:rounded-full before:bg-tsp13-acc before:text-xs before:font-extrabold before:content-[counter(tsp13)]">connected in this view</p>
</section>
@import "tailwindcss";

@theme {
  --color-tsp13-bg: #f5f4f1;
  --color-tsp13-bg: oklch(0.967 0.005 85);
  --color-tsp13-ink: #1b1a17;
  --color-tsp13-ink: oklch(0.215 0.007 85);
  --color-tsp13-mut: #67645c;
  --color-tsp13-mut: oklch(0.51 0.014 85);
  --color-tsp13-line: #e6e3dc;
  --color-tsp13-line: oklch(0.917 0.01 85);
  --color-tsp13-acc: #2f6bff;
  --color-tsp13-acc: oklch(0.573 0.229 262);
  --font-tsp13-sans: 'Bricolage Grotesque', system-ui, sans-serif;
}

.tsp-13 {
  width: 100%;
  min-height: 100svh;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-tsp13-bg: #f5f4f1;
  --color-tsp13-bg: oklch(0.967 0.005 85);
  --color-tsp13-ink: #1b1a17;
  --color-tsp13-ink: oklch(0.215 0.007 85);
  --color-tsp13-mut: #67645c;
  --color-tsp13-mut: oklch(0.51 0.014 85);
  --color-tsp13-line: #e6e3dc;
  --color-tsp13-line: oklch(0.917 0.01 85);
  --color-tsp13-acc: #2f6bff;
  --color-tsp13-acc: oklch(0.573 0.229 262);
  --font-tsp13-sans: 'Bricolage Grotesque', system-ui, sans-serif;
}

.tsp-13 {
  width: 100%;
  min-height: 100svh;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • The CSS original's per-category :has() filter block became six stacked variants on the grid, including a 'Connected only' view built from :not(:has(input:checked)).
  • The live connected count stayed a CSS counter — now expressed entirely in utilities: [counter-reset:tsp13], checked:[counter-increment:tsp13] and before:content-[counter(tsp13)].
  • UI upgrade from the CSS original: connected cards reveal exactly what the app can access and who connected it.
  • UI upgrade: plan-gated apps carry a Business badge, cards lift on hover, and a build-your-own footer points to the API.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Connected Apps Settings Page
Source: https://codefronts.com/layouts/tailwind-css-settings-pages/tailwind-connected-apps-settings-page/

A zero-JavaScript integrations directory: category chips that filter the grid, a 'Connected' chip that shows only what you've linked, connect buttons built on real checkboxes that flip to 'Connected' and reveal what each app can access, and a sticky footer whose live count comes from a CSS counter — not a script.
## HTML
```html
<section class="tsp-13 group/apps w-full min-h-svh bg-tsp13-bg px-4 py-10 font-tsp13-sans text-tsp13-ink antialiased [counter-reset:tsp13] sm:px-8 sm:py-14" aria-labelledby="tsp-13-h">
  <div class="mx-auto grid w-full max-w-6xl gap-6 pb-24">
    <header class="grid gap-1"><h1 id="tsp-13-h" class="text-3xl font-extrabold tracking-tight sm:text-4xl">Connected apps</h1><p class="text-pretty text-tsp13-mut">Bring the tools your team already uses into Northwind.</p></header>

    <fieldset class="flex flex-wrap gap-2">
      <legend class="sr-only">Filter apps</legend>
      <label class="inline-flex min-h-11 cursor-pointer items-center rounded-full border border-tsp13-line bg-white px-4 text-sm font-semibold text-tsp13-mut transition hover:text-tsp13-ink has-checked:border-transparent has-checked:bg-tsp13-ink has-checked:text-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="radio" name="tsp-13-cat" id="tsp-13-c-all" class="sr-only" checked>All</label>
      <label class="inline-flex min-h-11 cursor-pointer items-center gap-2 rounded-full border border-tsp13-line bg-white px-4 text-sm font-semibold text-tsp13-mut transition hover:text-tsp13-ink has-checked:border-transparent has-checked:bg-tsp13-acc has-checked:text-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="radio" name="tsp-13-cat" id="tsp-13-c-on" class="sr-only"><span class="size-1.5 rounded-full bg-emerald-500"></span>Connected</label>
      <label class="inline-flex min-h-11 cursor-pointer items-center rounded-full border border-tsp13-line bg-white px-4 text-sm font-semibold text-tsp13-mut transition hover:text-tsp13-ink has-checked:border-transparent has-checked:bg-tsp13-ink has-checked:text-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="radio" name="tsp-13-cat" id="tsp-13-c-comm" class="sr-only">Communication</label>
      <label class="inline-flex min-h-11 cursor-pointer items-center rounded-full border border-tsp13-line bg-white px-4 text-sm font-semibold text-tsp13-mut transition hover:text-tsp13-ink has-checked:border-transparent has-checked:bg-tsp13-ink has-checked:text-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="radio" name="tsp-13-cat" id="tsp-13-c-dev" class="sr-only">Developer</label>
      <label class="inline-flex min-h-11 cursor-pointer items-center rounded-full border border-tsp13-line bg-white px-4 text-sm font-semibold text-tsp13-mut transition hover:text-tsp13-ink has-checked:border-transparent has-checked:bg-tsp13-ink has-checked:text-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="radio" name="tsp-13-cat" id="tsp-13-c-design" class="sr-only">Design</label>
      <label class="inline-flex min-h-11 cursor-pointer items-center rounded-full border border-tsp13-line bg-white px-4 text-sm font-semibold text-tsp13-mut transition hover:text-tsp13-ink has-checked:border-transparent has-checked:bg-tsp13-ink has-checked:text-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="radio" name="tsp-13-cat" id="tsp-13-c-prod" class="sr-only">Productivity</label>
      <label class="inline-flex min-h-11 cursor-pointer items-center rounded-full border border-tsp13-line bg-white px-4 text-sm font-semibold text-tsp13-mut transition hover:text-tsp13-ink has-checked:border-transparent has-checked:bg-tsp13-ink has-checked:text-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="radio" name="tsp-13-cat" id="tsp-13-c-sales" class="sr-only">Sales</label>
    </fieldset>

    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 group-has-[#tsp-13-c-on:checked]/apps:[&>article:not(:has(input:checked))]:hidden group-has-[#tsp-13-c-comm:checked]/apps:[&>[data-cat]:not([data-cat=comm])]:hidden group-has-[#tsp-13-c-dev:checked]/apps:[&>[data-cat]:not([data-cat=dev])]:hidden group-has-[#tsp-13-c-design:checked]/apps:[&>[data-cat]:not([data-cat=design])]:hidden group-has-[#tsp-13-c-prod:checked]/apps:[&>[data-cat]:not([data-cat=prod])]:hidden group-has-[#tsp-13-c-sales:checked]/apps:[&>[data-cat]:not([data-cat=sales])]:hidden">
      <article data-cat="comm" class="group/card grid content-start gap-4 rounded-3xl border border-tsp13-line bg-white p-5 shadow-[0_1px_2px_rgb(0_0_0/0.04)] transition hover:-translate-y-0.5 hover:shadow-[0_18px_40px_-24px_rgb(20_20_40/0.3)] has-checked:border-tsp13-acc/40 has-checked:ring-4 has-checked:ring-tsp13-acc/8 motion-reduce:transition-none">
        <div class="flex items-start gap-4"><span class="grid size-12 flex-none place-items-center rounded-2xl bg-[#4a154b] text-lg font-extrabold text-white">S</span><div class="min-w-0 flex-1"><h2 class="font-bold">Slack</h2><p class="text-xs font-semibold uppercase tracking-wide text-tsp13-mut">Communication</p></div></div>
        <p class="text-sm text-tsp13-mut">Post updates to channels and turn messages into tasks.</p>
        <div class="hidden gap-1 rounded-2xl bg-tsp13-bg p-3 text-xs text-tsp13-mut group-has-checked/card:grid"><span><strong class="font-semibold text-tsp13-ink">Can:</strong> read channel names, post messages</span><span>Connected by Ava · posting to #eng-alerts</span></div>
        <label class="inline-flex min-h-11 w-fit cursor-pointer items-center gap-2 rounded-xl border border-tsp13-line px-4 text-sm font-bold transition hover:bg-tsp13-bg has-checked:border-emerald-200 has-checked:bg-emerald-50 has-checked:text-emerald-700 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="checkbox" class="sr-only checked:[counter-increment:tsp13]" checked aria-label="Connect Slack"><span class="group-has-checked/card:hidden">Connect</span><span class="hidden items-center gap-1.5 group-has-checked/card:inline-flex"><span class="size-1.5 rounded-full bg-emerald-500"></span>Connected</span></label>
      </article>
      <article data-cat="dev" class="group/card grid content-start gap-4 rounded-3xl border border-tsp13-line bg-white p-5 shadow-[0_1px_2px_rgb(0_0_0/0.04)] transition hover:-translate-y-0.5 hover:shadow-[0_18px_40px_-24px_rgb(20_20_40/0.3)] has-checked:border-tsp13-acc/40 has-checked:ring-4 has-checked:ring-tsp13-acc/8 motion-reduce:transition-none">
        <div class="flex items-start gap-4"><span class="grid size-12 flex-none place-items-center rounded-2xl bg-[#1f2328] text-lg font-extrabold text-white">G</span><div class="min-w-0 flex-1"><h2 class="font-bold">GitHub</h2><p class="text-xs font-semibold uppercase tracking-wide text-tsp13-mut">Developer</p></div></div>
        <p class="text-sm text-tsp13-mut">Link pull requests to tasks and close them on merge.</p>
        <div class="hidden gap-1 rounded-2xl bg-tsp13-bg p-3 text-xs text-tsp13-mut group-has-checked/card:grid"><span><strong class="font-semibold text-tsp13-ink">Can:</strong> read repos, PRs and commit status</span><span>Connected by Noah · 14 repositories</span></div>
        <label class="inline-flex min-h-11 w-fit cursor-pointer items-center gap-2 rounded-xl border border-tsp13-line px-4 text-sm font-bold transition hover:bg-tsp13-bg has-checked:border-emerald-200 has-checked:bg-emerald-50 has-checked:text-emerald-700 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="checkbox" class="sr-only checked:[counter-increment:tsp13]" checked aria-label="Connect GitHub"><span class="group-has-checked/card:hidden">Connect</span><span class="hidden items-center gap-1.5 group-has-checked/card:inline-flex"><span class="size-1.5 rounded-full bg-emerald-500"></span>Connected</span></label>
      </article>
      <article data-cat="design" class="group/card grid content-start gap-4 rounded-3xl border border-tsp13-line bg-white p-5 shadow-[0_1px_2px_rgb(0_0_0/0.04)] transition hover:-translate-y-0.5 hover:shadow-[0_18px_40px_-24px_rgb(20_20_40/0.3)] has-checked:border-tsp13-acc/40 has-checked:ring-4 has-checked:ring-tsp13-acc/8 motion-reduce:transition-none">
        <div class="flex items-start gap-4"><span class="grid size-12 flex-none place-items-center rounded-2xl bg-linear-135 from-[#f24e1e] via-[#a259ff] to-[#1abcfe] text-lg font-extrabold text-white">F</span><div class="min-w-0 flex-1"><h2 class="font-bold">Figma</h2><p class="text-xs font-semibold uppercase tracking-wide text-tsp13-mut">Design</p></div></div>
        <p class="text-sm text-tsp13-mut">Embed live frames in docs; previews update as designs change.</p>
        <div class="hidden gap-1 rounded-2xl bg-tsp13-bg p-3 text-xs text-tsp13-mut group-has-checked/card:grid"><span><strong class="font-semibold text-tsp13-ink">Can:</strong> read files you share</span><span>Connected by Mia · 6 embeds</span></div>
        <label class="inline-flex min-h-11 w-fit cursor-pointer items-center gap-2 rounded-xl border border-tsp13-line px-4 text-sm font-bold transition hover:bg-tsp13-bg has-checked:border-emerald-200 has-checked:bg-emerald-50 has-checked:text-emerald-700 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="checkbox" class="sr-only checked:[counter-increment:tsp13]" checked aria-label="Connect Figma"><span class="group-has-checked/card:hidden">Connect</span><span class="hidden items-center gap-1.5 group-has-checked/card:inline-flex"><span class="size-1.5 rounded-full bg-emerald-500"></span>Connected</span></label>
      </article>
      <article data-cat="prod" class="group/card grid content-start gap-4 rounded-3xl border border-tsp13-line bg-white p-5 shadow-[0_1px_2px_rgb(0_0_0/0.04)] transition hover:-translate-y-0.5 hover:shadow-[0_18px_40px_-24px_rgb(20_20_40/0.3)] has-checked:border-tsp13-acc/40 has-checked:ring-4 has-checked:ring-tsp13-acc/8 motion-reduce:transition-none">
        <div class="flex items-start gap-4"><span class="grid size-12 flex-none place-items-center rounded-2xl bg-[#1a73e8] text-lg font-extrabold text-white">D</span><div class="min-w-0 flex-1"><h2 class="font-bold">Google Drive</h2><p class="text-xs font-semibold uppercase tracking-wide text-tsp13-mut">Productivity</p></div></div>
        <p class="text-sm text-tsp13-mut">Attach Docs, Sheets and Slides with live previews.</p>
        <div class="hidden gap-1 rounded-2xl bg-tsp13-bg p-3 text-xs text-tsp13-mut group-has-checked/card:grid"><span><strong class="font-semibold text-tsp13-ink">Can:</strong> open files you pick</span><span>Connected just now</span></div>
        <label class="inline-flex min-h-11 w-fit cursor-pointer items-center gap-2 rounded-xl border border-tsp13-line px-4 text-sm font-bold transition hover:bg-tsp13-bg has-checked:border-emerald-200 has-checked:bg-emerald-50 has-checked:text-emerald-700 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="checkbox" class="sr-only checked:[counter-increment:tsp13]" aria-label="Connect Google Drive"><span class="group-has-checked/card:hidden">Connect</span><span class="hidden items-center gap-1.5 group-has-checked/card:inline-flex"><span class="size-1.5 rounded-full bg-emerald-500"></span>Connected</span></label>
      </article>
      <article data-cat="prod" class="group/card grid content-start gap-4 rounded-3xl border border-tsp13-line bg-white p-5 shadow-[0_1px_2px_rgb(0_0_0/0.04)] transition hover:-translate-y-0.5 hover:shadow-[0_18px_40px_-24px_rgb(20_20_40/0.3)] has-checked:border-tsp13-acc/40 has-checked:ring-4 has-checked:ring-tsp13-acc/8 motion-reduce:transition-none">
        <div class="flex items-start gap-4"><span class="grid size-12 flex-none place-items-center rounded-2xl bg-white text-lg font-extrabold text-black ring-1 ring-tsp13-line">N</span><div class="min-w-0 flex-1"><h2 class="font-bold">Notion</h2><p class="text-xs font-semibold uppercase tracking-wide text-tsp13-mut">Productivity</p></div></div>
        <p class="text-sm text-tsp13-mut">Sync specs and meeting notes into project timelines.</p>
        <div class="hidden gap-1 rounded-2xl bg-tsp13-bg p-3 text-xs text-tsp13-mut group-has-checked/card:grid"><span><strong class="font-semibold text-tsp13-ink">Can:</strong> read pages you share</span><span>Connected just now</span></div>
        <label class="inline-flex min-h-11 w-fit cursor-pointer items-center gap-2 rounded-xl border border-tsp13-line px-4 text-sm font-bold transition hover:bg-tsp13-bg has-checked:border-emerald-200 has-checked:bg-emerald-50 has-checked:text-emerald-700 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="checkbox" class="sr-only checked:[counter-increment:tsp13]" aria-label="Connect Notion"><span class="group-has-checked/card:hidden">Connect</span><span class="hidden items-center gap-1.5 group-has-checked/card:inline-flex"><span class="size-1.5 rounded-full bg-emerald-500"></span>Connected</span></label>
      </article>
      <article data-cat="dev" class="group/card grid content-start gap-4 rounded-3xl border border-tsp13-line bg-white p-5 shadow-[0_1px_2px_rgb(0_0_0/0.04)] transition hover:-translate-y-0.5 hover:shadow-[0_18px_40px_-24px_rgb(20_20_40/0.3)] has-checked:border-tsp13-acc/40 has-checked:ring-4 has-checked:ring-tsp13-acc/8 motion-reduce:transition-none">
        <div class="flex items-start gap-4"><span class="grid size-12 flex-none place-items-center rounded-2xl bg-[#362d59] text-lg font-extrabold text-white">S</span><div class="min-w-0 flex-1"><h2 class="font-bold">Sentry</h2><p class="text-xs font-semibold uppercase tracking-wide text-tsp13-mut">Developer</p></div></div>
        <p class="text-sm text-tsp13-mut">Open issues from errors and link them to releases.</p>
        <div class="hidden gap-1 rounded-2xl bg-tsp13-bg p-3 text-xs text-tsp13-mut group-has-checked/card:grid"><span><strong class="font-semibold text-tsp13-ink">Can:</strong> read issues and releases</span><span>Connected just now</span></div>
        <label class="inline-flex min-h-11 w-fit cursor-pointer items-center gap-2 rounded-xl border border-tsp13-line px-4 text-sm font-bold transition hover:bg-tsp13-bg has-checked:border-emerald-200 has-checked:bg-emerald-50 has-checked:text-emerald-700 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="checkbox" class="sr-only checked:[counter-increment:tsp13]" aria-label="Connect Sentry"><span class="group-has-checked/card:hidden">Connect</span><span class="hidden items-center gap-1.5 group-has-checked/card:inline-flex"><span class="size-1.5 rounded-full bg-emerald-500"></span>Connected</span></label>
      </article>
      <article data-cat="comm" class="group/card grid content-start gap-4 rounded-3xl border border-tsp13-line bg-white p-5 shadow-[0_1px_2px_rgb(0_0_0/0.04)] transition hover:-translate-y-0.5 hover:shadow-[0_18px_40px_-24px_rgb(20_20_40/0.3)] has-checked:border-tsp13-acc/40 has-checked:ring-4 has-checked:ring-tsp13-acc/8 motion-reduce:transition-none">
        <div class="flex items-start gap-4"><span class="grid size-12 flex-none place-items-center rounded-2xl bg-[#2d8cff] text-lg font-extrabold text-white">Z</span><div class="min-w-0 flex-1"><h2 class="font-bold">Zoom</h2><p class="text-xs font-semibold uppercase tracking-wide text-tsp13-mut">Communication</p></div></div>
        <p class="text-sm text-tsp13-mut">Start a call from any task; recordings attach automatically.</p>
        <div class="hidden gap-1 rounded-2xl bg-tsp13-bg p-3 text-xs text-tsp13-mut group-has-checked/card:grid"><span><strong class="font-semibold text-tsp13-ink">Can:</strong> create meetings, read recordings</span><span>Connected just now</span></div>
        <label class="inline-flex min-h-11 w-fit cursor-pointer items-center gap-2 rounded-xl border border-tsp13-line px-4 text-sm font-bold transition hover:bg-tsp13-bg has-checked:border-emerald-200 has-checked:bg-emerald-50 has-checked:text-emerald-700 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="checkbox" class="sr-only checked:[counter-increment:tsp13]" aria-label="Connect Zoom"><span class="group-has-checked/card:hidden">Connect</span><span class="hidden items-center gap-1.5 group-has-checked/card:inline-flex"><span class="size-1.5 rounded-full bg-emerald-500"></span>Connected</span></label>
      </article>
      <article data-cat="sales" class="group/card grid content-start gap-4 rounded-3xl border border-tsp13-line bg-white p-5 shadow-[0_1px_2px_rgb(0_0_0/0.04)] transition hover:-translate-y-0.5 hover:shadow-[0_18px_40px_-24px_rgb(20_20_40/0.3)] has-checked:border-tsp13-acc/40 has-checked:ring-4 has-checked:ring-tsp13-acc/8 motion-reduce:transition-none">
        <div class="flex items-start gap-4"><span class="grid size-12 flex-none place-items-center rounded-2xl bg-[#00a1e0] text-lg font-extrabold text-white">S</span><div class="min-w-0 flex-1"><h2 class="flex items-center gap-2 font-bold">Salesforce <span class="rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-amber-800">Business</span></h2><p class="text-xs font-semibold uppercase tracking-wide text-tsp13-mut">Sales</p></div></div>
        <p class="text-sm text-tsp13-mut">Mirror accounts and opportunities onto customer projects.</p>
        <div class="hidden gap-1 rounded-2xl bg-tsp13-bg p-3 text-xs text-tsp13-mut group-has-checked/card:grid"><span><strong class="font-semibold text-tsp13-ink">Can:</strong> read accounts and opportunities</span><span>Connected just now</span></div>
        <label class="inline-flex min-h-11 w-fit cursor-pointer items-center gap-2 rounded-xl border border-tsp13-line px-4 text-sm font-bold transition hover:bg-tsp13-bg has-checked:border-emerald-200 has-checked:bg-emerald-50 has-checked:text-emerald-700 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="checkbox" class="sr-only checked:[counter-increment:tsp13]" aria-label="Connect Salesforce"><span class="group-has-checked/card:hidden">Connect</span><span class="hidden items-center gap-1.5 group-has-checked/card:inline-flex"><span class="size-1.5 rounded-full bg-emerald-500"></span>Connected</span></label>
      </article>
      <article data-cat="sales" class="group/card grid content-start gap-4 rounded-3xl border border-tsp13-line bg-white p-5 shadow-[0_1px_2px_rgb(0_0_0/0.04)] transition hover:-translate-y-0.5 hover:shadow-[0_18px_40px_-24px_rgb(20_20_40/0.3)] has-checked:border-tsp13-acc/40 has-checked:ring-4 has-checked:ring-tsp13-acc/8 motion-reduce:transition-none">
        <div class="flex items-start gap-4"><span class="grid size-12 flex-none place-items-center rounded-2xl bg-[#ff7a59] text-lg font-extrabold text-white">H</span><div class="min-w-0 flex-1"><h2 class="font-bold">HubSpot</h2><p class="text-xs font-semibold uppercase tracking-wide text-tsp13-mut">Sales</p></div></div>
        <p class="text-sm text-tsp13-mut">Create deals from forms and track handoffs to delivery.</p>
        <div class="hidden gap-1 rounded-2xl bg-tsp13-bg p-3 text-xs text-tsp13-mut group-has-checked/card:grid"><span><strong class="font-semibold text-tsp13-ink">Can:</strong> read contacts and deals</span><span>Connected just now</span></div>
        <label class="inline-flex min-h-11 w-fit cursor-pointer items-center gap-2 rounded-xl border border-tsp13-line px-4 text-sm font-bold transition hover:bg-tsp13-bg has-checked:border-emerald-200 has-checked:bg-emerald-50 has-checked:text-emerald-700 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp13-acc"><input type="checkbox" class="sr-only checked:[counter-increment:tsp13]" aria-label="Connect HubSpot"><span class="group-has-checked/card:hidden">Connect</span><span class="hidden items-center gap-1.5 group-has-checked/card:inline-flex"><span class="size-1.5 rounded-full bg-emerald-500"></span>Connected</span></label>
      </article>
    </div>

    <div class="flex flex-wrap items-center justify-between gap-4 rounded-3xl border border-dashed border-tsp13-line p-5">
      <p class="text-sm text-tsp13-mut"><strong class="font-semibold text-tsp13-ink">Don't see your tool?</strong> Build your own with the REST API and webhooks.</p>
      <a href="#tsp-13-h" class="inline-flex min-h-11 items-center gap-2 rounded-xl px-3 text-sm font-bold text-tsp13-acc transition hover:bg-tsp13-acc/8 focus-visible:outline-2 focus-visible:outline-tsp13-acc">Read the API docs<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
    </div>
  </div>
  <p class="fixed inset-x-0 bottom-4 z-10 mx-auto flex w-fit items-center gap-2 rounded-full bg-tsp13-ink py-2.5 pl-4 pr-5 text-sm font-semibold text-white shadow-2xl before:grid before:size-6 before:place-items-center before:rounded-full before:bg-tsp13-acc before:text-xs before:font-extrabold before:content-[counter(tsp13)]">connected in this view</p>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tsp13-bg: #f5f4f1;
  --color-tsp13-bg: oklch(0.967 0.005 85);
  --color-tsp13-ink: #1b1a17;
  --color-tsp13-ink: oklch(0.215 0.007 85);
  --color-tsp13-mut: #67645c;
  --color-tsp13-mut: oklch(0.51 0.014 85);
  --color-tsp13-line: #e6e3dc;
  --color-tsp13-line: oklch(0.917 0.01 85);
  --color-tsp13-acc: #2f6bff;
  --color-tsp13-acc: oklch(0.573 0.229 262);
  --font-tsp13-sans: 'Bricolage Grotesque', system-ui, sans-serif;
}

.tsp-13 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Two kinds of state, both native. The filter chips are a radio group read by stacked variants on the grid: when a chip is checked, every card whose data-cat doesn't match is hidden. Each card's Connect control is a checkbox inside a <label>; the card is group/card, so the label text, ring and access panel all switch with group-has-checked/card:.

Counting without a script. The section resets a counter; every checked connect box increments it through an arbitrary property, and the footer prints it with before:content-[counter(tsp13)]. Because counters skip display:none elements, the footer reads 'in this view' — honest when a filter is active.

Make it yours

  • Add an app: copy an <article>, set its data-cat, tile colour and copy.
  • Add a category: one chip radio and one more group-has-[…]/apps:[&>[data-cat]:not(…)]:hidden class on the grid.
  • Wire real OAuth by turning the label into a link when unchecked — the visual states stay the same.

Gotchas — read before shipping

  • Counters don't count hidden elements — that's why the footer is scoped to the current view.
  • Keep connect checkboxes sr-only, not hidden, so they stay focusable and still increment the counter.
  • Use letter tiles or official, licensed logos — never redraw third-party marks.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

:has() powers filters and card states (Chrome 105 / Safari 15.4 / Firefox 121). Without it every card shows and the connect boxes still toggle.

Techniques used in this demo

Utilitiesfirst-class utility or variant

gridtw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →