Skeuomorphic_Grid_Layout_Business
A complex, responsive grid layout component for business/corporate websites, featuring a skeuomorphic design style with warm neutral colors and dark mode support. Elements mimic real-world objects with depth and subtle textures.
HTML Code
<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>Related Components
Watercolor_Artistic_Dashboard_Grid_Layout
A responsive dashboard grid layout component with a watercolor/artistic aesthetic, using a monochromatic color scheme. Features include cards with soft backgrounds, subtle shadows, and dark mode support for data visualization and control panels.
Neumorphism Dashboard Grid
Neumorphism Grid Layout Dashboard Component with Complementary Color Scheme
Grid Layout Component
A responsive grid layout component following Material Design principles, featuring shadow effects and dark mode support, using Tailwind CSS.