Swiss_International_Typography_SAAS_Layout
スイス/インターナショナルタイポグラフィのデザイン原則と秋の配色を使用した、複雑でレスポンシブなSaaSアプリケーションレイアウト。サイドバーナビゲーション、ヘッダー、メインコンテンツエリア、ウィジェットを備えており、すべてダークモードがサポートされています。
HTMLコード
<div class="min-h-screen bg-orange-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100 font-sans">
<!-- Global container with grid layout for desktop -->
<div class="lg:grid lg:grid-cols-[280px_1fr] lg:min-h-screen">
<!-- Sidebar Navigation -->
<aside class="hidden lg:block bg-orange-100 dark:bg-gray-800 p-6 shadow-md dark:shadow-lg overflow-y-auto border-r border-orange-200 dark:border-gray-700">
<div class="flex items-center mb-10">
<svg class="w-8 h-8 text-orange-600 dark:text-orange-400 mr-3" 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 1h8l-1-1-1.25-3M15 10V5l-1-1H9l-1 1v5m-1 8h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
<h1 class="text-2xl font-bold text-gray-900 dark:text-gray-50">SaaSApp.ai</h1>
</div>
<nav>
<ul>
<li class="mb-3">
<a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-200 hover:bg-orange-200 dark:hover:bg-gray-700 transition-colors duration-200 font-medium">
<svg class="w-5 h-5 mr-3" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-10-7v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h3v-3m0 0h.01M5 15V4a1 1 0 011-1h12a1 1 0 011 1v11a1 1 0 01-1 1h-3m-6 0v3h6m-3 0v3h6"></path></svg>
Dashboard
</a>
</li>
<li class="mb-3">
<a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-200 hover:bg-orange-200 dark:hover:bg-gray-700 transition-colors duration-200 font-medium">
<svg class="w-5 h-5 mr-3" 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 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0h-2m2 0h2m-4 0v-6m-4-2H3a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0h-2m2 0h2m-4 0v-6m-4-2h-3v-6a2 2 0 00-2-2H7a2 2 0 00-2 2v6zm0 0h-2m2 0h2m-4 0v-6m-4-2h-3v-6a2 2 0 00-2-2H7a2 2 0 00-2 2v6z"></path></svg>
Projects
</a>
</li>
<li class="mb-3">
<a href="#" class="flex items-center p-3 rounded-lg bg-orange-600 dark:bg-orange-700 text-white font-semibold shadow-md dark:shadow-xl">
<svg class="w-5 h-5 mr-3" 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 7v4a1 1 0 001 1h4a1 1 0 001-1V7m0 10v3m-4 0v-3m4 0V7m0 10h.01M8 10h.01M12 10h.01M16 10h.01M9 6h6a2 2 0 012 2v10a2 2 0 01-2 2H9a2 2 0 01-2-2V8a2 2 0 012-2z"></path></svg>
Analytics
</a>
</li>
<li class="mb-3">
<a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-200 hover:bg-orange-200 dark:hover:bg-gray-700 transition-colors duration-200 font-medium">
<svg class="w-5 h-5 mr-3" 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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2m2 0h3m-3 0a1 1 0 01-1-1V4a1 1 0 011-1h14a1 1 0 011 1v5M4 7h16m-4 0h4"></path></svg>
Team
</a>
</li>
<li class="mb-3">
<a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-200 hover:bg-orange-200 dark:hover:bg-gray-700 transition-colors duration-200 font-medium">
<svg class="w-5 h-5 mr-3" 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>
</nav>
<div class="mt-10 pt-6 border-t border-orange-300 dark:border-gray-700">
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Need help?</p>
<a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-200 hover:bg-orange-200 dark:hover:bg-gray-700 transition-colors duration-200 font-medium">
<svg class="w-5 h-5 mr-3" 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.228 9.971a4.75 4.75 0 004.582-4.08M14.252 5.102a9 9 0 011.597 1.834m-.025 8.165a9 9 0 01-1.597 1.834M12 18.75V21m0-2.25V18S7.05 15 7.05 12a5.58 5.58 0 011.23-.273M16.95 12c0-3-4.145-5.918-4.95-6.75m4.95 6.75l.012-.008"></path></svg>
Support
</a>
</div>
</aside>
<!-- Main Content Area -->
<main class="flex-1 flex flex-col">
<!-- Top Header -->
<header class="bg-white dark:bg-gray-800 p-4 border-b border-orange-200 dark:border-gray-700 flex items-center justify-between shadow-sm dark:shadow-md">
<div class="flex items-center">
<button class="lg:hidden mr-4 p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200">
<svg class="w-6 h-6 text-gray-700 dark:text-gray-200" 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="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
<h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-50">Analytics Overview</h2>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<input type="text" placeholder="Search..." class="py-2 pl-10 pr-4 rounded-full bg-orange-50 dark:bg-gray-700 border border-orange-200 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-orange-400 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition-colors duration-200">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500 dark:text-gray-400" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>
<button class="p-2 rounded-full bg-orange-200 dark:bg-gray-700 hover:bg-orange-300 dark:hover:bg-gray-600 transition-colors duration-200">
<svg class="w-6 h-6 text-orange-700 dark:text-orange-300" 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="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="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-orange-400 dark:border-orange-500">
<span class="font-medium text-gray-800 dark:text-gray-100 hidden md:block">John Doe</span>
</div>
</div>
</header>
<!-- Analytics Content -->
<div class="flex-1 p-6 lg:p-8 overflow-y-auto">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-8">
<!-- Metric Card 1 -->
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border-t-4 border-orange-500 dark:border-orange-600 transition-all duration-300 ease-in-out hover:shadow-xl">
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-2">Total Users</h3>
<p class="text-4xl font-bold text-gray-900 dark:text-gray-50">15,483</p>
<p class="text-sm text-green-600 dark:text-green-400 mt-2">+12% from last month</p>
</div>
<!-- Metric Card 2 -->
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border-t-4 border-brown-500 dark:border-brown-600 transition-all duration-300 ease-in-out hover:shadow-xl">
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-2">Active Sessions</h3>
<p class="text-4xl font-bold text-gray-900 dark:text-gray-50">2,109</p>
<p class="text-sm text-red-600 dark:text-red-400 mt-2">-3% from last month</p>
</div>
<!-- Metric Card 3 -->
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border-t-4 border-burgundy-500 dark:border-burgundy-600 transition-all duration-300 ease-in-out hover:shadow-xl">
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-2">Revenue Growth</h3>
<p class="text-4xl font-bold text-gray-900 dark:text-gray-50">$45.5K</p>
<p class="text-sm text-green-600 dark:text-green-400 mt-2">+18% from last month</p>
</div>
<!-- Metric Card 4 -->
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border-t-4 border-yellow-600 dark:border-yellow-700 transition-all duration-300 ease-in-out hover:shadow-xl">
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-2">New Signups</h3>
<p class="text-4xl font-bold text-gray-900 dark:text-gray-50">876</p>
<p class="text-sm text-green-600 dark:text-green-400 mt-2">+5% from last week</p>
</div>
</div>
<!-- Charts and Tables Section -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Chart Placeholder -->
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-xl">
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-4">Traffic Sources</h3>
<img src="https://picsum.photos/600/350?random=1" alt="Placeholder chart for traffic sources" class="w-full h-auto rounded-md object-cover border border-orange-100 dark:border-gray-700" loading="lazy">
<p class="text-sm text-gray-500 dark:text-gray-400 mt-4">Data visualization of user traffic by source (e.g., Organic, Referral, Direct).</p>
</div>
<!-- Table Placeholder -->
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-xl">
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-4">Recent Activities</h3>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-orange-200 dark:divide-gray-700">
<thead class="bg-orange-50 dark:bg-gray-700">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Action</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">User</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Time</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800 divide-y divide-orange-100 dark:divide-gray-700">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Created Project 'Alpha'</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Jane Smith</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2 mins ago</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Updated Dashboard Settings</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Robert Johnson</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">1 hour ago</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Completed 'Beta' task</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Emily White</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">3 hours ago</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Another Chart -->
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-xl">
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-4">Conversion Rate Over Time</h3>
<img src="https://picsum.photos/600/350?random=2" alt="Placeholder chart for conversion rates" class="w-full h-auto rounded-md object-cover border border-orange-100 dark:border-gray-700" loading="lazy">
<p class="text-sm text-gray-500 dark:text-gray-400 mt-4">Illustrates the trend of conversion rates for the past few weeks.</p>
</div>
<!-- User List/Overview -->
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-xl">
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-4">Top Users</h3>
<div class="space-y-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/5.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border border-orange-200 dark:border-gray-600">
<div>
<p class="font-medium text-gray-900 dark:text-gray-100">Alice Wonderland</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Active Project: "Project Chimera"</p>
</div>
</div>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border border-orange-200 dark:border-gray-600">
<div>
<p class="font-medium text-gray-900 dark:text-gray-100">Bob The Builder</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Account Status: Premium</p>
</div>
</div>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/24.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border border-orange-200 dark:border-gray-600">
<div>
<p class="font-medium text-gray-900 dark:text-gray-100">Charlie Chaplin</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Last Login: Yesterday</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- Mobile Bottom Navigation (optional, for very small screens) -->
<nav class="fixed bottom-0 left-0 right-0 lg:hidden bg-white dark:bg-gray-800 border-t border-orange-200 dark:border-gray-700 shadow-lg z-10">
<ul class="flex justify-around items-center h-16">
<li>
<a href="#" class="flex flex-col items-center text-xs text-gray-700 dark:text-gray-200 hover:text-orange-600 dark:hover:text-orange-400">
<svg class="w-6 h-6 mb-1" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-10-7v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h3v-3m0 0h.01M5 15V4a1 1 0 011-1h12a1 1 0 011 1v11a1 1 0 01-1 1h-3m-6 0v3h6m-3 0v3h6"></path></svg>
<span>Dash</span>
</a>
</li>
<li>
<a href="#" class="flex flex-col items-center text-xs text-orange-600 dark:text-orange-400">
<svg class="w-6 h-6 mb-1" 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 7v4a1 1 0 001 1h4a1 1 0 001-1V7m0 10v3m-4 0v-3m4 0V7m0 10h.01M8 10h.01M12 10h.01M16 10h.01M9 6h6a2 2 0 012 2v10a2 2 0 01-2 2H9a2 2 0 01-2-2V8a2 2 0 012-2z"></path></svg>
<span>Analytics</span>
</a>
</li>
<li>
<a href="#" class="flex flex-col items-center text-xs text-gray-700 dark:text-gray-200 hover:text-orange-600 dark:hover:text-orange-400">
<svg class="w-6 h-6 mb-1" 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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2m2 0h3m-3 0a1 1 0 01-1-1V4a1 1 0 011-1h14a1 1 0 011 1v5M4 7h16m-4 0h4"></path></svg>
<span>Team</span>
</a>
</li>
<li>
<a href="#" class="flex flex-col items-center text-xs text-gray-700 dark:text-gray-200 hover:text-orange-600 dark:hover:text-orange-400">
<svg class="w-6 h-6 mb-1" 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>
<span>Settings</span>
</a>
</li>
</ul>
</nav>
</div>関連コンポーネント
トライアド 3D ビジネス レイアウト コンポーネント
ビジネス/企業のWebサイト向けの適度な複雑さのレイアウトコンポーネントで、トライアドの配色と奥行きのある3Dデザイン要素を備え、完全な応答性とダークモードのサポートを備えています。
ダークモードレイアウトコンポーネント
Tailwind CSS を使用したダーク モードをサポートするレスポンシブ レイアウト コンポーネント。シンプルなヘッダー、コンテンツエリア、フッターが特徴です。ダークモードは、Tailwindクラスの「dark:」プレフィックスによって処理されます。