Neon_Glow_Gaming_Layout
ネオン/グロー効果とグレースケールの配色を備えた、複雑で応答性の高いゲームレイアウトコンポーネントで、ダークモードをサポートします。
HTMLコード
<div class="min-h-screen bg-gray-950 text-gray-50 dark:bg-black dark:text-gray-100 font-mono overflow-hidden">
<!-- Global Glow Background (Pseudo-elements or JS for better control, but using divs for pure HTML/CSS) -->
<div class="absolute inset-0 z-0 opacity-20">
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-gray-700/30 rounded-full mix-blend-screen filter blur-3xl animate-pulse-slow"></div>
<div class="absolute top-1/2 left-3/4 w-80 h-80 bg-gray-500/30 rounded-full mix-blend-screen filter blur-3xl animate-pulse-slow animation-delay-2000"></div>
<div class="absolute bottom-1/4 left-1/2 w-72 h-72 bg-gray-600/30 rounded-full mix-blend-screen filter blur-3xl animate-pulse-slow animation-delay-4000"></div>
</div>
<!-- Main Content Container with Z-index to be above glows -->
<div class="relative z-10 container mx-auto px-4 py-8 md:py-12 lg:py-16">
<!-- Header -->
<header class="flex flex-col md:flex-row justify-between items-center mb-8 md:mb-12 border-b-2 border-gray-700 pb-4">
<h1 class="text-4xl lg:text-5xl font-extrabold tracking-in-contract text-gray-100 drop-shadow-lg [text-shadow:_0_0_10px_rgb(255_255_255_/_0.5),_0_0_20px_rgb(255_255_255_/_0.3)] mb-4 md:mb-0">
NEON NEXUS
</h1>
<nav class="flex space-x-6 text-gray-400 text-lg">
<a href="#" class="relative group hover:text-gray-100 transition-colors duration-300">
Home
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-line"></span>
</a>
<a href="#" class="relative group hover:text-gray-100 transition-colors duration-300">
Games
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-line"></span>
</a>
<a href="#" class="relative group hover:text-gray-100 transition-colors duration-300">
Community
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-line"></span>
</a>
<a href="#" class="relative group hover:text-gray-100 transition-colors duration-300">
Profile
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-line"></span>
</a>
</nav>
</header>
<!-- Main Layout Grid -->
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
<!-- Left Sidebar (Player Info / Quick Menu) -->
<aside class="lg:col-span-1 border border-gray-800 rounded-lg p-6 bg-gray-900/50 backdrop-blur-sm glow-border">
<div class="flex flex-col items-center mb-6">
<img class="w-24 h-24 rounded-full border-2 border-gray-700 p-1 mb-4 glow-avatar" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Player Avatar">
<h3 class="text-2xl font-bold text-gray-100 glow-text">GamerTagX</h3>
<span class="text-sm text-gray-400">Level 99 - Elite</span>
</div>
<ul class="space-y-4 text-gray-300">
<li class="hover:text-gray-100 transition-colors duration-300">
<a href="#" class="block p-2 rounded-md hover:bg-gray-800/70 glow-item flex items-center">
<svg class="w-6 h-6 mr-2 glow-icon" 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="M9.75 17L9 20l-1 1h4l-1-1 1-6M7 10h10a2 2 0 012 2v8a2 2 0 01-2 2H7a2 2 0 01-2-2v-8a2 2 0 012-2z"></path></svg>
My Library
</a>
</li>
<li class="hover:text-gray-100 transition-colors duration-300">
<a href="#" class="block p-2 rounded-md hover:bg-gray-800/70 glow-item flex items-center">
<svg class="w-6 h-6 mr-2 glow-icon" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
Chat Rooms
</a>
</li>
<li class="hover:text-gray-100 transition-colors duration-300">
<a href="#" class="block p-2 rounded-md hover:bg-gray-800/70 glow-item flex items-center">
<svg class="w-6 h-6 mr-2 glow-icon" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
Settings
</a>
</li>
</ul>
<button class="mt-8 w-full py-3 border border-gray-700 bg-gray-800/50 text-gray-200 rounded-md hover:bg-gray-700/70 transition-colors duration-300 glow-button">
Logout
</button>
</aside>
<!-- Main Content Area (Featured Games / News) -->
<main class="lg:col-span-2 space-y-8">
<!-- Featured Game Carousel (Simplified) -->
<section class="border border-gray-800 rounded-lg p-6 bg-gray-900/50 backdrop-blur-sm glow-border">
<h2 class="text-3xl font-bold mb-6 text-gray-100 glow-text">Featured Warzone</h2>
<div class="relative w-full h-64 md:h-80 rounded-md overflow-hidden border border-gray-700 glow-inset">
<img class="w-full h-full object-cover object-center " src="https://picsum.photos/1200/600?random=1" alt="Featured Game 1">
<div class="absolute inset-0 bg-gradient-to-t from-gray-950 to-transparent flex items-end p-6">
<h3 class="text-2xl font-bold text-gray-50 glow-text drop-shadow-md">CYBERPUNK ARENA 2077</h3>
<button class="absolute bottom-6 right-6 px-5 py-2 bg-gray-700/70 border border-gray-600 text-gray-50 rounded-md hover:bg-gray-600/90 transition-all duration-300 glow-button-play">
Play Now
</button>
</div>
</div>
<div class="flex justify-center mt-4 space-x-2">
<span class="block w-3 h-3 rounded-full bg-gray-600 glow-dot-active"></span>
<span class="block w-3 h-3 rounded-full bg-gray-800 glow-dot"></span>
<span class="block w-3 h-3 rounded-full bg-gray-800 glow-dot"></span>
</div>
</section>
<!-- Latest News/Updates -->
<section class="border border-gray-800 rounded-lg p-6 bg-gray-900/50 backdrop-blur-sm glow-border">
<h2 class="text-3xl font-bold mb-6 text-gray-100 glow-text">Latest Intel & Updates</h2>
<div class="space-y-6">
<article class="flex flex-col md:flex-row bg-gray-900/70 p-4 rounded-md border border-gray-800 hover:border-gray-700 glow-card">
<img class="w-full md:w-32 h-32 object-cover rounded-md mr-4 mb-4 md:mb-0 glow-image-border" src="https://picsum.photos/300/200?random=2" alt="News Item 1">
<div>
<h3 class="text-xl font-bold text-gray-100 mb-2 glow-text">Patch 1.0.5 'Phantom Echoes' Released!</h3>
<p class="text-gray-400 text-sm">Major balance changes for all classes, new map 'The Void', and enhanced anti-cheat measures. Download now!</p>
<a href="#" class="text-gray-500 hover:text-gray-300 text-sm mt-2 block glow-link">Read More →</a>
</div>
</article>
<article class="flex flex-col md:flex-row bg-gray-900/70 p-4 rounded-md border border-gray-800 hover:border-gray-700 glow-card">
<img class="w-full md:w-32 h-32 object-cover rounded-md mr-4 mb-4 md:mb-0 glow-image-border" src="https://picsum.photos/300/200?random=3" alt="News Item 2">
<div>
<h3 class="text-xl font-bold text-gray-100 mb-2 glow-text">Community Tournament Sign-ups Open</h3>
<p class="text-gray-400 text-sm">Compete for glory and exclusive in-game rewards! Register your team before April 30th.</p>
<a href="#" class="text-gray-500 hover:text-gray-300 text-sm mt-2 block glow-link">Sign Up →</a>
</div>
</article>
</div>
</section>
</main>
<!-- Right Sidebar (Live Stream / Friends List) -->
<aside class="lg:col-span-1 space-y-8 flex flex-col">
<!-- Live Stream Widget -->
<section class="border border-gray-800 rounded-lg p-6 bg-gray-900/50 backdrop-blur-sm glow-border flex-grow">
<h2 class="text-2xl font-bold mb-4 text-gray-100 glow-text">Live Missions</h2>
<div class="relative w-full aspect-video rounded-md overflow-hidden border border-gray-700 mb-4 glow-inset">
<img class="w-full h-full object-cover" src="https://picsum.photos/400/225?random=4" alt="Live Stream Placeholder">
<div class="absolute top-2 left-2 bg-red-600 text-gray-50 text-xs px-2 py-1 rounded glow-live">LIVE</div>
<div class="absolute inset-0 bg-gradient-to-t from-gray-950/70 to-transparent flex items-end p-3">
<span class="text-xs text-gray-300 drop-shadow-sm">@StreamerProX <span class="text-gray-500">(1.2K Viewers)</span></span>
</div>
</div>
<p class="text-gray-400 text-sm mb-4">'Conquering the Wasteland' - Join me for an epic solo run!</p>
<button class="w-full py-2 bg-gray-700/70 border border-gray-600 text-gray-50 rounded-md hover:bg-gray-600/90 transition-all duration-300 glow-button">
Watch Stream
</button>
</section>
<!-- Friends Online List -->
<section class="border border-gray-800 rounded-lg p-6 bg-gray-900/50 backdrop-blur-sm glow-border">
<h2 class="text-2xl font-bold mb-4 text-gray-100 glow-text">Squad Online [<span class="text-green-500 drop-shadow-md [text-shadow:_0_0_5px_rgb(34_197_94_/_0.7)]">3</span>]</h2>
<ul class="space-y-3">
<li class="flex items-center text-gray-300">
<img class="w-10 h-10 rounded-full border-2 border-green-500 p-0.5 mr-3 glow-avatar-online" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Friend Avatar">
<div>
<span class="font-bold glow-text">Neo_Warrior</span>
<span class="block text-xs text-gray-500">In-game: Cyberpunk Arena</span>
</div>
</li>
<li class="flex items-center text-gray-300">
<img class="w-10 h-10 rounded-full border-2 border-green-500 p-0.5 mr-3 glow-avatar-online" src="https://randomuser.me/api/portraits/men/22.jpg" alt="Friend Avatar">
<div>
<span class="font-bold glow-text">Byte_Crusher</span>
<span class="block text-xs text-gray-500">Online, Idle</span>
</div>
</li>
<li class="flex items-center text-gray-300">
<img class="w-10 h-10 rounded-full border-2 border-green-500 p-0.5 mr-3 glow-avatar-online" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Friend Avatar">
<div>
<span class="font-bold glow-text">GhostlyGamer</span>
<span class="block text-xs text-gray-500">In-game: Warzone Rifts</span>
</div>
</li>
<li class="flex items-center text-gray-500 opacity-70">
<img class="w-10 h-10 rounded-full border-2 border-gray-700 p-0.5 mr-3" src="https://randomuser.me/api/portraits/men/88.jpg" alt="Friend Avatar">
<div>
<span class="font-bold">Offline_Dude</span>
<span class="block text-xs text-gray-600">Offline</span>
</div>
</li>
</ul>
</section>
</aside>
</div>
<!-- Footer (simple) -->
<footer class="mt-12 text-center text-gray-600 text-sm border-t-2 border-gray-800 pt-6">
<p>© 2077 Neon Nexus. All rights reserved. <span class="text-gray-700">[Powered by Cybernetic Code]</span></p>
</footer>
</div>
<!-- Custom Tailwind CSS (for animations) -->
<style>
@keyframes pulse-slow {
0%, 100% { transform: scale(1); opacity: 0.2; }
50% { transform: scale(1.1); opacity: 0.35; }
}
@keyframes tracking-in-contract {
0% {
letter-spacing: 1em;
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
letter-spacing: normal;
opacity: 1;
}
}
.animate-pulse-slow {
animation: pulse-slow 6s ease-in-out infinite;
}
.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-4000 {
animation-delay: 4s;
}
.tracking-in-contract {
animation: tracking-in-contract 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
.glow-line {
box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.glow-border {
box-shadow: 0 0 10px rgba(150, 150, 150, 0.15), 0 0 20px rgba(150, 150, 150, 0.05);
}
.dark .glow-border {
box-shadow: 0 0 10px rgba(255, 255, 255, 0.1), 0 0 20px rgba(255, 255, 255, 0.05);
}
.glow-item:hover {
text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.05);
}
.dark .glow-item:hover {
text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.08);
}
.glow-text {
text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}
.dark .glow-text {
text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}
.glow-card:hover {
box-shadow: 0 0 15px rgba(150, 150, 150, 0.2), 0 0 30px rgba(150, 150, 150, 0.1);
transform: translateY(-2px);
}
.dark .glow-card:hover {
box-shadow: 0 0 15px rgba(255, 255, 255, 0.15), 0 0 30px rgba(255, 255, 255, 0.08);
}
.glow-button {
box-shadow: 0 0 8px rgba(150, 150, 150, 0.1), inset 0 0 5px rgba(255, 255, 255, 0.05);
}
.glow-button:hover {
box-shadow: 0 0 15px rgba(150, 150, 150, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.1);
transform: translateY(-1px);
}
.dark .glow-button {
box-shadow: 0 0 8px rgba(255, 255, 255, 0.1), inset 0 0 5px rgba(255, 255, 255, 0.08);
}
.dark .glow-button:hover {
box-shadow: 0 0 15px rgba(255, 255, 255, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.15);
}
.glow-button-play {
box-shadow: 0 0 10px rgba(255, 255, 255, 0.0); /* softer initial glow for play button */
border: 1px solid rgba(255, 255, 255, 0.1);
}
.glow-button-play:hover {
box-shadow: 0 0 15px rgba(255, 255, 255, 0.3), 0 0 30px rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.4);
}
.glow-live {
box-shadow: 0 0 8px rgba(255, 0, 0, 0.7);
}
.glow-avatar {
box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}
.dark .glow-avatar {
box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}
.glow-avatar-online {
box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
}
.glow-dot-active {
box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
}
.dark .glow-dot-active {
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
.glow-dot {
box-shadow: 0 0 3px rgba(255, 255, 255, 0.2);
}
.dark .glow-dot {
box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}
.glow-inset {
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1);
}
.dark .glow-inset {
box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.2);
}
.glow-image-border {
box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}
.dark .glow-image-border {
box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}
.glow-link:hover {
text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}
</style>
</div>関連コンポーネント
ダークモードポートフォリオレイアウト
ポートフォリオ用のダークモードレスポンシブレイアウトコンポーネントで、Tailwind CSS を使用したモノクロの配色が特徴です。コンテンツのプレースホルダーが含まれており、JavaScript を使用しない場合の適度な複雑さに対応するように設計されています。
ダークモードレイアウトコンポーネント
Tailwind CSS を使用したダーク モードをサポートするレスポンシブ レイアウト コンポーネント。シンプルなヘッダー、コンテンツエリア、フッターが特徴です。ダークモードは、Tailwindクラスの「dark:」プレフィックスによって処理されます。