Swiss_International_Typography_SAAS_Layout
Autumn 색 구성표와 함께 Swiss/International Typography 디자인 원칙을 사용하는 복잡하고 반응이 빠른 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>관련 구성 요소
소셜 미디어 레이아웃 구성 요소
Tailwind CSS를 사용하여 생생한 색상과 어두운 테마를 지원하는 반응형의 복잡한 3D 스타일 소셜 미디어 레이아웃 구성 요소입니다. 여기에는 로고와 탐색이 있는 헤더, 게시물에 대한 동적 카드가 있는 기본 콘텐츠 영역, 사용자 프로필 및 인기 주제에 대한 사이드바가 포함됩니다. 각 요소는 깊이와 상호 작용 느낌을 줄 수 있도록 스타일이 지정되어 있습니다.
Layout Components 컴포넌트
어두운 테마를 지원하는 소셜 미디어 애플리케이션을 위한 Material Design 원칙을 따르는 반응형 웹 구성 요소 레이아웃입니다.