Component
Basic Table
Clean and professional data table with project information including icons, status badges, dates, and budget. Features subtle hover states and well-organized data hierarchy.
- Component
- Tailwind
- HTML
- MIT
Preview
Live component
9:41 100%
devsnips.dev/library/tailwind/components/tables/basic-table/ fluid · no fixed width 100%
Install
Add to your project
npx devsnips add Tailwind/Components/Tables/basic-table Tailwind/Components/Tables/basic-table <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-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Project</th>
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Status</th>
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Due Date</th>
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Budget</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100">
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center">
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
</div>
<div>
<p class="text-sm font-medium text-gray-900">Brand Refresh Initiative</p>
<p class="text-xs text-gray-500">Marketing</p>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-green-100 text-green-700">Active</span>
</td>
<td class="px-6 py-4 text-sm text-gray-600">Mar 15, 2026</td>
<td class="px-6 py-4 text-sm font-semibold text-gray-900">$45,000</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center">
<svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
</svg>
</div>
<div>
<p class="text-sm font-medium text-gray-900">API Gateway Migration</p>
<p class="text-xs text-gray-500">Engineering</p>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-700">In Progress</span>
</td>
<td class="px-6 py-4 text-sm text-gray-600">Apr 22, 2026</td>
<td class="px-6 py-4 text-sm font-semibold text-gray-900">$82,500</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-lg bg-emerald-100 flex items-center justify-center">
<svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
</svg>
</div>
<div>
<p class="text-sm font-medium text-gray-900">Q2 Analytics Dashboard</p>
<p class="text-xs text-gray-500">Business Intelligence</p>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700">Planning</span>
</td>
<td class="px-6 py-4 text-sm text-gray-600">May 30, 2026</td>
<td class="px-6 py-4 text-sm font-semibold text-gray-900">$28,000</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-lg bg-rose-100 flex items-center justify-center">
<svg class="w-5 h-5 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
</div>
<div>
<p class="text-sm font-medium text-gray-900">Customer Portal Redesign</p>
<p class="text-xs text-gray-500">Product</p>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600">On Hold</span>
</td>
<td class="px-6 py-4 text-sm text-gray-600">Jun 18, 2026</td>
<td class="px-6 py-4 text-sm font-semibold text-gray-900">$65,000</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-lg bg-amber-100 flex items-center justify-center">
<svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
<div>
<p class="text-sm font-medium text-gray-900">Payment System Upgrade</p>
<p class="text-xs text-gray-500">Finance</p>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-green-100 text-green-700">Active</span>
</td>
<td class="px-6 py-4 text-sm text-gray-600">Jul 5, 2026</td>
<td class="px-6 py-4 text-sm font-semibold text-gray-900">$120,000</td>
</tr>
</tbody>
</table>
</div># Basic Table
Basic semantic data table.
## Usage
```bash
npx devsnips add Tailwind/Components/Tables/basic-table
```
Copy from `code.html`.
## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md` 114 lines UTF-8 · LF · Spaces: 2
Continue browsing