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
Dashboards Component
A simple and responsive dashboards component designed for portfolio showcasing, with microinteractions and focused on earth tones. It supports dark theme using Tailwind CSS.
Dashboards Component
A dashboard component with responsive design and dark mode support using Tailwind CSS.
Social Media Dashboard
A responsive social media dashboard component with microinteractions, complementary color scheme, moderate complexity, and dark theme support using Tailwind CSS. Includes user profiles with avatars from randomuser.me and feeds with images from picsum.photos.