Leaderboard 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

<div class="bg-gradient-to-br from-slate-900 to-slate-800 rounded-2xl shadow-xl overflow-hidden">
  <div class="p-6 border-b border-slate-700/50">
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-3">
        <div class="w-12 h-12 bg-gradient-to-br from-amber-400 to-orange-500 rounded-xl flex items-center justify-center">
          <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11H5zm14 3a1 1 0 01-1 1H6a1 1 0 01-1-1v-1h14v1z"/></svg>
        </div>
        <div>
          <h3 class="text-lg font-bold text-white">Season Rankings</h3>
          <p class="text-sm text-slate-400">Top players worldwide</p>
        </div>
      </div>
      <span class="px-3 py-1 bg-amber-500/20 text-amber-400 text-xs font-semibold rounded-full">Season 12</span>
    </div>
  </div>
  <table class="w-full">
    <thead>
      <tr class="border-b border-slate-700/50">
        <th class="px-6 py-3 text-left text-[10px] font-bold text-slate-500 uppercase tracking-wider">Rank</th>
        <th class="px-6 py-3 text-left text-[10px] font-bold text-slate-500 uppercase tracking-wider">Player</th>
        <th class="px-6 py-3 text-right text-[10px] font-bold text-slate-500 uppercase tracking-wider">Level</th>
        <th class="px-6 py-3 text-right text-[10px] font-bold text-slate-500 uppercase tracking-wider">Score</th>
        <th class="px-6 py-3 text-right text-[10px] font-bold text-slate-500 uppercase tracking-wider">Win Rate</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-700/50">
      <tr class="group hover:bg-slate-800/50 transition-colors">
        <td class="px-6 py-4">
          <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-400 to-amber-600 flex items-center justify-center shadow-lg shadow-amber-500/20">
            <span class="text-lg font-black text-white">1</span>
          </div>
        </td>
        <td class="px-6 py-4">
          <div class="flex items-center gap-3">
            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop" alt="Phoenix" class="w-10 h-10 rounded-full object-cover ring-2 ring-amber-500/50">
            <div>
              <p class="text-sm font-bold text-white">Phoenix_Wolf</p>
              <p class="text-xs text-slate-500">Elite Player</p>
            </div>
          </div>
        </td>
        <td class="px-6 py-4 text-right"><span class="text-sm font-bold text-cyan-400">Level 89</span></td>
        <td class="px-6 py-4 text-right"><span class="text-sm font-bold text-white">248,450</span></td>
        <td class="px-6 py-4 text-right"><span class="text-sm font-bold text-emerald-400">78.5%</span></td>
      </tr>
      <tr class="group hover:bg-slate-800/50 transition-colors">
        <td class="px-6 py-4">
          <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-slate-300 to-slate-400 flex items-center justify-center shadow-lg">
            <span class="text-lg font-black text-slate-800">2</span>
          </div>
        </td>
        <td class="px-6 py-4">
          <div class="flex items-center gap-3">
            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&fit=crop" alt="Shadow" class="w-10 h-10 rounded-full object-cover ring-2 ring-slate-400/50">
            <div>
              <p class="text-sm font-bold text-white">Shadow_Ninja</p>
              <p class="text-xs text-slate-500">Pro Player</p>
            </div>
          </div>
        </td>
        <td class="px-6 py-4 text-right"><span class="text-sm font-bold text-cyan-400">Level 86</span></td>
        <td class="px-6 py-4 text-right"><span class="text-sm font-bold text-white">234,120</span></td>
        <td class="px-6 py-4 text-right"><span class="text-sm font-bold text-emerald-400">75.2%</span></td>
      </tr>
      <tr class="group hover:bg-slate-800/50 transition-colors">
        <td class="px-6 py-4">
          <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-700 to-amber-800 flex items-center justify-center shadow-lg shadow-amber-900/20">
            <span class="text-lg font-black text-amber-200">3</span>
          </div>
        </td>
        <td class="px-6 py-4">
          <div class="flex items-center gap-3">
            <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=80&h=80&fit=crop" alt="Thunder" class="w-10 h-10 rounded-full object-cover ring-2 ring-amber-700/50">
            <div>
              <p class="text-sm font-bold text-white">ThunderBolt</p>
              <p class="text-xs text-slate-500">Pro Player</p>
            </div>
          </div>
        </td>
        <td class="px-6 py-4 text-right"><span class="text-sm font-bold text-cyan-400">Level 84</span></td>
        <td class="px-6 py-4 text-right"><span class="text-sm font-bold text-white">221,890</span></td>
        <td class="px-6 py-4 text-right"><span class="text-sm font-bold text-emerald-400">72.8%</span></td>
      </tr>
      <tr class="group hover:bg-slate-800/50 transition-colors">
        <td class="px-6 py-4">
          <span class="text-sm font-bold text-slate-400 ml-1">4</span>
        </td>
        <td class="px-6 py-4">
          <div class="flex items-center gap-3">
            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=80&h=80&fit=crop" alt="Viper" class="w-10 h-10 rounded-full object-cover">
            <div>
              <p class="text-sm font-bold text-white">Viper_Queen</p>
              <p class="text-xs text-slate-500">Veteran</p>
            </div>
          </div>
        </td>
        <td class="px-6 py-4 text-right"><span class="text-sm font-bold text-cyan-400">Level 81</span></td>
        <td class="px-6 py-4 text-right"><span class="text-sm font-bold text-white">198,340</span></td>
        <td class="px-6 py-4 text-right"><span class="text-sm font-bold text-emerald-400">69.4%</span></td>
      </tr>
      <tr class="group hover:bg-slate-800/50 transition-colors">
        <td class="px-6 py-4">
          <span class="text-sm font-bold text-slate-400 ml-1">5</span>
        </td>
        <td class="px-6 py-4">
          <div class="flex items-center gap-3">
            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=80&h=80&fit=crop" alt="Storm" class="w-10 h-10 rounded-full object-cover">
            <div>
              <p class="text-sm font-bold text-white">StormRider</p>
              <p class="text-xs text-slate-500">Veteran</p>
            </div>
          </div>
        </td>
        <td class="px-6 py-4 text-right"><span class="text-sm font-bold text-cyan-400">Level 78</span></td>
        <td class="px-6 py-4 text-right"><span class="text-sm font-bold text-white">186,720</span></td>
        <td class="px-6 py-4 text-right"><span class="text-sm font-bold text-amber-400">66.1%</span></td>
      </tr>
    </tbody>
  </table>
</div>

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

# Leaderboard Table

Leaderboard ranking table.

## Usage
```bash
npx devsnips add Tailwind/Components/Tables/leaderboard-table
```
Copy from `code.html`.

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