Sports_Fitness_Dashboard_Monospace
A clean, code-inspired sports/fitness dashboard component with monospace fonts, terminal aesthetics, and ocean/blue tones. It features responsive design, dark mode support, and data visualization elements suitable for sports teams and fitness applications.
HTML Code
<div class="min-h-screen bg-gradient-to-br from-blue-900 to-blue-700 text-blue-200 dark:from-gray-900 dark:to-black font-mono p-4 sm:p-8 md:p-12 lg:p-16 relative overflow-hidden">
<!-- Background grid for terminal aesthetic -->
<div class="absolute inset-0 z-0 opacity-10 pointer-events-none">
<svg class="h-full w-full" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="grid-pattern" width="20" height="20" patternUnits="userSpaceOnUse">
<path d="M 20 0 L 0 0 L 0 20" fill="none" stroke="currentColor" stroke-width="0.5" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid-pattern)" />
</svg>
</div>
<div class="relative z-10 max-w-7xl mx-auto space-y-8">
<!-- Header -->
<header class="flex flex-col sm:flex-row justify-between items-center bg-blue-950/70 dark:bg-gray-800/70 backdrop-blur-sm p-4 rounded-lg border border-blue-600 dark:border-gray-700 shadow-lg">
<h1 class="text-2xl sm:text-3xl font-bold text-sky-400 dark:text-green-400 mb-2 sm:mb-0">[FITNESS_DASHBOARD]</h1>
<nav class="text-sm flex space-x-4">
<a href="#" class="hover:text-white transition-colors duration-200">[OVERVIEW]</a>
<a href="#" class="hover:text-white transition-colors duration-200">[ANALYTICS]</a>
<a href="#" class="hover:text-white transition-colors duration-200">[TRAINING]</a>
<a href="#" class="hover:text-white transition-colors duration-200">[SETTINGS]</a>
</nav>
</header>
<!-- Main Grid Layout -->
<main class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Player Performance Card -->
<section class="lg:col-span-2 bg-blue-950/70 dark:bg-gray-800/70 backdrop-blur-sm p-6 rounded-lg border border-blue-600 dark:border-gray-700 shadow-lg terminal-glow relative overflow-hidden">
<h2 class="text-sky-400 dark:text-green-400 text-xl font-semibold mb-4">[PLAYER_PERFORMANCE_OVERVIEW]</h2>
<div class="absolute top-0 right-0 p-2 text-blue-500 text-opacity-50 dark:text-gray-600">\>_</div>
<div class="flex flex-col sm:flex-row items-center space-y-4 sm:space-y-0 sm:space-x-6">
<img src="https://randomuser.me/api/portraits/men/78.jpg" alt="Player Avatar" class="w-24 h-24 rounded-full border-2 border-sky-400 dark:border-green-400 p-1 object-cover">
<div class="flex-grow">
<p class="text-lg font-bold text-white">[PLAYER_ID: JM-42]</p>
<p class="text-blue-300">[POSITION: Forward]</p>
<p class="text-blue-300">[STATUS: Optimal]</p>
</div>
<div class="grid grid-cols-2 gap-4 text-sm">
<div><span class="text-sky-300">[SPEED]:</span> <span class="text-white">9.2 m/s</span></div>
<div><span class="text-sky-300">[ENDURANCE]:</span> <span class="text-white">85%</span></div>
<div><span class="text-sky-300">[ACCURACY]:</span> <span class="text-white">76%</span></div>
<div><span class="text-sky-300">[POWER]:</span> <span class="text-white">7.8 kJ</span></div>
</div>
</div>
<div class="mt-6">
<p class="text-sky-400 dark:text-green-400 font-semibold mb-2">[RECENT_ACTIVITY_LOG]</p>
<ul class="text-sm leading-relaxed max-h-40 overflow-y-auto scrollbar-thin scrollbar-thumb-blue-600 dark:scrollbar-thumb-gray-600 scrollbar-track-blue-900 dark:scrollbar-track-gray-900">
<li><span class="text-yellow-300">[INFO]:</span> 2023-11-01 10:30 - [TRAINING_SESSION_COMPLETE]</li>
<li><span class="text-green-300">[SUCCESS]:</span> 2023-10-28 18:00 - [MATCH_PERFORMANCE_RATING]: 8.7</li>
<li><span class="text-red-300">[WARNING]:</span> 2023-10-25 14:15 - [RECOVERY_RATE_BELOW_AVG]</li>
<li><span class="text-green-300">[SUCCESS]:</span> 2023-10-22 09:00 - [PERSONAL_BEST_SPRINT]: 100m in 11.2s</li>
<li><span class="text-yellow-300">[INFO]:</span> 2023-10-20 11:00 - [PHYSIO_CHECKUP_SCHEDULED]</li>
</ul>
</div>
</section>
<!-- Upcoming Training Card -->
<section class="bg-blue-950/70 dark:bg-gray-800/70 backdrop-blur-sm p-6 rounded-lg border border-blue-600 dark:border-gray-700 shadow-lg terminal-glow relative overflow-hidden">
<h2 class="text-sky-400 dark:text-green-400 text-xl font-semibold mb-4">[UPCOMING_TRAINING]</h2>
<div class="absolute top-0 right-0 p-2 text-blue-500 text-opacity-50 dark:text-gray-600">\>_</div>
<div class="space-y-4">
<div class="bg-blue-800/50 dark:bg-gray-700/50 p-3 rounded-md border border-blue-700 dark:border-gray-600">
<p class="text-white font-bold">[SESSION]: Speed Drills</p>
<p class="text-blue-300 text-sm">[DATE]: 2023-11-03</p>
<p class="text-blue-300 text-sm">[TIME]: 09:00 AM</p>
<p class="text-blue-300 text-sm">[LOCATION]: Main Pitch</p>
</div>
<div class="bg-blue-800/50 dark:bg-gray-700/50 p-3 rounded-md border border-blue-700 dark:border-gray-600">
<p class="text-white font-bold">[SESSION]: Strength & Conditioning</p>
<p class="text-blue-300 text-sm">[DATE]: 2023-11-04</p>
<p class="text-blue-300 text-sm">[TIME]: 02:00 PM</p>
<p class="text-blue-300 text-sm">[LOCATION]: Gym B</p>
</div>
<div class="bg-blue-800/50 dark:bg-gray-700/50 p-3 rounded-md border border-blue-700 dark:border-gray-600">
<p class="text-white font-bold">[SESSION]: Tactical Review</p>
<p class="text-blue-300 text-sm">[DATE]: 2023-11-05</p>
<p class="text-blue-300 text-sm">[TIME]: 11:00 AM</p>
<p class="text-blue-300 text-sm">[LOCATION]: Tactics Room</p>
</div>
</div>
</section>
<!-- Quick Stats Card -->
<section class="bg-blue-950/70 dark:bg-gray-800/70 backdrop-blur-sm p-6 rounded-lg border border-blue-600 dark:border-gray-700 shadow-lg terminal-glow relative overflow-hidden">
<h2 class="text-sky-400 dark:text-green-400 text-xl font-semibold mb-4">[QUICK_STATS]</h2>
<div class="absolute top-0 right-0 p-2 text-blue-500 text-opacity-50 dark:text-gray-600">\>_</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="bg-blue-800/50 dark:bg-gray-700/50 p-4 rounded-md text-center border border-blue-700 dark:border-gray-600">
<p class="text-sky-300 text-sm">[AVG_HEART_RATE]</p>
<p class="text-3xl text-white font-bold mt-1">145 <span class="text-xl">bpm</span></p>
</div>
<div class="bg-blue-800/50 dark:bg-gray-700/50 p-4 rounded-md text-center border border-blue-700 dark:border-gray-600">
<p class="text-sky-300 text-sm">[TOTAL_DISTANCE]</p>
<p class="text-3xl text-white font-bold mt-1">56.7 <span class="text-xl">km</span></p>
</div>
<div class="bg-blue-800/50 dark:bg-gray-700/50 p-4 rounded-md text-center border border-blue-700 dark:border-gray-600">
<p class="text-sky-300 text-sm">[CALORIES_BURNED]</p>
<p class="text-3xl text-white font-bold mt-1">3245 <span class="text-xl">kcal</span></p>
</div>
<div class="bg-blue-800/50 dark:bg-gray-700/50 p-4 rounded-md text-center border border-blue-700 dark:border-gray-600">
<p class="text-sky-300 text-sm">[TRAINING_SESSIONS]</p>
<p class="text-3xl text-white font-bold mt-1">12 <span class="text-xl">/month</span></p>
</div>
</div>
</section>
<!-- Progress Chart - Placeholder -->
<section class="lg:col-span-2 bg-blue-950/70 dark:bg-gray-800/70 backdrop-blur-sm p-6 rounded-lg border border-blue-600 dark:border-gray-700 shadow-lg terminal-glow relative overflow-hidden">
<h2 class="text-sky-400 dark:text-green-400 text-xl font-semibold mb-4">[PROGRESS_VISUALIZATION]</h2>
<div class="absolute top-0 right-0 p-2 text-blue-500 text-opacity-50 dark:text-gray-600">\>_</div>
<div class="h-48 sm:h-64 md:h-80 bg-blue-800/30 dark:bg-gray-700/30 rounded-md flex items-center justify-center border border-blue-700 dark:border-gray-600">
<p class="text-blue-400 text-lg sm:text-xl font-bold">[CHART_PLACEHOLDER]</p>
<img src="https://picsum.photos/600/300?random=1" alt="Chart Placeholder" class="absolute inset-0 w-full h-full object-cover opacity-20 rounded-md" />
</div>
<p class="text-sky-300 text-sm mt-4">[NOTE]: Visual representation of performance metrics over time.</p>
</section>
<!-- Team Roster / Top Performers (Image based) -->
<section class="bg-blue-950/70 dark:bg-gray-800/70 backdrop-blur-sm p-6 rounded-lg border border-blue-600 dark:border-gray-700 shadow-lg terminal-glow relative overflow-hidden">
<h2 class="text-sky-400 dark:text-green-400 text-xl font-semibold mb-4">[TEAM_ROSTER_TOP_PERFORMERS]</h2>
<div class="absolute top-0 right-0 p-2 text-blue-500 text-opacity-50 dark:text-gray-600">\>_</div>
<div class="grid grid-cols-2 gap-4">
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/women/14.jpg" alt="Player 1" class="w-20 h-20 rounded-full border-2 border-green-400 dark:border-sky-400 p-0.5 object-cover">
<p class="text-white text-sm mt-2">[PLAYER_A_NAME]</p>
<p class="text-sky-300 text-xs">[RATING]: 9.1</p>
</div>
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Player 2" class="w-20 h-20 rounded-full border-2 border-yellow-400 dark:border-orange-400 p-0.5 object-cover">
<p class="text-white text-sm mt-2">[PLAYER_B_NAME]</p>
<p class="text-sky-300 text-xs">[RATING]: 8.8</p>
</div>
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/women/35.jpg" alt="Player 3" class="w-20 h-20 rounded-full border-2 border-blue-400 dark:border-purple-400 p-0.5 object-cover">
<p class="text-white text-sm mt-2">[PLAYER_C_NAME]</p>
<p class="text-sky-300 text-xs">[RATING]: 8.5</p>
</div>
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/men/53.jpg" alt="Player 4" class="w-20 h-20 rounded-full border-2 border-red-400 dark:border-pink-400 p-0.5 object-cover">
<p class="text-white text-sm mt-2">[PLAYER_D_NAME]</p>
<p class="text-sky-300 text-xs">[RATING]: 8.2</p>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="text-center text-blue-400 text-opacity-70 dark:text-gray-500 text-xs mt-8">
<p>© 2023 [FITNESS_APP] - [SYS_STATUS]: ALL_SYSTEMS_GO</p>
<p>[VERSION]: 1.0.0-beta</p>
</footer>
</div>
<!-- Custom glow effect for terminal aesthetic -->
<style>
.terminal-glow::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
/* Dark mode adjustment for glow */
background: linear-gradient(45deg, #0f4c81, #306eb3, #0f4c81); /* Blue glow */
z-index: -1;
filter: blur(8px);
opacity: 0.3;
border-radius: 9px; /* Match parent border-radius + padding */
animation: glow-pulse 3s infinite alternate;
}
.dark .terminal-glow::before {
background: linear-gradient(45deg, #4b5563, #6b7280, #4b5563); /* Gray glow in dark mode */
}
@media (prefers-reduced-motion: reduce) {
.terminal-glow::before {
animation: none;
}
}
@keyframes glow-pulse {
0% { opacity: 0.3; transform: scale(1); }
100% { opacity: 0.4; transform: scale(1.01); }
}
/* Custom scrollbar for log */
.scrollbar-thin::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
background: var(--tw-bg-scrollbar-track, #1e3a8a);
border-radius: 10px;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
background: var(--tw-bg-scrollbar-thumb, #1d4ed8);
border-radius: 10px;
}
.dark .scrollbar-thin::-webkit-scrollbar-track {
background: var(--tw-bg-scrollbar-track-dark, #1f2937);
}
.dark .scrollbar-thin::-webkit-scrollbar-thumb {
background: var(--tw-bg-scrollbar-thumb-dark, #4b5563);
}
</style>
</div>Related Components
Data Visualization Components Component
A retro-vintage data visualization component for social media, featuring a complementary color scheme and moderate complexity. It is responsive and supports dark mode using Tailwind CSS.
Data Visualization Components
A Data Visualization component designed in Brutalist style with Tailwind CSS, featuring responsive layouts and dark theme support.
Data Visualization Components
A complex dashboard data visualization component with retro/vintage aesthetic and complementary color schemes.