Analytics Table

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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141

<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
  <table class="w-full">
    <thead>
      <tr class="bg-gray-50 border-b border-gray-200">
        <th class="px-4 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Channel</th>
        <th class="px-4 py-3.5 text-right text-xs font-bold text-gray-600 uppercase tracking-wider">Visitors</th>
        <th class="px-4 py-3.5 text-right text-xs font-bold text-gray-600 uppercase tracking-wider">Conversions</th>
        <th class="px-4 py-3.5 text-center text-xs font-bold text-gray-600 uppercase tracking-wider">Conv. Rate</th>
        <th class="px-4 py-3.5 text-right text-xs font-bold text-gray-600 uppercase tracking-wider">Revenue</th>
        <th class="px-4 py-3.5 text-right text-xs font-bold text-gray-600 uppercase tracking-wider">Trend</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-100">
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-4 py-4">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-xl bg-blue-100 flex items-center justify-center">
              <svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
            </div>
            <div>
              <p class="text-sm font-semibold text-gray-900">Twitter / X</p>
              <p class="text-xs text-gray-500">Social Media</p>
            </div>
          </div>
        </td>
        <td class="px-4 py-4 text-right text-sm font-semibold text-gray-900">45,892</td>
        <td class="px-4 py-4 text-right text-sm text-gray-600">1,284</td>
        <td class="px-4 py-4 text-center">
          <div class="inline-flex items-center gap-1 px-2 py-1 bg-emerald-100 rounded-full">
            <svg class="w-3 h-3 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
            <span class="text-xs font-semibold text-emerald-600">2.8%</span>
          </div>
        </td>
        <td class="px-4 py-4 text-right text-sm font-bold text-emerald-600">$64,200</td>
        <td class="px-4 py-4 text-right">
          <svg class="w-20 h-8 ml-auto text-emerald-500" viewBox="0 0 80 32"><polyline fill="none" stroke="currentColor" stroke-width="2" points="0,28 13,24 26,20 40,18 53,12 66,8 80,4"/></svg>
        </td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-4 py-4">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-xl bg-indigo-100 flex items-center justify-center">
              <svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/></svg>
            </div>
            <div>
              <p class="text-sm font-semibold text-gray-900">GitHub</p>
              <p class="text-xs text-gray-500">Developer</p>
            </div>
          </div>
        </td>
        <td class="px-4 py-4 text-right text-sm font-semibold text-gray-900">38,456</td>
        <td class="px-4 py-4 text-right text-sm text-gray-600">892</td>
        <td class="px-4 py-4 text-center">
          <div class="inline-flex items-center gap-1 px-2 py-1 bg-emerald-100 rounded-full">
            <svg class="w-3 h-3 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
            <span class="text-xs font-semibold text-emerald-600">2.3%</span>
          </div>
        </td>
        <td class="px-4 py-4 text-right text-sm font-bold text-emerald-600">$44,600</td>
        <td class="px-4 py-4 text-right">
          <svg class="w-20 h-8 ml-auto text-emerald-500" viewBox="0 0 80 32"><polyline fill="none" stroke="currentColor" stroke-width="2" points="0,26 13,22 26,18 40,20 53,14 66,10 80,6"/></svg>
        </td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-4 py-4">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-pink-500 to-rose-500 flex items-center justify-center">
              <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
            </div>
            <div>
              <p class="text-sm font-semibold text-gray-900">Instagram</p>
              <p class="text-xs text-gray-500">Social Media</p>
            </div>
          </div>
        </td>
        <td class="px-4 py-4 text-right text-sm font-semibold text-gray-900">32,891</td>
        <td class="px-4 py-4 text-right text-sm text-gray-600">724</td>
        <td class="px-4 py-4 text-center">
          <div class="inline-flex items-center gap-1 px-2 py-1 bg-amber-100 rounded-full">
            <svg class="w-3 h-3 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg>
            <span class="text-xs font-semibold text-amber-600">2.2%</span>
          </div>
        </td>
        <td class="px-4 py-4 text-right text-sm font-bold text-amber-600">$36,200</td>
        <td class="px-4 py-4 text-right">
          <svg class="w-20 h-8 ml-auto text-amber-500" viewBox="0 0 80 32"><polyline fill="none" stroke="currentColor" stroke-width="2" points="0,10 13,14 26,12 40,16 53,14 66,18 80,16"/></svg>
        </td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-4 py-4">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-xl bg-blue-100 flex items-center justify-center">
              <svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
            </div>
            <div>
              <p class="text-sm font-semibold text-gray-900">LinkedIn</p>
              <p class="text-xs text-gray-500">Professional</p>
            </div>
          </div>
        </td>
        <td class="px-4 py-4 text-right text-sm font-semibold text-gray-900">28,342</td>
        <td class="px-4 py-4 text-right text-sm text-gray-600">652</td>
        <td class="px-4 py-4 text-center">
          <div class="inline-flex items-center gap-1 px-2 py-1 bg-emerald-100 rounded-full">
            <svg class="w-3 h-3 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
            <span class="text-xs font-semibold text-emerald-600">2.3%</span>
          </div>
        </td>
        <td class="px-4 py-4 text-right text-sm font-bold text-emerald-600">$32,600</td>
        <td class="px-4 py-4 text-right">
          <svg class="w-20 h-8 ml-auto text-emerald-500" viewBox="0 0 80 32"><polyline fill="none" stroke="currentColor" stroke-width="2" points="0,22 13,18 26,16 40,14 53,10 66,8 80,4"/></svg>
        </td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-4 py-4">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-xl bg-amber-100 flex items-center justify-center">
              <svg class="w-5 h-5 text-amber-600" fill="currentColor" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg>
            </div>
            <div>
              <p class="text-sm font-semibold text-gray-900">Organic Search</p>
              <p class="text-xs text-gray-500">SEO</p>
            </div>
          </div>
        </td>
        <td class="px-4 py-4 text-right text-sm font-semibold text-gray-900">156,234</td>
        <td class="px-4 py-4 text-right text-sm text-gray-600">3,892</td>
        <td class="px-4 py-4 text-center">
          <div class="inline-flex items-center gap-1 px-2 py-1 bg-emerald-100 rounded-full">
            <svg class="w-3 h-3 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
            <span class="text-xs font-semibold text-emerald-600">2.5%</span>
          </div>
        </td>
        <td class="px-4 py-4 text-right text-sm font-bold text-emerald-600">$194,600</td>
        <td class="px-4 py-4 text-right">
          <svg class="w-20 h-8 ml-auto text-emerald-500" viewBox="0 0 80 32"><polyline fill="none" stroke="currentColor" stroke-width="2" points="0,24 13,20 26,18 40,14 53,10 66,6 80,2"/></svg>
        </td>
      </tr>
    </tbody>
  </table>
</div>

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

# Analytics Table

Analytics data table.

## Usage
```bash
npx devsnips add Tailwind/Components/Tables/analytics-table
```
Copy from `code.html`. Prefer semantic `<table>` markup.

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