组件 信息图表 信息图表组件 - 游戏旧版统计信息

信息图表组件 - 游戏旧版统计信息

一个用于游戏网站的简单、响应式信息图表组件,具有豪华/高级、复古/复古美学的玩家统计数据。支持深色模式。

预览

HTML 代码

<section class="font-sans bg-gray-100 text-gray-800 py-12 px-4 dark:bg-gray-900 dark:text-gray-200">
  <div class="container mx-auto px-4 max-w-4xl">
    <h2 class="text-4xl md:text-5xl font-bold text-center mb-10 text-rose-800 dark:text-rose-400 leading-tight tracking-tight">
      <span class="block">Gaming Legacy</span>
      <span class="block text-2xl md:text-3xl font-medium text-amber-900 dark:text-amber-500 mt-2">Player Milestones</span>
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">

      <!-- Statistic 1: Kills -->
      <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl border-2 border-rose-200 dark:border-rose-700 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="text-5xl md:text-6xl font-extrabold text-rose-600 dark:text-rose-500 mb-2">
          <span class="animate-pulse">3,456</span>
        </div>
        <p class="text-xl md:text-2xl font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">Total Kills</p>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Achieved across all campaigns</p>
      </div>

      <!-- Statistic 2: Wins -->
      <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl border-2 border-amber-200 dark:border-amber-700 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="text-5xl md:text-6xl font-extrabold text-amber-600 dark:text-amber-500 mb-2">
          <span class="animate-pulse">187</span>
        </div>
        <p class="text-xl md:text-2xl font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">Victories</p>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Tournament &amp; Ranked Matches</p>
      </div>

      <!-- Statistic 3: Playtime -->
      <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl border-2 border-green-200 dark:border-green-700 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="text-5xl md:text-6xl font-extrabold text-green-600 dark:text-green-500 mb-2">
          <span class="animate-pulse">789h</span>
        </div>
        <p class="text-xl md:text-2xl font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">Hours Played</p>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Dedicated game time logged</p>
      </div>

    </div>

    <div class="mt-12 text-center">
      <a href="#" class="inline-block bg-rose-700 hover:bg-rose-800 dark:bg-rose-500 dark:hover:bg-rose-600 text-white font-bold py-3 px-8 rounded-full text-lg uppercase tracking-wide transition-colors duration-300 shadow-lg hover:shadow-xl">
        View Full Player Profile
      </a>
    </div>
  </div>
</section>

相关组件

信息图表组件

一个交互式 3D 灵感信息图表组件,具有适用于教育平台的复古/复古调色板,支持响应式设计和深色模式。

打开

信息图表组件

一种简单的信息图组件,采用3D美学设计,使用柔和的颜色用于社交媒体界面,支持暗黑模式。

打开

信息图组件

一个简单、响应式的信息图组件,具有3D设计元素和类似的配色方案,适用于博客/内容使用。它支持使用Tailwind CSS的黑暗主题。

打开