Gaming Dashboard
A complex, responsive gaming dashboard UI component designed for dark mode, featuring a grayscale color scheme. Includes player stats, recent activity, and game lists.
HTML Code
<div class="min-h-screen bg-gray-950 text-gray-100 font-sans p-4 sm:p-6 md:p-8 dark:bg-gray-950 dark:text-gray-100">
<!-- Header -->
<header class="flex flex-col sm:flex-row items-center justify-between mb-8 gap-4">
<h1 class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-blue-400 tracking-tight">GAMER HUB</h1>
<div class="relative w-full sm:w-auto">
<input type="text" placeholder="Search games, players..." class="w-full sm:w-80 p-3 pl-10 rounded-lg bg-gray-800 text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
</div>
<div class="flex items-center gap-4">
<button aria-label="Notifications" class="relative p-2 rounded-full bg-gray-800 hover:bg-gray-700 transition-colors duration-200">
<svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path></svg>
<span class="absolute top-0 right-0 block h-3 w-3 rounded-full ring-2 ring-gray-950 bg-red-500"></span>
</button>
<img class="w-10 h-10 rounded-full border-2 border-blue-500 object-cover" src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar">
</div>
</header>
<!-- Main Content Grid -->
<main class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Player Stats Card -->
<section class="col-span-1 md:col-span-2 lg:col-span-1 bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700 dark:border-gray-700 dark:bg-gray-800">
<h2 class="text-2xl font-bold mb-4 text-blue-400">Player Stats</h2>
<div class="flex flex-col items-center mb-6">
<img class="w-24 h-24 rounded-full border-4 border-blue-400 mb-3 object-cover" src="https://randomuser.me/api/portraits/men/7.jpg" alt="Player Avatar">
<div class="text-center">
<p class="text-xl font-semibold">BladeMasterX</p>
<p class="text-gray-400 text-sm">Level 78 • Rank: Gold I</p>
</div>
</div>
<div class="grid grid-cols-2 gap-4 text-center">
<div>
<p class="text-gray-300 text-sm">K/D Ratio</p>
<p class="text-xl font-bold text-gray-50">2.45</p>
</div>
<div>
<p class="text-gray-300 text-sm">Wins</p>
<p class="text-xl font-bold text-gray-50">1,234</p>
</div>
<div>
<p class="text-gray-300 text-sm">Matches Played</p>
<p class="text-xl font-bold text-gray-50">3,109</p>
</div>
<div>
<p class="text-gray-300 text-sm">Hours Played</p>
<p class="text-xl font-bold text-gray-50">876</p>
</div>
</div>
<button class="mt-6 w-full py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500">View Profile</button>
</section>
<!-- Recent Activity Card -->
<section class="col-span-1 md:col-span-3 lg:col-span-2 bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700 dark:border-gray-700 dark:bg-gray-800 overflow-hidden">
<h2 class="text-2xl font-bold mb-5 text-accent-blue">Recent Activity</h2>
<div class="space-y-4 max-h-[400px] overflow-y-auto custom-scrollbar pr-2">
<div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg">
<img class="w-12 h-12 rounded-lg object-cover" src="https://picsum.photos/60/60?random=1" alt="Game Cover">
<div class="flex-1">
<p class="text-gray-50 font-semibold">Defeated boss in <span class="text-blue-300">Cyberpunk Ascent</span></p>
<p class="text-gray-400 text-sm">5 minutes ago</p>
</div>
<span class="text-green-400 font-bold text-sm">+120 XP</span>
</div>
<div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg">
<img class="w-12 h-12 rounded-lg object-cover" src="https://randomuser.me/api/portraits/men/8.jpg" alt="Friend Avatar">
<div class="flex-1">
<p class="text-gray-50 font-semibold">Friend <span class="text-blue-300">GamerGirl_88</span> is online!</p>
<p class="text-gray-400 text-sm">15 minutes ago</p>
</div>
</div>
<div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg">
<img class="w-12 h-12 rounded-lg object-cover" src="https://picsum.photos/60/60?random=2" alt="Game Cover">
<div class="flex-1">
<p class="text-gray-50 font-semibold">Achieved 'Grand Master' in <span class="text-blue-300">Starfall Arena</span></p>
<p class="text-gray-400 text-sm">1 hour ago</p>
</div>
<span class="text-purple-400 font-bold text-sm">+1 Rank</span>
</div>
<div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg">
<img class="w-12 h-12 rounded-lg object-cover" src="https://picsum.photos/60/60?random=3" alt="Game Cover">
<div class="flex-1">
<p class="text-gray-50 font-semibold">Bought new DLC for <span class="text-blue-300">Mythic Realms IV</span></p>
<p class="text-gray-400 text-sm">3 hours ago</p>
</div>
</div>
<div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg">
<img class="w-12 h-12 rounded-lg object-cover" src="https://picsum.photos/60/60?random=4" alt="Game Cover">
<div class="flex-1">
<p class="text-gray-50 font-semibold">Completed Daily Quest in <span class="text-blue-300">Dragon's Lair Saga</span></p>
<p class="text-gray-400 text-sm">Yesterday</p>
</div>
<span class="text-green-400 font-bold text-sm">+50 XP</span>
</div>
<div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg">
<img class="w-12 h-12 rounded-lg object-cover" src="https://randomuser.me/api/portraits/women/9.jpg" alt="Friend Avatar">
<div class="flex-1">
<p class="text-gray-50 font-semibold">Friend <span class="text-blue-300">NeonKiller</span> is streaming <span class="text-blue-300">Pixel Warfare</span></p>
<p class="text-gray-400 text-sm">Yesterday</p>
</div>
</div>
</div>
</section>
<!-- My Games List -->
<section class="col-span-1 md:col-span-3 lg:col-span-1 bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700 dark:border-gray-700 dark:bg-gray-800 overflow-hidden">
<div class="flex justify-between items-center mb-5">
<h2 class="text-2xl font-bold text-blue-400">My Games</h2>
<button aria-label="Add Game" class="text-blue-400 hover:text-blue-300 transition-colors duration-200">
<svg class="w-7 h-7" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
</button>
</div>
<div class="space-y-4 max-h-[400px] overflow-y-auto custom-scrollbar pr-2">
<div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg group hover:scale-[1.02] transition-transform duration-200 cursor-pointer">
<img class="w-16 h-16 rounded-lg object-cover" src="https://picsum.photos/100/100?random=5" alt="Game Cover">
<div class="flex-1">
<p class="text-gray-50 font-semibold">Galactic Odyssey</p>
<p class="text-gray-400 text-sm">Online - 12 players</p>
</div>
<button aria-label="Play Game" class="text-blue-400 hover:text-blue-300 p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></button>
</div>
<div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg group hover:scale-[1.02] transition-transform duration-200 cursor-pointer">
<img class="w-16 h-16 rounded-lg object-cover" src="https://picsum.photos/100/100?random=6" alt="Game Cover">
<div class="flex-1">
<p class="text-gray-50 font-semibold">Shadowblade Chronicles</p>
<p class="text-gray-400 text-sm">Offline</p>
</div>
<button aria-label="Play Game" class="text-blue-400 hover:text-blue-300 p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></button>
</div>
<div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg group hover:scale-[1.02] transition-transform duration-200 cursor-pointer">
<img class="w-16 h-16 rounded-lg object-cover" src="https://picsum.photos/100/100?random=7" alt="Game Cover">
<div class="flex-1">
<p class="text-gray-50 font-semibold">Pixel Royale</p>
<p class="text-gray-400 text-sm">Online - 89 players</p>
</div>
<button aria-label="Play Game" class="text-blue-400 hover:text-blue-300 p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></button>
</div>
<div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg group hover:scale-[1.02] transition-transform duration-200 cursor-pointer">
<img class="w-16 h-16 rounded-lg object-cover" src="https://picsum.photos/100/100?random=8" alt="Game Cover">
<div class="flex-1">
<p class="text-gray-50 font-semibold">Mystic Dungeon Crawler</p>
<p class="text-gray-400 text-sm">Offline</p>
</div>
<button aria-label="Play Game" class="text-blue-400 hover:text-blue-300 p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></button>
</div>
<div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg group hover:scale-[1.02] transition-transform duration-200 cursor-pointer">
<img class="w-16 h-16 rounded-lg object-cover" src="https://picsum.photos/100/100?random=9" alt="Game Cover">
<div class="flex-1">
<p class="text-gray-50 font-semibold">Cosmic Commanders</p>
<p class="text-gray-400 text-sm">Online - 21 players</p>
</div>
<button aria-label="Play Game" class="text-blue-400 hover:text-blue-300 p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></button>
</div>
</div>
</section>
<!-- Quick Stats Card -->
<section class="col-span-1 md:col-span-1 lg:col-span-1 bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700 dark:border-gray-700 dark:bg-gray-800">
<h2 class="text-2xl font-bold mb-5 text-accent-blue">Quick Stats</h2>
<div class="space-y-4">
<div class="flex justify-between items-center py-2 border-b border-gray-700 last:border-b-0">
<p class="text-gray-300">Online Friends</p>
<span class="text-blue-400 font-bold text-xl">14</span>
</div>
<div class="flex justify-between items-center py-2 border-b border-gray-700 last:border-b-0">
<p class="text-gray-300">New Achievements</p>
<span class="text-green-400 font-bold text-xl">3</span>
</div>
<div class="flex justify-between items-center py-2 border-b border-gray-700 last:border-b-0">
<p class="text-gray-300">Upcoming Events</p>
<span class="text-yellow-400 font-bold text-xl">2</span>
</div>
<div class="flex justify-between items-center py-2 border-b border-gray-700 last:border-b-0">
<p class="text-gray-300">Messages</p>
<span class="text-red-400 font-bold text-xl">5</span>
</div>
</div>
</section>
</main>
<style>
/* Custom scrollbar for better aesthetics */
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #374151; /* gray-700 */
border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: #60A5FA; /* blue-400 */
border-radius: 10px;
border: 2px solid #1F2937; /* gray-800 */
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
border: 2px solid #1F2937; /* gray-800 */
}
/* For Firefox */
.custom-scrollbar {
scrollbar-width: thin;
scrollbar-color: #60A5FA #374151; /* thumb and track */
}
</style>
</div>
Related Components
Art Deco Social Dashboard
A moderate complexity dashboard component for dating/social platforms, featuring an Art Deco design style with muted/desaturated colors and full responsiveness. Includes profile cards, activity feed, and navigation, with dark mode support.
Retro Business Dashboard
A retro/vintage grayscale dashboard component for business/corporate websites, with moderate complexity and responsive design. Supports dark theme using Tailwind CSS dark: prefix for styling. Images sourced from picsum.photos and avatars from randomuser.me.
Dashboards Component
A simple, monochromatic dark mode dashboard component for portfolios, built with Tailwind CSS. It features a responsive design and uses different shades of a single color for a sleek, minimalist look.