Dashboard Tabs

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
103
104
105
106

<div class="w-full max-w-5xl bg-white rounded-2xl border border-gray-200 shadow-sm">
  <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 p-6 border-b border-gray-100">
    <div>
      <h2 class="text-lg font-semibold text-gray-900">Analytics Overview</h2>
      <p class="text-sm text-gray-500">Performance across channels · last 30 days</p>
    </div>
    <div class="flex items-center gap-2 text-xs">
      <span class="inline-flex items-center gap-1.5 text-gray-500"><span class="w-2.5 h-2.5 rounded-sm bg-indigo-500"></span> This period</span>
      <span class="inline-flex items-center gap-1.5 text-gray-400"><span class="w-2.5 h-2.5 rounded-sm bg-gray-300"></span> Previous</span>
    </div>
  </div>

  <div class="px-6 pt-4">
    <div role="tablist" aria-label="Analytics views" class="flex items-center gap-1 border-b border-gray-200 overflow-x-auto">
      <button role="tab" id="dtab-revenue" aria-selected="true" aria-controls="dpanel-revenue" tabindex="0"
        class="px-4 py-2.5 text-sm font-medium text-indigo-600 border-b-2 border-indigo-600 -mb-px transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 rounded-t-md whitespace-nowrap">
        Revenue
      </button>
      <button role="tab" id="dtab-traffic" aria-selected="false" aria-controls="dpanel-traffic" tabindex="-1"
        class="px-4 py-2.5 text-sm font-medium text-gray-500 border-b-2 border-transparent -mb-px hover:text-gray-800 hover:border-gray-300 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 rounded-t-md whitespace-nowrap">
        Traffic
      </button>
      <button role="tab" id="dtab-conversion" aria-selected="false" aria-controls="dpanel-conversion" tabindex="-1"
        class="px-4 py-2.5 text-sm font-medium text-gray-500 border-b-2 border-transparent -mb-px hover:text-gray-800 hover:border-gray-300 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 rounded-t-md whitespace-nowrap">
        Conversion
      </button>
      <button role="tab" id="dtab-audience" aria-selected="false" aria-controls="dpanel-audience" tabindex="-1"
        class="px-4 py-2.5 text-sm font-medium text-gray-500 border-b-2 border-transparent -mb-px hover:text-gray-800 hover:border-gray-300 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 rounded-t-md whitespace-nowrap">
        Audience
      </button>
    </div>
  </div>

  <div class="p-6">
    <!-- Revenue -->
    <div role="tabpanel" id="dpanel-revenue" aria-labelledby="dtab-revenue" tabindex="0" class="focus:outline-none">
      <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6">
        <div class="rounded-xl border border-gray-100 p-4"><p class="text-xs text-gray-500">Total revenue</p><p class="mt-1 text-2xl font-bold text-gray-900">$84,210</p><p class="mt-1 text-xs font-medium text-emerald-600">▲ 12.4%</p></div>
        <div class="rounded-xl border border-gray-100 p-4"><p class="text-xs text-gray-500">Orders</p><p class="mt-1 text-2xl font-bold text-gray-900">1,938</p><p class="mt-1 text-xs font-medium text-emerald-600">▲ 5.1%</p></div>
        <div class="rounded-xl border border-gray-100 p-4"><p class="text-xs text-gray-500">Avg. order</p><p class="mt-1 text-2xl font-bold text-gray-900">$43.5</p><p class="mt-1 text-xs font-medium text-rose-600">▼ 2.0%</p></div>
        <div class="rounded-xl border border-gray-100 p-4"><p class="text-xs text-gray-500">Refunds</p><p class="mt-1 text-2xl font-bold text-gray-900">$612</p><p class="mt-1 text-xs font-medium text-gray-400">— flat</p></div>
      </div>
      <div class="rounded-xl border border-gray-100 p-5">
        <div class="flex items-end gap-2 h-40">
          <div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-indigo-500 rounded-t" style="height:40%"></div><span class="text-[10px] text-gray-400">W1</span></div>
          <div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-indigo-500 rounded-t" style="height:62%"></div><span class="text-[10px] text-gray-400">W2</span></div>
          <div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-indigo-500 rounded-t" style="height:55%"></div><span class="text-[10px] text-gray-400">W3</span></div>
          <div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-indigo-500 rounded-t" style="height:78%"></div><span class="text-[10px] text-gray-400">W4</span></div>
        </div>
      </div>
    </div>
    <!-- Traffic -->
    <div role="tabpanel" id="dpanel-traffic" aria-labelledby="dtab-traffic" tabindex="0" class="hidden focus:outline-none">
      <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
        <div class="rounded-xl border border-gray-100 p-4"><p class="text-xs text-gray-500">Sessions</p><p class="mt-1 text-2xl font-bold text-gray-900">128,402</p><p class="mt-1 text-xs font-medium text-emerald-600">▲ 8.9%</p></div>
        <div class="rounded-xl border border-gray-100 p-4"><p class="text-xs text-gray-500">Bounce rate</p><p class="mt-1 text-2xl font-bold text-gray-900">42.3%</p><p class="mt-1 text-xs font-medium text-emerald-600">▼ 1.2%</p></div>
        <div class="rounded-xl border border-gray-100 p-4"><p class="text-xs text-gray-500">Avg. duration</p><p class="mt-1 text-2xl font-bold text-gray-900">3m 12s</p><p class="mt-1 text-xs font-medium text-emerald-600">▲ 0.4%</p></div>
      </div>
    </div>
    <!-- Conversion -->
    <div role="tabpanel" id="dpanel-conversion" aria-labelledby="dtab-conversion" tabindex="0" class="hidden focus:outline-none">
      <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
        <div class="rounded-xl border border-gray-100 p-4"><p class="text-xs text-gray-500">Conversion rate</p><p class="mt-1 text-2xl font-bold text-gray-900">3.8%</p><p class="mt-1 text-xs font-medium text-emerald-600">▲ 0.6%</p></div>
        <div class="rounded-xl border border-gray-100 p-4"><p class="text-xs text-gray-500">Add to cart</p><p class="mt-1 text-2xl font-bold text-gray-900">18.2%</p><p class="mt-1 text-xs font-medium text-emerald-600">▲ 1.1%</p></div>
        <div class="rounded-xl border border-gray-100 p-4"><p class="text-xs text-gray-500">Checkout</p><p class="mt-1 text-2xl font-bold text-gray-900">62.4%</p><p class="mt-1 text-xs font-medium text-rose-600">▼ 0.8%</p></div>
      </div>
    </div>
    <!-- Audience -->
    <div role="tabpanel" id="dpanel-audience" aria-labelledby="dtab-audience" tabindex="0" class="hidden focus:outline-none">
      <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
        <div class="rounded-xl border border-gray-100 p-4"><p class="text-xs text-gray-500">New visitors</p><p class="mt-1 text-2xl font-bold text-gray-900">61.4%</p></div>
        <div class="rounded-xl border border-gray-100 p-4"><p class="text-xs text-gray-500">Returning</p><p class="mt-1 text-2xl font-bold text-gray-900">38.6%</p></div>
        <div class="rounded-xl border border-gray-100 p-4"><p class="text-xs text-gray-500">Top country</p><p class="mt-1 text-2xl font-bold text-gray-900">United States</p></div>
      </div>
    </div>
  </div>
</div>

<script>
  (function () {
    var list = document.querySelector('[aria-label="Analytics views"]');
    if (!list) return;
    var tabs = Array.prototype.slice.call(list.querySelectorAll('[role="tab"]'));
    var panels = tabs.map(function (t) { return document.getElementById(t.getAttribute('aria-controls')); });
    function activate(tab) {
      tabs.forEach(function (t) {
        var s = t === tab;
        t.setAttribute('aria-selected', s); t.tabIndex = s ? 0 : -1;
        t.classList.toggle('text-indigo-600', s); t.classList.toggle('border-indigo-600', s);
        t.classList.toggle('text-gray-500', !s); t.classList.toggle('border-transparent', !s);
      });
      panels.forEach(function (p) { if (p) p.classList.add('hidden'); });
      var panel = document.getElementById(tab.getAttribute('aria-controls'));
      if (panel) panel.classList.remove('hidden');
    }
    tabs.forEach(function (tab, i) {
      tab.addEventListener('click', function () { activate(tab); });
      tab.addEventListener('keydown', function (e) {
        var idx = null;
        if (e.key === 'ArrowRight') idx = (i + 1) % tabs.length;
        if (e.key === 'ArrowLeft') idx = (i - 1 + tabs.length) % tabs.length;
        if (idx !== null) { e.preventDefault(); tabs[idx].focus(); activate(tabs[idx]); }
      });
    });
  })();
</script>

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

# Dashboard Tabs

Dashboard-oriented tabs.

## Usage
```bash
npx devsnips add Tailwind/Components/Tabs/dashboard-tabs
```
Copy from `code.html`.

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