데이터 테이블 구성 요소
Brutalism 스타일로 디자인된 데이터 테이블 구성 요소는 전자 상거래를 위한 채도가 높은 색상을 특징으로 하며 어두운 테마 지원으로 반응합니다.
HTML 코드
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
<thead class="bg-blue-600 dark:bg-blue-900">
<tr>
<th class="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">#</th>
<th class="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Product</th>
<th class="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Price</th>
<th class="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Availability</th>
<th class="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Action</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">1</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">\n <div class="flex items-center space-x-2">
<img src="https://picsum.photos/50/50" alt="Product Image" class="w-12 h-12 rounded-md">
<span>Awesome Product</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">$39.99</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">In Stock</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 dark:text-indigo-300 hover:text-indigo-500 dark:hover:text-indigo-400">Buy Now</a>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">2</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">\n <div class="flex items-center space-x-2">
<img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="w-12 h-12 rounded-md">
<span>Amazing Gadget</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">$29.99</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">Limited Stock</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 dark:text-indigo-300 hover:text-indigo-500 dark:hover:text-indigo-400">Buy Now</a>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">3</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">\n <div class="flex items-center space-x-2">
<img src="https://picsum.photos/50/50?random=2" alt="Product Image" class="w-12 h-12 rounded-md">
<span>Stylish Widget</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">$19.99</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">Out of Stock</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 dark:text-indigo-300 hover:text-indigo-500 dark:hover:text-indigo-400">Notify Me</a>
</td>
</tr>
</tbody>
</table>
</div>관련 구성 요소
Non-Profit/Charity를 위한 Luxury/Premium Data Table
우아하고 반응이 빠른 데이터 테이블 구성 요소는 기업의 블루 톤을 사용하여 고급스러움/프리미엄 느낌으로 설계되었으며 비영리 및 자선 단체에 적합합니다. 다크 모드 지원과 작업으로 데이터를 표시하기 위한 복잡한 인터페이스가 포함되어 있습니다.