FAQ with demo video cards

Create a hybrid FAQ with Tailwind CSS mixing written answers and short video cards. Open with a heading and a subline explaining that some answers are easier watched than read. Then a grid of three video cards: each is a bordered rounded-xl card with a dark 16-by-9 thumbnail area drawn with a gradient, a centred circular play button, a duration pill in the corner, and below it a question as the card title, a one-line summary and a small transcript link. Under the videos, a heading for written answers and five accordion items in a bordered card with hairline dividers, one containing an inline monospaced snippet. Finish with a row of two links, one to the full video library and one to the documentation, and a muted line noting every clip is captioned.

<section class="mx-auto max-w-4xl px-6 py-16">
  <h1 class="text-3xl font-semibold tracking-tight text-neutral-900">Questions, some of them answered on film</h1>
  <p class="mt-2 text-neutral-500">Anything involving a drag, a menu or a diagram is quicker to watch than to read.</p>

  <div class="mt-9 grid gap-4 sm:grid-cols-3">
    <article class="overflow-hidden rounded-xl border border-neutral-200 bg-white">
      <div class="relative grid aspect-video place-items-center bg-gradient-to-br from-neutral-800 to-neutral-950">
        <button class="grid h-12 w-12 place-items-center rounded-full bg-white/90 text-neutral-900 transition hover:bg-white" aria-label="Play"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m9 7 9 5-9 5V7Z" fill="currentColor" stroke="none"/></svg></button>
        <span class="absolute bottom-2 right-2 rounded bg-black/60 px-1.5 py-0.5 font-mono text-[10px] text-white">2:14</span>
      </div>
      <div class="p-4">
        <p class="text-sm font-medium text-neutral-900">How do I build my first report?</p>
        <p class="mt-1 text-xs leading-relaxed text-neutral-500">From an empty workspace to a shared chart, in real time.</p>
        <a href="#" class="mt-2.5 inline-block text-xs text-neutral-500 underline-offset-4 hover:text-neutral-900 hover:underline">Read the transcript</a>
      </div>
    </article>

    <article class="overflow-hidden rounded-xl border border-neutral-200 bg-white">
      <div class="relative grid aspect-video place-items-center bg-gradient-to-br from-neutral-800 to-neutral-950">
        <button class="grid h-12 w-12 place-items-center rounded-full bg-white/90 text-neutral-900 transition hover:bg-white" aria-label="Play"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m9 7 9 5-9 5V7Z" fill="currentColor" stroke="none"/></svg></button>
        <span class="absolute bottom-2 right-2 rounded bg-black/60 px-1.5 py-0.5 font-mono text-[10px] text-white">3:41</span>
      </div>
      <div class="p-4">
        <p class="text-sm font-medium text-neutral-900">What do row-level rules actually do?</p>
        <p class="mt-1 text-xs leading-relaxed text-neutral-500">Two accounts, the same dashboard, two different sets of rows.</p>
        <a href="#" class="mt-2.5 inline-block text-xs text-neutral-500 underline-offset-4 hover:text-neutral-900 hover:underline">Read the transcript</a>
      </div>
    </article>

    <article class="overflow-hidden rounded-xl border border-neutral-200 bg-white">
      <div class="relative grid aspect-video place-items-center bg-gradient-to-br from-neutral-800 to-neutral-950">
        <button class="grid h-12 w-12 place-items-center rounded-full bg-white/90 text-neutral-900 transition hover:bg-white" aria-label="Play"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m9 7 9 5-9 5V7Z" fill="currentColor" stroke="none"/></svg></button>
        <span class="absolute bottom-2 right-2 rounded bg-black/60 px-1.5 py-0.5 font-mono text-[10px] text-white">1:58</span>
      </div>
      <div class="p-4">
        <p class="text-sm font-medium text-neutral-900">How does the approval flow work?</p>
        <p class="mt-1 text-xs leading-relaxed text-neutral-500">Requesting, reviewing and the audit entry it leaves behind.</p>
        <a href="#" class="mt-2.5 inline-block text-xs text-neutral-500 underline-offset-4 hover:text-neutral-900 hover:underline">Read the transcript</a>
      </div>
    </article>
  </div>

  <h2 class="mt-12 text-xs font-semibold uppercase tracking-widest text-neutral-400">Written answers</h2>
  <div class="mt-3 divide-y divide-neutral-100 overflow-hidden rounded-xl border border-neutral-200 bg-white">
    <details class="group px-5">
      <summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-4">
        <span class="text-sm font-medium text-neutral-900">Which browsers do you support?</span>
        <span class="text-neutral-400 transition-transform group-open:rotate-45"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 5v14M5 12h14"/></svg></span>
      </summary>
      <p class="pb-5 text-sm leading-relaxed text-neutral-500">The current and previous major versions of Chrome, Firefox, Safari and Edge. Older versions keep working but stop receiving fixes.</p>
    </details>
    <details class="group px-5">
      <summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-4">
        <span class="text-sm font-medium text-neutral-900">Can I embed a report in our intranet?</span>
        <span class="text-neutral-400 transition-transform group-open:rotate-45"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 5v14M5 12h14"/></svg></span>
      </summary>
      <div class="pb-5 text-sm leading-relaxed text-neutral-500">
        <p>Yes, with a signed embed token so the viewer inherits the right access rules.</p>
        <pre class="mt-3 overflow-x-auto rounded-lg bg-neutral-900 p-3 font-mono text-xs text-neutral-200">POST /v1/reports/rep_8f21/embed-token</pre>
      </div>
    </details>
    <details class="group px-5">
      <summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-4">
        <span class="text-sm font-medium text-neutral-900">Is there a limit on scheduled reports?</span>
        <span class="text-neutral-400 transition-transform group-open:rotate-45"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 5v14M5 12h14"/></svg></span>
      </summary>
      <p class="pb-5 text-sm leading-relaxed text-neutral-500">Fifty per workspace on Team and unlimited on Scale. Each schedule can have up to 200 recipients.</p>
    </details>
    <details class="group px-5">
      <summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-4">
        <span class="text-sm font-medium text-neutral-900">Do you have a dark theme?</span>
        <span class="text-neutral-400 transition-transform group-open:rotate-45"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 5v14M5 12h14"/></svg></span>
      </summary>
      <p class="pb-5 text-sm leading-relaxed text-neutral-500">It follows your system setting by default, and can be pinned per person in profile settings. Exported PDFs stay light regardless.</p>
    </details>
    <details class="group px-5">
      <summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-4">
        <span class="text-sm font-medium text-neutral-900">Can I use it on a tablet?</span>
        <span class="text-neutral-400 transition-transform group-open:rotate-45"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 5v14M5 12h14"/></svg></span>
      </summary>
      <p class="pb-5 text-sm leading-relaxed text-neutral-500">Viewing and commenting work well. Building reports needs a pointer, so we would not recommend it for authoring.</p>
    </details>
  </div>

  <div class="mt-8 flex flex-wrap items-center gap-6">
    <a href="#" class="text-sm font-medium text-neutral-900 underline-offset-4 hover:underline">All 24 videos <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M14 4h6v6M20 4l-9 9"/><path d="M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6"/></svg></a>
    <a href="#" class="text-sm text-neutral-500 underline-offset-4 hover:text-neutral-900 hover:underline">Read the documentation</a>
    <p class="ml-auto text-xs text-neutral-400">Every clip is captioned and has a transcript.</p>
  </div>
</section>