Industrial_Gaming_Data_Table
A complex, responsive data table component designed for gaming websites, featuring an industrial aesthetic with exposed elements and an autumn color scheme. Includes filtering, sorting, pagination, and dark mode support.
HTML Code
<div class="font-sans bg-amber-50 dark:bg-stone-950 text-stone-800 dark:text-stone-200 min-h-screen p-4 sm:p-6 lg:p-8">
<!-- Component Title -->
<h2 class="text-3xl sm:text-4xl font-extrabold text-amber-800 dark:text-amber-500 mb-6 sm:mb-8 text-center uppercase tracking-wider">
Game Stats Dashboard
</h2>
<!-- Table Container -->
<div class="bg-stone-100 dark:bg-stone-900 shadow-xl rounded-lg border border-amber-300 dark:border-amber-700 overflow-hidden backdrop-blur-sm bg-opacity-80 dark:bg-opacity-80">
<!-- Controls Section -->
<div class="p-4 sm:p-6 flex flex-col sm:flex-row items-center justify-between gap-4 border-b border-amber-300 dark:border-amber-700">
<!-- Search Input -->
<div class="relative w-full sm:w-64">
<input type="text" placeholder="Search player, game..." class="w-full pl-10 pr-4 py-2 border border-amber-400 dark:border-amber-600 bg-amber-50 dark:bg-stone-800 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-400 text-stone-800 dark:text-stone-200 placeholder-stone-500 dark:placeholder-stone-400">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-stone-500 dark:text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>
<!-- Filter Dropdown -->
<div class="relative w-full sm:w-auto">
<select class="block appearance-none w-full bg-amber-50 dark:bg-stone-800 border border-amber-400 dark:border-amber-600 text-stone-800 dark:text-stone-200 py-2 px-4 pr-8 rounded-md leading-tight focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-400">
<option>All Games</option>
<option>FPS</option>
<option>MOBA</option>
<option>RPG</option>
<option>Strategy</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-stone-600 dark:text-stone-300">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 6.757 7.586 5.343 9z"/></svg>
</div>
</div>
</div>
<!-- Table -->
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-amber-300 dark:divide-amber-700">
<thead class="bg-amber-200 dark:bg-stone-800 text-amber-800 dark:text-amber-300 uppercase tracking-wider text-sm">
<tr>
<th scope="col" class="px-4 py-3 text-left font-bold">Player & Profile</th>
<th scope="col" class="px-4 py-3 text-left font-bold cursor-pointer">Game <span class="ml-1 text-xs">▲▼</span></th>
<th scope="col" class="px-4 py-3 text-left font-bold cursor-pointer hidden sm:table-cell">K/D Ratio <span class="ml-1 text-xs">▲▼</span></th>
<th scope="col" class="px-4 py-3 text-left font-bold cursor-pointer hidden md:table-cell">Win Rate <span class="ml-1 text-xs">▲▼</span></th>
<th scope="col" class="px-4 py-3 text-left font-bold cursor-pointer hidden lg:table-cell">Hours Played <span class="ml-1 text-xs">▲▼</span></th>
<th scope="col" class="px-4 py-3 text-left font-bold">Status</th>
<th scope="col" class="px-4 py-3 text-right font-bold">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-amber-200 dark:divide-amber-800 text-sm">
<!-- Row 1 -->
<tr class="bg-amber-50 even:bg-amber-100 dark:bg-stone-900 dark:even:bg-stone-850 hover:bg-amber-200/50 dark:hover:bg-stone-700/50 transition-colors duration-200">
<td class="px-4 py-3 whitespace-nowrap">
<div class="flex items-center">
<img class="h-9 w-9 rounded-full object-cover border-2 border-amber-500 dark:border-amber-400" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Player Avatar">
<div class="ml-3">
<div class="font-medium text-stone-900 dark:text-stone-100">PhantomStrike</div>
<div class="text-stone-500 dark:text-stone-400 text-xs sm:text-sm">Level 87</div>
</div>
</div>
</td>
<td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300">Valorant</td>
<td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300 hidden sm:table-cell">1.65</td>
<td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300 hidden md:table-cell">62%</td>
<td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300 hidden lg:table-cell">1240</td>
<td class="px-4 py-3 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-emerald-100/80 dark:bg-emerald-800 text-emerald-800 dark:text-emerald-200 border border-emerald-300 dark:border-emerald-600">Online</span>
</td>
<td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium">
<a href="#" class="text-amber-600 dark:text-amber-400 hover:text-amber-900 dark:hover:text-amber-200 mr-2">View</a>
<a href="#" class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300">Report</a>
</td>
</tr>
<!-- Row 2 -->
<tr class="bg-amber-50 even:bg-amber-100 dark:bg-stone-900 dark:even:bg-stone-850 hover:bg-amber-200/50 dark:hover:bg-stone-700/50 transition-colors duration-200">
<td class="px-4 py-3 whitespace-nowrap">
<div class="flex items-center">
<img class="h-9 w-9 rounded-full object-cover border-2 border-amber-500 dark:border-amber-400" src="https://randomuser.me/api/portraits/women/23.jpg" alt="Player Avatar">
<div class="ml-3">
<div class="font-medium text-stone-900 dark:text-stone-100">PixelQueen</div>
<div class="text-stone-500 dark:text-stone-400 text-xs sm:text-sm">Level 71</div>
</div>
</div>
</td>
<td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300">League of Legends</td>
<td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300 hidden sm:table-cell">2.10</td>
<td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300 hidden md:table-cell">58%</td>
<td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300 hidden lg:table-cell">980</td>
<td class="px-4 py-3 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100/80 dark:bg-red-800 text-red-800 dark:text-red-200 border border-red-300 dark:border-red-600">Offline</span>
</td>
<td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium">
<a href="#" class="text-amber-600 dark:text-amber-400 hover:text-amber-900 dark:hover:text-amber-200 mr-2">View</a>
<a href="#" class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300">Report</a>
</td>
</tr>
<!-- Row 3 -->
<tr class="bg-amber-50 even:bg-amber-100 dark:bg-stone-900 dark:even:bg-stone-850 hover:bg-amber-200/50 dark:hover:bg-stone-700/50 transition-colors duration-200">
<td class="px-4 py-3 whitespace-nowrap">
<div class="flex items-center">
<img class="h-9 w-9 rounded-full object-cover border-2 border-amber-500 dark:border-amber-400" src="https://randomuser.me/api/portraits/men/19.jpg" alt="Player Avatar">
<div class="ml-3">
<div class="font-medium text-stone-900 dark:text-stone-100">Ironclad_Gamer</div>
<div class="text-stone-500 dark:text-stone-400 text-xs sm:text-sm">Level 93</div>
</div>
</div>
</td>
<td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300">Apex Legends</td>
<td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300 hidden sm:table-cell">1.88</td>
<td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300 hidden md:table-cell">65%</td>
<td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300 hidden lg:table-cell">1500</td>
<td class="px-4 py-3 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-emerald-100/80 dark:bg-emerald-800 text-emerald-800 dark:text-emerald-200 border border-emerald-300 dark:border-emerald-600">Online</span>
</td>
<td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium">
<a href="#" class="text-amber-600 dark:text-amber-400 hover:text-amber-900 dark:hover:text-amber-200 mr-2">View</a>
<a href="#" class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300">Report</a>
</td>
</tr>
<!-- Row 4 -->
<tr class="bg-amber-50 even:bg-amber-100 dark:bg-stone-900 dark:even:bg-stone-850 hover:bg-amber-200/50 dark:hover:bg-stone-700/50 transition-colors duration-200">
<td class="px-4 py-3 whitespace-nowrap">
<div class="flex items-center">
<img class="h-9 w-9 rounded-full object-cover border-2 border-amber-500 dark:border-amber-400" src="https://randomuser.me/api/portraits/women/8.jpg" alt="Player Avatar">
<div class="ml-3">
<div class="font-medium text-stone-900 dark:text-stone-100">SynthWitch</div>
<div class="text-stone-500 dark:text-stone-400 text-xs sm:text-sm">Level 68</div>
</div>
</div>
</td>
<td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300">Cyberpunk 2077</td>
<td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300 hidden sm:table-cell">0.95</td>
<td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300 hidden md:table-cell">45%</td>
<td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300 hidden lg:table-cell">870</td>
<td class="px-4 py-3 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100/80 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-200 border border-yellow-300 dark:border-yellow-600">Idle</span>
</td>
<td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium">
<a href="#" class="text-amber-600 dark:text-amber-400 hover:text-amber-900 dark:hover:text-amber-200 mr-2">View</a>
<a href="#" class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300">Report</a>
</td>
</tr>
<!-- Row 5 -->
<tr class="bg-amber-50 even:bg-amber-100 dark:bg-stone-900 dark:even:bg-stone-850 hover:bg-amber-200/50 dark:hover:bg-stone-700/50 transition-colors duration-200">
<td class="px-4 py-3 whitespace-nowrap">
<div class="flex items-center">
<img class="h-9 w-9 rounded-full object-cover border-2 border-amber-500 dark:border-amber-400" src="https://randomuser.me/api/portraits/men/33.jpg" alt="Player Avatar">
<div class="ml-3">
<div class="font-medium text-stone-900 dark:text-stone-100">DarkKnightMC</div>
<div class="text-stone-500 dark:text-stone-400 text-xs sm:text-sm">Level 79</div>
</div>
</div>
</td>
<td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300">Minecraft</td>
<td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300 hidden sm:table-cell">N/A</td>
<td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300 hidden md:table-cell">N/A</td>
<td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300 hidden lg:table-cell">2500+</td>
<td class="px-4 py-3 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-emerald-100/80 dark:bg-emerald-800 text-emerald-800 dark:text-emerald-200 border border-emerald-300 dark:border-emerald-600">Online</span>
</td>
<td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium">
<a href="#" class="text-amber-600 dark:text-amber-400 hover:text-amber-900 dark:hover:text-amber-200 mr-2">View</a>
<a href="#" class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300">Report</a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination -->
<div class="p-4 sm:p-6 flex flex-col sm:flex-row items-center justify-between gap-4 border-t border-amber-300 dark:border-amber-700">
<div class="text-stone-600 dark:text-stone-400 text-sm">
Showing <span class="font-bold">1</span> to <span class="font-bold">5</span> of <span class="font-bold">100</span> results
</div>
<nav class="relative z-0 inline-flex shadow-sm rounded-md -space-x-px" aria-label="Pagination">
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-amber-400 dark:border-amber-600 bg-amber-100 dark:bg-stone-800 text-stone-600 dark:text-stone-300 hover:bg-amber-200 dark:hover:bg-stone-700">
<span class="sr-only">Previous</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L9.5 10l3.27 3.71a.75.75 0 11-1.08 1.04l-3.75-4.25a.75.75 0 010-1.04l3.75-4.25a.75.75 0 011.06-.02z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 border border-amber-500 dark:border-amber-400 bg-amber-500 dark:bg-amber-600 text-white font-semibold">
1
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-amber-400 dark:border-amber-600 bg-amber-100 dark:bg-stone-800 text-stone-700 dark:text-stone-300 hover:bg-amber-200 dark:hover:bg-stone-700">
2
</a>
<a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 border border-amber-400 dark:border-amber-600 bg-amber-100 dark:bg-stone-800 text-stone-700 dark:text-stone-300 hover:bg-amber-200 dark:hover:bg-stone-700">
3
</a>
<span class="relative inline-flex items-center px-4 py-2 border border-amber-400 dark:border-amber-600 bg-amber-100 dark:bg-stone-800 text-stone-700 dark:text-stone-300">
...
</span>
<a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 border border-amber-400 dark:border-amber-600 bg-amber-100 dark:bg-stone-800 text-stone-700 dark:text-stone-300 hover:bg-amber-200 dark:hover:bg-stone-700">
10
</a>
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-amber-400 dark:border-amber-600 bg-amber-100 dark:bg-stone-800 text-stone-600 dark:text-stone-300 hover:bg-amber-200 dark:hover:bg-stone-700">
<span class="sr-only">Next</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L10.5 10 7.23 6.29a.75.75 0 111.08-1.04l3.75 4.25a.75.75 0 010 1.04l-3.75 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
</svg>
</a>
</nav>
</div>
</div>
</div>Related Components
Data Tables Component
Responsive Data Tables Component with Dark Mode Support using Tailwind CSS
Data Tables Component
A responsive data table component themed in retro/vintage style, designed with Tailwind CSS, supporting dark mode and featuring nostalgic design elements from the 80s/90s.
Data Tables Component
A responsive data table component for documentation/wiki sites, featuring dark mode support, earth-tone color scheme, and semantic HTML. Designed for complex interfaces with multiple columns, actions, and pagination.