CCHub Logo CCHub Tailwind Collection
Komponenten Datentabellen Industrial_Gaming_Data_Table

Industrial_Gaming_Data_Table

Eine komplexe, reaktionsschnelle Datentabellenkomponente, die für Gaming-Websites entwickelt wurde und sich durch eine industrielle Ästhetik mit freiliegenden Elementen und einem herbstlichen Farbschema auszeichnet. Umfasst Unterstützung für Filterung, Sortierung, Paginierung und Dunkelmodus.

Vorschau

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>

Verwandte Komponenten

Komponente "Datentabellen"

Eine reaktionsfähige Datentabellenkomponente mit Neumorphism-Design, einem triadischen Farbschema und Unterstützung für den Dunkelmodus, die für einen Blog oder eine Inhaltswebsite geeignet ist.

Offen

Komponente "Datentabellen"

Eine responsive Datentabellen-Komponente, die im Neumorphism-Stil unter Verwendung von Tailwind CSS entworfen wurde, mit Unterstützung für dunkle Themen und zufälligen Platzhalterbildern.

Offen

Luxury_Premium_Manufacturing_Data_Table

Eine komplexe, reaktionsschnelle Datentabellenkomponente für den Einsatz in der Fertigung/Industrie mit einem Luxus-/Premium-Design mit einem Schwarz-Weiß-Farbschema und einer einzigen hellen Akzentfarbe. Enthält Unterstützung für den Dunkelmodus und interaktive Elemente.

Offen