Pricing FAQ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

<!--
Snippet Name: Pricing FAQ
Description: Pricing-page FAQ grouped by plan tier, single-open, with tier-colored accents and an upgrade CTA in each answer.
Author: DevSnips Contributors
Usage Example: Pricing pages where common questions are organized per plan.
-->
<div class="space-y-6" data-accordion="pricing" data-single-open>
  <!-- Starter group -->
  <section>
    <div class="mb-2 flex items-center gap-2.5">
      <span class="flex h-6 w-6 items-center justify-center rounded-md bg-gray-100 text-[11px] font-bold text-gray-600">S</span>
      <h3 class="text-sm font-semibold text-gray-900">Starter</h3>
      <span class="text-xs text-gray-400">Free forever</span>
    </div>
    <div class="overflow-hidden rounded-xl border border-gray-200 bg-white divide-y divide-gray-100" data-accordion-item>
      <button type="button" id="pricing-trigger-1" aria-controls="pricing-panel-1" aria-expanded="false" class="accordion-trigger group flex w-full items-center justify-between gap-4 px-4 py-3.5 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-inset">
        <span class="text-sm font-medium text-gray-900">What's the seat limit on the free plan?</span>
        <svg class="accordion-chevron h-5 w-5 shrink-0 text-gray-400 transition-transform duration-300 ease-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
      </button>
      <div id="pricing-panel-1" role="region" aria-labelledby="pricing-trigger-1" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
        <div class="overflow-hidden"><div class="px-4 pb-4 text-sm leading-relaxed text-gray-600">Up to 3 members and unlimited projects. You keep all core features forever, no credit card required. Need more seats? Upgrade to Pro anytime and we prorate the difference.</div></div>
      </div>
    </div>
  </section>

  <!-- Pro group -->
  <section>
    <div class="mb-2 flex items-center gap-2.5">
      <span class="flex h-6 w-6 items-center justify-center rounded-md bg-blue-600 text-[11px] font-bold text-white">P</span>
      <h3 class="text-sm font-semibold text-gray-900">Pro</h3>
      <span class="text-xs text-gray-400">$19 / user / month</span>
    </div>
    <div class="overflow-hidden rounded-xl border border-gray-200 bg-white divide-y divide-gray-100" data-accordion-item>
      <button type="button" id="pricing-trigger-2" aria-controls="pricing-panel-2" aria-expanded="false" class="accordion-trigger group flex w-full items-center justify-between gap-4 px-4 py-3.5 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-inset">
        <span class="text-sm font-medium text-gray-900">Can I mix monthly and annual seats?</span>
        <svg class="accordion-chevron h-5 w-5 shrink-0 text-gray-400 transition-transform duration-300 ease-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
      </button>
      <div id="pricing-panel-2" role="region" aria-labelledby="pricing-trigger-2" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
        <div class="overflow-hidden">
          <div class="px-4 pb-4">
            <p class="text-sm leading-relaxed text-gray-600">Yes. Each seat is billed independently, so you can annual-prepay the core team and keep contractors on monthly. Annual seats save 20% and lock in pricing for a year.</p>
            <a href="#" class="mt-3 inline-flex items-center gap-1.5 text-sm font-medium text-blue-600 hover:text-blue-700">Upgrade to Pro <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></a>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-2 overflow-hidden rounded-xl border border-gray-200 bg-white divide-y divide-gray-100" data-accordion-item>
      <button type="button" id="pricing-trigger-3" aria-controls="pricing-panel-3" aria-expanded="false" class="accordion-trigger group flex w-full items-center justify-between gap-4 px-4 py-3.5 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-inset">
        <span class="text-sm font-medium text-gray-900">What happens if I exceed usage limits?</span>
        <svg class="accordion-chevron h-5 w-5 shrink-0 text-gray-400 transition-transform duration-300 ease-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
      </button>
      <div id="pricing-panel-3" role="region" aria-labelledby="pricing-trigger-3" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
        <div class="overflow-hidden"><div class="px-4 pb-4 text-sm leading-relaxed text-gray-600">Nothing breaks. We notify you at 80% and 100% of your plan's included usage, and overages are billed at transparent per-unit rates listed in your dashboard. You can set a hard cap to pause extra spend.</div></div>
      </div>
    </div>
  </section>

  <!-- Enterprise group -->
  <section>
    <div class="mb-2 flex items-center gap-2.5">
      <span class="flex h-6 w-6 items-center justify-center rounded-md bg-gray-900 text-[11px] font-bold text-white">E</span>
      <h3 class="text-sm font-semibold text-gray-900">Enterprise</h3>
      <span class="text-xs text-gray-400">Custom</span>
    </div>
    <div class="overflow-hidden rounded-xl border border-gray-200 bg-white divide-y divide-gray-100" data-accordion-item>
      <button type="button" id="pricing-trigger-4" aria-controls="pricing-panel-4" aria-expanded="false" class="accordion-trigger group flex w-full items-center justify-between gap-4 px-4 py-3.5 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-inset">
        <span class="text-sm font-medium text-gray-900">Is there a minimum contract term?</span>
        <svg class="accordion-chevron h-5 w-5 shrink-0 text-gray-400 transition-transform duration-300 ease-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
      </button>
      <div id="pricing-panel-4" role="region" aria-labelledby="pricing-trigger-4" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
        <div class="overflow-hidden">
          <div class="px-4 pb-4">
            <p class="text-sm leading-relaxed text-gray-600">Enterprise plans start at 12 months with flexible ramp terms. We offer 36-month contracts with price-lock guarantees and a 60-day satisfaction window, plus a dedicated solutions engineer.</p>
            <a href="#" class="mt-3 inline-flex items-center gap-1.5 text-sm font-medium text-gray-900 hover:text-gray-700">Talk to sales <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <script>
    (function () {
      const root = document.currentScript.closest('[data-accordion]');
      if (!root) return;
      const singleOpen = root.hasAttribute('data-single-open');
      const items = Array.from(root.querySelectorAll('[data-accordion-item]'));
      items.forEach((item) => {
        const trigger = item.querySelector('.accordion-trigger');
        const panel = item.querySelector('.accordion-panel');
        const chevron = item.querySelector('.accordion-chevron');
        if (!trigger || !panel) return;
        const close = () => { trigger.setAttribute('aria-expanded','false'); panel.classList.remove('grid-rows-[1fr]'); panel.classList.add('grid-rows-[0fr]'); if (chevron) chevron.style.transform=''; };
        const open = () => { trigger.setAttribute('aria-expanded','true'); panel.classList.add('grid-rows-[1fr]'); panel.classList.remove('grid-rows-[0fr]'); if (chevron) chevron.style.transform='rotate(180deg)'; };
        trigger.addEventListener('click', () => {
          const isOpen = trigger.getAttribute('aria-expanded') === 'true';
          if (singleOpen) items.forEach((o) => { if (o !== item) { const t=o.querySelector('.accordion-trigger'); const p=o.querySelector('.accordion-panel'); const c=o.querySelector('.accordion-chevron'); t.setAttribute('aria-expanded','false'); p.classList.remove('grid-rows-[1fr]'); p.classList.add('grid-rows-[0fr]'); if(c) c.style.transform=''; } });
          isOpen ? close() : open();
        });
      });
    })();
  </script>
</div>

1
2
3
4
5
6
7
8
9
10
11
12

# Pricing FAQ

Pricing-page FAQ accordion grouped by plan tier.

## Usage
```bash
npx devsnips add Tailwind/Components/Accordions/pricing-faq
```
Copy from `code.html`.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`