Skeuomorphic_Grid_Layout_Business
비즈니스/기업 웹사이트를 위한 복잡하고 반응이 빠른 그리드 레이아웃 구성 요소로, 따뜻한 뉴트럴 색상과 다크 모드를 지원하는 스큐어모픽 디자인 스타일을 특징으로 합니다. 요소는 깊이와 미묘한 질감으로 실제 개체를 모방합니다.
HTML 코드
<div class="min-h-screen bg-gradient-to-br from-stone-100 to-stone-200 text-stone-800 dark:from-stone-900 dark:to-stone-950 dark:text-stone-200 p-4 sm:p-8 font-sans transition-colors duration-300">
<!-- Skeuomorphic Top Bar / Header -->
<header class="relative mb-8 rounded-xl bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 p-4 sm:p-6 shadow-xl
hover:shadow-2xl transition-all duration-300
before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5
after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-500/50 dark:after:shadow-black/20">
<div class="flex flex-col sm:flex-row items-center justify-between z-10 relative">
<h1 class="text-2xl sm:text-3xl font-bold tracking-tight text-stone-700 dark:text-stone-300 drop-shadow-md">Corporate Dashboard</h1>
<div class="mt-4 sm:mt-0 flex flex-wrap gap-3">
<button class="relative px-5 py-2 rounded-lg text-lg font-semibold text-stone-700 dark:text-stone-300
bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-600 dark:to-stone-700
shadow-lg hover:shadow-xl active:shadow-inner transition-all duration-200
before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5
after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20
focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 focus:ring-offset-stone-50 dark:focus:ring-offset-stone-900">
<span class="relative z-10">Reports</span>
</button>
<button class="relative px-5 py-2 rounded-lg text-lg font-semibold text-stone-700 dark:text-stone-300
bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-600 dark:to-stone-700
shadow-lg hover:shadow-xl active:shadow-inner transition-all duration-200
before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5
after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20
focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 focus:ring-offset-stone-50 dark:focus:ring-offset-stone-900">
<span class="relative z-10">Settings</span>
</button>
</div>
</div>
</header>
<main class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">
<!-- Skeuomorphic Card 1 - Project Overview -->
<section class="relative rounded-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 p-6 shadow-xl
hover:shadow-2xl transition-all duration-300
before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5
after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20">
<h2 class="text-xl font-semibold mb-4 text-stone-700 dark:text-stone-300 drop-shadow-sm">Project Overview</h2>
<p class="text-stone-600 dark:text-stone-400 leading-relaxed mb-4">Track the progress of our current initiatives and upcoming milestones. Stay informed on key performance indicators.</p>
<div class="grid grid-cols-2 gap-4">
<div class="relative p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md
before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
<p class="text-sm text-stone-700 dark:text-stone-300 font-medium">Completed</p>
<p class="text-2xl font-bold text-green-700 dark:text-green-400">75%</p>
</div>
<div class="relative p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md
before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
<p class="text-sm text-stone-700 dark:text-stone-300 font-medium">Pending</p>
<p class="text-2xl font-bold text-amber-700 dark:text-amber-400">25%</p>
</div>
</div>
<button class="relative mt-6 w-full py-2 rounded-lg text-lg font-semibold text-stone-700 dark:text-stone-300
bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800
shadow-md hover:shadow-lg active:shadow-inner transition-all duration-200
before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5
after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-stone-500/50 dark:after:shadow-black/20
focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 focus:ring-offset-stone-50 dark:focus:ring-offset-stone-900">
<span class="relative z-10">View Details</span>
</button>
</section>
<!-- Skeuomorphic Card 2 - Team Members -->
<section class="relative rounded-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 p-6 shadow-xl
hover:shadow-2xl transition-all duration-300
before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5
after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20">
<h2 class="text-xl font-semibold mb-4 text-stone-700 dark:text-stone-300 drop-shadow-sm">Team Members</h2>
<ul class="space-y-4">
<li class="flex items-center gap-4 relative p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md
before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of John Doe" class="w-12 h-12 rounded-full border-2 border-stone-400 dark:border-stone-600 shadow-inner-strong">
<div>
<p class="font-medium text-stone-700 dark:text-stone-300">John Doe</p>
<p class="text-sm text-stone-600 dark:text-stone-400">Lead Developer</p>
</div>
</li>
<li class="flex items-center gap-4 relative p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md
before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
<img src="https://randomuser.me/api/portraits/women/42.jpg" alt="Avatar of Jane Smith" class="w-12 h-12 rounded-full border-2 border-stone-400 dark:border-stone-600 shadow-inner-strong">
<div>
<p class="font-medium text-stone-700 dark:text-stone-300">Jane Smith</p>
<p class="text-sm text-stone-600 dark:text-stone-400">Project Manager</p>
</div>
</li>
<li class="flex items-center gap-4 relative p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md
before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of Bob Johnson" class="w-12 h-12 rounded-full border-2 border-stone-400 dark:border-stone-600 shadow-inner-strong">
<div>
<p class="font-medium text-stone-700 dark:text-stone-300">Bob Johnson</p>
<p class="text-sm text-stone-600 dark:text-stone-400">UI/UX Designer</p>
</div>
</li>
</ul>
</section>
<!-- Skeuomorphic Card 3 - Quick Links -->
<section class="relative rounded-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 p-6 shadow-xl
hover:shadow-2xl transition-all duration-300
before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5
after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20">
<h2 class="text-xl font-semibold mb-4 text-stone-700 dark:text-stone-300 drop-shadow-sm">Quick Links</h2>
<nav>
<ul class="space-y-3">
<li>
<a href="#" class="relative flex items-center gap-2 py-2 px-4 rounded-lg text-lg text-stone-700 dark:text-stone-300
bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800
shadow-md hover:shadow-lg active:shadow-inner transition-all duration-200
before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5
after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-stone-500/50 dark:after:shadow-black/20
focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 focus:ring-offset-stone-50 dark:focus:ring-offset-stone-900">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-stone-600 dark:text-stone-400 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M3 5h18M5 9h14M8 9V5m8 4V5m-1 7l-4 4m0 0l-4-4m4 4V13" />
</svg>
<span class="relative z-10">Knowledge Base</span>
</a>
</li>
<li>
<a href="#" class="relative flex items-center gap-2 py-2 px-4 rounded-lg text-lg text-stone-700 dark:text-stone-300
bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800
shadow-md hover:shadow-lg active:shadow-inner transition-all duration-200
before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5
after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-stone-500/50 dark:after:shadow-black/20
focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 focus:ring-offset-stone-50 dark:focus:ring-offset-stone-900">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-stone-600 dark:text-stone-400 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h8m-8 4h8m-9 4h8M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
<span class="relative z-10">Upcoming Events</span>
</a>
</li>
<li>
<a href="#" class="relative flex items-center gap-2 py-2 px-4 rounded-lg text-lg text-stone-700 dark:text-stone-300
bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800
shadow-md hover:shadow-lg active:shadow-inner transition-all duration-200
before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5
after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-stone-500/50 dark:after:shadow-black/20
focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 focus:ring-offset-stone-50 dark:focus:ring-offset-stone-900">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-stone-600 dark:text-stone-400 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M7 8h10M7 12h10M7 16h10M9 1h6a2 2 0 012 2v14a2 2 0 01-2 2H9a2 2 0 01-2-2V3a2 2 0 012-2z" />
</svg>
<span class="relative z-10">Support Tickets</span>
</a>
</li>
</ul>
</nav>
</section>
<!-- Skeuomorphic Card 4 - Recent Activity (Spans two columns on larger screens) -->
<section class="relative rounded-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 p-6 shadow-xl
hover:shadow-2xl transition-all duration-300 col-span-1 md:col-span-2 lg:col-span-1
before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5
after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20">
<h2 class="text-xl font-semibold mb-4 text-stone-700 dark:text-stone-300 drop-shadow-sm">Recent Activity</h2>
<ul class="space-y-4">
<li class="relative flex items-center gap-4 p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md
before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-stone-400 dark:border-stone-600 shadow-inner-strong">
<div>
<p class="text-stone-700 dark:text-stone-300"><span class="font-medium">Sarah Connor</span> updated a project.</p>
<p class="text-sm text-stone-600 dark:text-stone-400">2 hours ago</p>
</div>
</li>
<li class="relative flex items-center gap-4 p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md
before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
<img src="https://randomuser.me/api/portraits/men/80.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-stone-400 dark:border-stone-600 shadow-inner-strong">
<div>
<p class="text-stone-700 dark:text-stone-300"><span class="font-medium">Michael Scott</span> submitted a report.</p>
<p class="text-sm text-stone-600 dark:text-stone-400">Yesterday</p>
</div>
</li>
<li class="relative flex items-center gap-4 p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md
before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
<img src="https://randomuser.me/api/portraits/women/24.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-400 dark:border-stone-600 shadow-inner-strong">
<div>
<p class="text-stone-700 dark:text-stone-300"><span class="font-medium">Dwight Schrute</span> added a new task.</p>
<p class="text-sm text-stone-600 dark:text-stone-400">3 days ago</p>
</div>
</li>
</ul>
</section>
<!-- Skeuomorphic Card 5 - Important Notices -->
<section class="relative rounded-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 p-6 shadow-xl
hover:shadow-2xl transition-all duration-300
before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5
after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20">
<h2 class="text-xl font-semibold mb-4 text-stone-700 dark:text-stone-300 drop-shadow-sm">Important Notices</h2>
<div class="space-y-4">
<div class="relative p-4 rounded-lg bg-red-200 dark:bg-red-800 text-red-800 dark:text-red-200 font-semibold
shadow-md
before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-red-100/50 dark:before:shadow-white/5
after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-red-400/50 dark:after:shadow-black/20">
<p>System Maintenance: Jan 15th, 10 PM - 2 AM PST.</p>
</div>
<div class="relative p-4 rounded-lg bg-amber-200 dark:bg-amber-800 text-amber-800 dark:text-amber-200 font-semibold
shadow-md
before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-amber-100/50 dark:before:shadow-white/5
after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-amber-400/50 dark:after:shadow-black/20">
<p>New Security Update available for all users.</p>
</div>
</div>
</section>
<!-- Skeuomorphic Card 6 - Image Gallery (Spans two columns on larger screens) -->
<section class="relative rounded-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 p-6 shadow-xl
hover:shadow-2xl transition-all duration-300 col-span-1 md:col-span-2
before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5
after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20">
<h2 class="text-xl font-semibold mb-4 text-stone-700 dark:text-stone-300 drop-shadow-sm">Office Snapshots</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
<div class="relative rounded-lg overflow-hidden border-2 border-stone-300 dark:border-stone-700 shadow-md
before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
<img src="https://picsum.photos/id/1018/200/150" alt="Office view" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
</div>
<div class="relative rounded-lg overflow-hidden border-2 border-stone-300 dark:border-stone-700 shadow-md
before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
<img src="https://picsum.photos/id/1020/200/150" alt="Meeting room" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
</div>
<div class="relative rounded-lg overflow-hidden border-2 border-stone-300 dark:border-stone-700 shadow-md
before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
<img src="https://picsum.photos/id/1025/200/150" alt="Workstation" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
</div>
<div class="relative rounded-lg overflow-hidden border-2 border-stone-300 dark:border-stone-700 shadow-md
before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
<img src="https://picsum.photos/id/1021/200/150" alt="Coffee break" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
</div>
</div>
</section>
</main>
<!-- Footer as a subtle skeuomorphic element -->
<footer class="relative mt-8 rounded-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 p-4 shadow-xl
before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5
after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20">
<p class="text-center text-sm text-stone-600 dark:text-stone-400">© 2023 Corporate Solutions Inc. All rights reserved.</p>
</footer>
</div>관련 구성 요소
그리드 레이아웃 구성 요소 - 금융/뱅킹
금융/은행 애플리케이션을 위한 반응형 그리드 레이아웃 구성 요소로, 웜 뉴트럴 및 다크 모드 지원과 함께 깔끔한 Material Design 미학을 특징으로 합니다.
그리드 레이아웃 구성 요소
미니멀한 그리드 레이아웃 구성 요소로, 반응형 효과와 어두운 테마를 지원하는 단순하고 깔끔한 디자인을 특징으로 합니다. picsum.photos 및 randomuser.me 의 자리 표시자 이미지 및 아바타를 활용합니다.