サイバーパンク暗号ダッシュボードのレイアウト
暗号通貨およびブロックチェーンアプリケーション向けのレスポンシブなサイバーパンクをテーマにしたダッシュボードレイアウトで、ネオンのアクセント、暗い背景、落ち着いた色が特徴です。サイドバーナビゲーション、メインコンテンツエリア、トップバーが含まれています。
HTMLコード
<div class="min-h-screen bg-gray-950 text-gray-400 dark:bg-black dark:text-gray-500 overflow-hidden font-mono">
<!-- Top Bar -->
<header class="flex items-center justify-between px-6 py-4 bg-gray-900 border-b border-purple-800/50 dark:bg-gray-950 dark:border-purple-900/50 relative z-20">
<div class="flex items-center">
<button class="text-purple-400 dark:text-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-600 rounded-md lg:hidden" aria-label="Open sidebar menu">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
<h1 class="ml-4 text-2xl font-bold text-purple-400 dark:text-purple-600 tracking-wider hidden sm:block">BLOCKCHAIN NEXUS</h1>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<input type="text" placeholder="Search circuits..." class="bg-gray-800 text-purple-300 dark:bg-gray-800 dark:text-purple-500 border border-purple-700/50 dark:border-purple-900/50 rounded-md py-2 px-4 focus:outline-none focus:ring-1 focus:ring-purple-500/70 text-sm hidden md:block">
<svg class="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-purple-500 dark:text-purple-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
<button class="text-purple-400 dark:text-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-600 rounded-md hidden sm:block" aria-label="Notifications">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
</svg>
</button>
<div class="w-9 h-9 rounded-full bg-purple-700/50 dark:bg-purple-900/50 flex items-center justify-center overflow-hidden cursor-pointer" aria-label="User avatar">
<img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
</div>
</div>
</header>
<div class="flex flex-col lg:flex-row relative z-10">
<!-- Sidebar -->
<aside class="fixed inset-y-0 left-0 transform -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out bg-gray-900 border-r border-purple-800/50 dark:bg-gray-950 dark:border-purple-900/50 z-20 w-64 pt-20 lg:pt-0">
<nav class="mt-8 px-6 space-y-4">
<a href="#" class="flex items-center text-purple-400 dark:text-purple-600 hover:text-purple-300 dark:hover:text-purple-500 py-2 px-4 rounded-md transition-colors duration-200 bg-purple-900/20 dark:bg-purple-950/20 border border-purple-700/30 dark:border-purple-900/30 shadow-neon-sm">
<svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
</svg>
Dashboard
</a>
<a href="#" class="flex items-center text-gray-400 dark:text-gray-600 hover:text-purple-300 dark:hover:text-purple-500 py-2 px-4 rounded-md transition-colors duration-200">
<svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
Wallets
</a>
<a href="#" class="flex items-center text-gray-400 dark:text-gray-600 hover:text-purple-300 dark:hover:text-purple-500 py-2 px-4 rounded-md transition-colors duration-200">
<svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.0001 0 006.001 9.001H18L21 6m-3 0V4a2 2 0 00-2-2H6a2 2 0 00-2 2v2m10-2l2 2m-2-2l-2 2m0 0l-2 2m2-2h2M7 12h14m-7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path>
</svg>
Transactions
</a>
<a href="#" class="flex items-center text-gray-400 dark:text-gray-600 hover:text-purple-300 dark:hover:text-purple-500 py-2 px-4 rounded-md transition-colors duration-200">
<svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3 3 7-7M3 12a9 9 0 1118 0 9 9 0 01-18 0z"></path>
</svg>
Staking
</a>
<a href="#" class="flex items-center text-gray-400 dark:text-gray-600 hover:text-purple-300 dark:hover:text-purple-500 py-2 px-4 rounded-md transition-colors duration-200">
<svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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>
</nav>
</aside>
<!-- Main Content Area -->
<main class="flex-1 p-6 lg:ml-64 mt-16 lg:mt-0">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
<!-- Card 1 -->
<div class="bg-gray-800 border border-purple-700/40 dark:bg-gray-900 dark:border-purple-900/40 rounded-xl shadow-neon-md p-6 relative group overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-purple-800/10 to-transparent group-hover:from-purple-800/20 transform translate-x-full group-hover:translate-x-0 transition-transform duration-500"></div>
<div class="relative z-10">
<h2 class="text-xl font-semibold text-purple-300 dark:text-purple-500 mb-2">Current Balance</h2>
<p class="text-4xl font-bold text-green-400 dark:text-green-600 mb-4">₿ 3.250</p>
<p class="text-sm text-gray-500 dark:text-gray-700">+ $15,200.00 <span class="text-green-500">(+2.5%)</span></p>
</div>
</div>
<!-- Card 2 -->
<div class="bg-gray-800 border border-purple-700/40 dark:bg-gray-900 dark:border-purple-900/40 rounded-xl shadow-neon-md p-6 relative group overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-blue-800/10 to-transparent group-hover:from-blue-800/20 transform translate-x-full group-hover:translate-x-0 transition-transform duration-500"></div>
<div class="relative z-10">
<h2 class="text-xl font-semibold text-blue-300 dark:text-blue-500 mb-2">Open Positions</h2>
<p class="text-4xl font-bold text-orange-400 dark:text-orange-600 mb-4">5</p>
<p class="text-sm text-gray-500 dark:text-gray-700">Last 24h: <span class="text-red-500">-1</span></p>
</div>
</div>
<!-- Card 3 -->
<div class="bg-gray-800 border border-purple-700/40 dark:bg-gray-900 dark:border-purple-900/40 rounded-xl shadow-neon-md p-6 relative group overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-red-800/10 to-transparent group-hover:from-red-800/20 transform translate-x-full group-hover:translate-x-0 transition-transform duration-500"></div>
<div class="relative z-10">
<h2 class="text-xl font-semibold text-red-300 dark:text-red-500 mb-2">Total Transactions</h2>
<p class="text-4xl font-bold text-yellow-400 dark:text-yellow-600 mb-4">1,287</p>
<p class="text-sm text-gray-500 dark:text-gray-700">Avg. value: $50.00</p>
</div>
</div>
</div>
<!-- Recent Activity Table -->
<div class="bg-gray-800 border border-purple-700/40 dark:bg-gray-900 dark:border-purple-900/40 rounded-xl shadow-neon-md p-6">
<h3 class="text-xl font-semibold text-purple-300 dark:text-purple-500 mb-4">Recent Cyber-Activity Log</h3>
<div class="overflow-x-auto">
<table class="min-w-full leading-normal">
<thead>
<tr>
<th class="px-5 py-3 border-b-2 border-purple-700/50 dark:border-purple-900/50 text-left text-xs font-semibold text-purple-400 dark:text-purple-600 uppercase tracking-wider">Type</th>
<th class="px-5 py-3 border-b-2 border-purple-700/50 dark:border-purple-900/50 text-left text-xs font-semibold text-purple-400 dark:text-purple-600 uppercase tracking-wider">Amount</th>
<th class="px-5 py-3 border-b-2 border-purple-700/50 dark:border-purple-900/50 text-left text-xs font-semibold text-purple-400 dark:text-purple-600 uppercase tracking-wider">Status</th>
<th class="px-5 py-3 border-b-2 border-purple-700/50 dark:border-purple-900/50 text-left text-xs font-semibold text-purple-400 dark:text-purple-600 uppercase tracking-wider">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
<p class="text-gray-300 dark:text-gray-500">BTC Transfer</p>
</td>
<td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
<p class="text-green-400 dark:text-green-600">+ 0.05 BTC</p>
</td>
<td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
<span class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight">
<span aria-hidden="true" class="absolute inset-0 bg-green-200 dark:bg-green-800 opacity-50 rounded-full"></span>
<span class="relative text-green-500 dark:text-green-400">Completed</span>
</span>
</td>
<td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
<p class="text-gray-400 dark:text-gray-600 text-xs">2024-07-26 14:30</p>
</td>
</tr>
<tr>
<td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
<p class="text-gray-300 dark:text-gray-500">ETH Swap</p>
</td>
<td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
<p class="text-orange-400 dark:text-orange-600">- 1.2 ETH</p>
</td>
<td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
<span class="relative inline-block px-3 py-1 font-semibold text-blue-900 leading-tight">
<span aria-hidden="true" class="absolute inset-0 bg-blue-200 dark:bg-blue-800 opacity-50 rounded-full"></span>
<span class="relative text-blue-500 dark:text-blue-400">Pending</span>
</span>
</td>
<td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
<p class="text-gray-400 dark:text-gray-600 text-xs">2024-07-26 10:15</p>
</td>
</tr>
<tr>
<td class="px-5 py-4 border-b-0 text-sm">
<p class="text-gray-300 dark:text-gray-500">USDT Deposit</p>
</td>
<td class="px-5 py-4 border-b-0 text-sm">
<p class="text-green-400 dark:text-green-600">+ 500 USDT</p>
</td>
<td class="px-5 py-4 border-b-0 text-sm">
<span class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight">
<span aria-hidden="true" class="absolute inset-0 bg-green-200 dark:bg-green-800 opacity-50 rounded-full"></span>
<span class="relative text-green-500 dark:text-green-400">Completed</span>
</span>
</td>
<td class="px-5 py-4 border-b-0 text-sm">
<p class="text-gray-400 dark:text-gray-600 text-xs">2024-07-25 18:00</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
<!-- Background Grid/Pattern for Cyberpunk feel -->
<div class="fixed inset-0 pointer-events-none z-0 opacity-10">
<div class="absolute inset-0 [background-image:linear-gradient(to_right,rgba(139,92,246,0.1)_1px,transparent_1px),linear-gradient(to_bottom,rgba(139,92,246,0.1)_1px,transparent_1px)] [background-size:20px_20px] dark:[background-image:linear-gradient(to_right,rgba(124,58,237,0.1)_1px,transparent_1px),linear-gradient(to_bottom,rgba(124,58,237,0.1)_1px,transparent_1px)]"></div>
</div>
</div>
<style>
/* Custom Shadow for Neon Effect */
.shadow-neon-md {
box-shadow: 0 0px 10px rgba(139, 92, 246, 0.4), 0 0px 20px rgba(139, 92, 246, 0.2), inset 0 0 5px rgba(139, 92, 246, 0.2);
}
.dark .shadow-neon-md {
box-shadow: 0 0px 10px rgba(124, 58, 237, 0.4), 0 0px 20px rgba(124, 58, 237, 0.2), inset 0 0 5px rgba(124, 58, 237, 0.2);
}
.shadow-neon-sm {
box-shadow: 0 0px 5px rgba(139, 92, 246, 0.3), inset 0 0 3px rgba(139, 92, 246, 0.15);
}
.dark .shadow-neon-sm {
box-shadow: 0 0px 5px rgba(124, 58, 237, 0.3), inset 0 0 3px rgba(124, 58, 237, 0.15);
}
/* Prevent scroll when sidebar is open on small screens */
@media (max-width: 1023px) {
body:has(.sidebar-open) {
overflow: hidden;
}
}
/* Simple JS for sidebar toggle (optional, for demonstration) */
/* Remove if using a JS framework or pure HTML with :target etc. */
document.addEventListener('DOMContentLoaded', () => {
const sidebarButton = document.querySelector('header button');
const sidebar = document.querySelector('aside');
sidebarButton.addEventListener('click', () => {
sidebar.classList.toggle('-translate-x-full');
document.body.classList.toggle('sidebar-open');
});
// Close sidebar when clicking outside (on overlay) - requires an overlay div
// Or just clicking anywhere outside for simplicity
document.addEventListener('click', (event) => {
if (!sidebar.contains(event.target) && !sidebarButton.contains(event.target) && !sidebar.classList.contains('-translate-x-full')) {
sidebar.classList.add('-translate-x-full');
document.body.classList.remove('sidebar-open');
}
});
});
</style>関連コンポーネント
ソーシャル メディア レイアウト コンポーネント
Tailwind CSSを使用した鮮やかな色とダークテーマのサポートを備えた、レスポンシブで複雑な3Dにインスパイアされたソーシャルメディアレイアウトコンポーネント。これには、ロゴとナビゲーションを含むヘッダー、投稿用の動的カードを含むメインコンテンツエリア、ユーザープロファイルとトレンドトピック用のサイドバーが含まれます。各要素は、奥行きと相互作用の感覚を与えるようにスタイル化されています。
レイアウトコンポーネント
ブログやコンテンツの消費用に設計された複雑なレイアウトコンポーネントで、マイクロインタラクションと補色スキームが特徴です。さまざまなインタラクティブ要素が含まれており、ダークモードをサポートしています。