Product Inventory 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
142
143
144
145
146
147
148
149
150
151

<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">Product</th>
        <th class="px-4 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">SKU</th>
        <th class="px-4 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Category</th>
        <th class="px-4 py-3.5 text-right text-xs font-bold text-gray-600 uppercase tracking-wider">Stock</th>
        <th class="px-4 py-3.5 text-right text-xs font-bold text-gray-600 uppercase tracking-wider">Price</th>
        <th class="px-4 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Status</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-100">
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-4 py-3.5">
          <div class="flex items-center gap-3">
            <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=80&h=80&fit=crop" alt="Wireless Headphones" class="w-12 h-12 rounded-lg object-cover bg-gray-100">
            <div>
              <p class="text-sm font-medium text-gray-900">Wireless Headphones Pro</p>
              <p class="text-xs text-gray-500">Premium noise-canceling</p>
            </div>
          </div>
        </td>
        <td class="px-4 py-3.5 text-sm font-mono text-gray-600">WHP-001</td>
        <td class="px-4 py-3.5">
          <span class="px-2.5 py-1 bg-violet-100 text-violet-700 text-xs font-medium rounded-full">Electronics</span>
        </td>
        <td class="px-4 py-3.5 text-right">
          <div class="flex items-center justify-end gap-2">
            <span class="text-sm font-semibold text-gray-900">248</span>
            <div class="w-16 h-2 bg-gray-200 rounded-full overflow-hidden">
              <div class="h-full bg-emerald-500 rounded-full" style="width: 82%"></div>
            </div>
          </div>
        </td>
        <td class="px-4 py-3.5 text-right text-sm font-semibold text-gray-900">$299.00</td>
        <td class="px-4 py-3.5">
          <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-emerald-100 text-emerald-700">In Stock</span>
        </td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-4 py-3.5">
          <div class="flex items-center gap-3">
            <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=80&h=80&fit=crop" alt="Smart Watch" class="w-12 h-12 rounded-lg object-cover bg-gray-100">
            <div>
              <p class="text-sm font-medium text-gray-900">Smart Watch Series X</p>
              <p class="text-xs text-gray-500">Health & fitness tracking</p>
            </div>
          </div>
        </td>
        <td class="px-4 py-3.5 text-sm font-mono text-gray-600">SWX-002</td>
        <td class="px-4 py-3.5">
          <span class="px-2.5 py-1 bg-violet-100 text-violet-700 text-xs font-medium rounded-full">Electronics</span>
        </td>
        <td class="px-4 py-3.5 text-right">
          <div class="flex items-center justify-end gap-2">
            <span class="text-sm font-semibold text-amber-600">18</span>
            <div class="w-16 h-2 bg-gray-200 rounded-full overflow-hidden">
              <div class="h-full bg-amber-500 rounded-full" style="width: 18%"></div>
            </div>
          </div>
        </td>
        <td class="px-4 py-3.5 text-right text-sm font-semibold text-gray-900">$449.00</td>
        <td class="px-4 py-3.5">
          <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-700">Low Stock</span>
        </td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-4 py-3.5">
          <div class="flex items-center gap-3">
            <img src="https://images.unsplash.com/photo-1585386959984-a4155224a1ad?w=80&h=80&fit=crop" alt="Face Serum" class="w-12 h-12 rounded-lg object-cover bg-gray-100">
            <div>
              <p class="text-sm font-medium text-gray-900">Hydrating Face Serum</p>
              <p class="text-xs text-gray-500">Vitamin C + Hyaluronic</p>
            </div>
          </div>
        </td>
        <td class="px-4 py-3.5 text-sm font-mono text-gray-600">HFS-003</td>
        <td class="px-4 py-3.5">
          <span class="px-2.5 py-1 bg-pink-100 text-pink-700 text-xs font-medium rounded-full">Beauty</span>
        </td>
        <td class="px-4 py-3.5 text-right">
          <div class="flex items-center justify-end gap-2">
            <span class="text-sm font-semibold text-gray-400">0</span>
            <div class="w-16 h-2 bg-gray-200 rounded-full overflow-hidden">
              <div class="h-full bg-gray-400 rounded-full" style="width: 0%"></div>
            </div>
          </div>
        </td>
        <td class="px-4 py-3.5 text-right text-sm font-semibold text-gray-900">$68.00</td>
        <td class="px-4 py-3.5">
          <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-rose-100 text-rose-700">Out of Stock</span>
        </td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-4 py-3.5">
          <div class="flex items-center gap-3">
            <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=80&h=80&fit=crop" alt="Running Shoes" class="w-12 h-12 rounded-lg object-cover bg-gray-100">
            <div>
              <p class="text-sm font-medium text-gray-900">Ultra Boost Running Shoes</p>
              <p class="text-xs text-gray-500">Lightweight performance</p>
            </div>
          </div>
        </td>
        <td class="px-4 py-3.5 text-sm font-mono text-gray-600">UBS-004</td>
        <td class="px-4 py-3.5">
          <span class="px-2.5 py-1 bg-emerald-100 text-emerald-700 text-xs font-medium rounded-full">Sports</span>
        </td>
        <td class="px-4 py-3.5 text-right">
          <div class="flex items-center justify-end gap-2">
            <span class="text-sm font-semibold text-gray-900">512</span>
            <div class="w-16 h-2 bg-gray-200 rounded-full overflow-hidden">
              <div class="h-full bg-emerald-500 rounded-full" style="width: 95%"></div>
            </div>
          </div>
        </td>
        <td class="px-4 py-3.5 text-right text-sm font-semibold text-gray-900">$189.00</td>
        <td class="px-4 py-3.5">
          <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-emerald-100 text-emerald-700">In Stock</span>
        </td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-4 py-3.5">
          <div class="flex items-center gap-3">
            <img src="https://images.unsplash.com/photo-1491553895911-0055uj8d0040?w=80&h=80&fit=crop" alt="Leather Bag" class="w-12 h-12 rounded-lg object-cover bg-gray-100">
            <div>
              <p class="text-sm font-medium text-gray-900">Classic Leather Messenger</p>
              <p class="text-xs text-gray-500">Genuine leather, handcrafted</p>
            </div>
          </div>
        </td>
        <td class="px-4 py-3.5 text-sm font-mono text-gray-600">CLM-005</td>
        <td class="px-4 py-3.5">
          <span class="px-2.5 py-1 bg-amber-100 text-amber-700 text-xs font-medium rounded-full">Fashion</span>
        </td>
        <td class="px-4 py-3.5 text-right">
          <div class="flex items-center justify-end gap-2">
            <span class="text-sm font-semibold text-gray-900">89</span>
            <div class="w-16 h-2 bg-gray-200 rounded-full overflow-hidden">
              <div class="h-full bg-emerald-500 rounded-full" style="width: 60%"></div>
            </div>
          </div>
        </td>
        <td class="px-4 py-3.5 text-right text-sm font-semibold text-gray-900">$245.00</td>
        <td class="px-4 py-3.5">
          <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-emerald-100 text-emerald-700">In Stock</span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

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

# Product Inventory Table

Product inventory table.

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

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