Dark Accordion

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

<!--
Snippet Name: Dark Accordion
Description: Modern dark-mode dashboard accordion with single-open behavior, metric badges, and an indigo active accent.
Author: DevSnips Contributors
Usage Example: Analytics dashboards and admin panels in dark mode.
-->
<div class="space-y-2.5" data-accordion="dark" data-single-open>
  <div class="rounded-xl border border-white/10 bg-white/5 transition-colors hover:bg-white/[0.07]" data-accordion-item>
    <h3>
      <button type="button" id="dark-trigger-1" aria-controls="dark-panel-1" aria-expanded="false" class="accordion-trigger group flex w-full items-center gap-3 px-4 py-3.5 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 focus-visible:ring-inset rounded-xl">
        <span class="flex h-2 w-2 shrink-0 rounded-full bg-indigo-400 shadow-[0_0_8px_rgba(129,140,248,0.8)]"></span>
        <span class="min-w-0 flex-1">
          <span class="block text-sm font-medium text-white">Traffic sources</span>
          <span class="block text-xs text-white/40">Where visitors come from</span>
        </span>
        <span class="rounded-md bg-white/5 px-2 py-0.5 text-xs font-medium text-white/60">+12.4%</span>
        <svg class="accordion-chevron h-5 w-5 shrink-0 text-white/40 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>
    </h3>
    <div id="dark-panel-1" role="region" aria-labelledby="dark-trigger-1" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
      <div class="overflow-hidden">
        <dl class="grid grid-cols-3 gap-px overflow-hidden border-t border-white/10 bg-white/5">
          <div class="bg-[#0f1117] px-4 py-3"><dt class="text-xs text-white/40">Organic</dt><dd class="mt-0.5 text-sm font-semibold text-white">48.2%</dd></div>
          <div class="bg-[#0f1117] px-4 py-3"><dt class="text-xs text-white/40">Referral</dt><dd class="mt-0.5 text-sm font-semibold text-white">31.0%</dd></div>
          <div class="bg-[#0f1117] px-4 py-3"><dt class="text-xs text-white/40">Direct</dt><dd class="mt-0.5 text-sm font-semibold text-white">20.8%</dd></div>
          <div class="bg-[#0f1117] px-4 py-4 col-span-3"><p class="text-sm leading-relaxed text-white/60">Organic search grew 12.4% week over week, driven by improved rankings on three high-intent terms. Referral traffic is concentrated in two partner domains.</p></div>
        </dl>
      </div>
    </div>
  </div>

  <div class="rounded-xl border border-white/10 bg-white/5 transition-colors hover:bg-white/[0.07]" data-accordion-item>
    <h3>
      <button type="button" id="dark-trigger-2" aria-controls="dark-panel-2" aria-expanded="false" class="accordion-trigger group flex w-full items-center gap-3 px-4 py-3.5 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 focus-visible:ring-inset rounded-xl">
        <span class="flex h-2 w-2 shrink-0 rounded-full bg-emerald-400 shadow-[0_0_8px_rgba(52,211,153,0.8)]"></span>
        <span class="min-w-0 flex-1">
          <span class="block text-sm font-medium text-white">Active users</span>
          <span class="block text-xs text-white/40">Daily and monthly active</span>
        </span>
        <span class="rounded-md bg-emerald-400/10 px-2 py-0.5 text-xs font-medium text-emerald-300">+5.1%</span>
        <svg class="accordion-chevron h-5 w-5 shrink-0 text-white/40 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>
    </h3>
    <div id="dark-panel-2" role="region" aria-labelledby="dark-trigger-2" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
      <div class="overflow-hidden">
        <div class="border-t border-white/10 px-4 py-4 text-sm leading-relaxed text-white/60">DAU climbed to 18,420 with a sticky factor of 0.62. Retention for the cohort that joined two weeks ago is tracking 8% above the prior 90-day baseline.</div>
      </div>
    </div>
  </div>

  <div class="rounded-xl border border-white/10 bg-white/5 transition-colors hover:bg-white/[0.07]" data-accordion-item>
    <h3>
      <button type="button" id="dark-trigger-3" aria-controls="dark-panel-3" aria-expanded="false" class="accordion-trigger group flex w-full items-center gap-3 px-4 py-3.5 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 focus-visible:ring-inset rounded-xl">
        <span class="flex h-2 w-2 shrink-0 rounded-full bg-rose-400 shadow-[0_0_8px_rgba(251,113,133,0.8)]"></span>
        <span class="min-w-0 flex-1">
          <span class="block text-sm font-medium text-white">Churn risk</span>
          <span class="block text-xs text-white/40">Accounts at risk this cycle</span>
        </span>
        <span class="rounded-md bg-rose-400/10 px-2 py-0.5 text-xs font-medium text-rose-300">3 accounts</span>
        <svg class="accordion-chevron h-5 w-5 shrink-0 text-white/40 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>
    </h3>
    <div id="dark-panel-3" role="region" aria-labelledby="dark-trigger-3" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
      <div class="overflow-hidden">
        <div class="border-t border-white/10 px-4 py-4 text-sm leading-relaxed text-white/60">Three accounts show declining usage for two consecutive weeks. A customer success play has been queued for each; expected outreach completes within 48 hours.</div>
      </div>
    </div>
  </div>

  <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

# Dark Accordion

Dark-mode dashboard accordion with status accents.

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

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