Skeuomorphic_Earth_Tone_Data_Table
A simple, responsive data table with a skeuomorphic design style and earth-tone color scheme, suitable for business/corporate websites. Includes dark mode support.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-900 dark:to-stone-950 min-h-screen font-sans">
<div class="max-w-7xl mx-auto">
<div class="bg-stone-300 dark:bg-stone-800 shadow-md shadow-stone-400/50 dark:shadow-stone-950/50 rounded-xl p-4 sm:p-6 mb-8
border-t border-l border-stone-200 dark:border-stone-700
border-b border-r border-stone-400 dark:border-stone-900
inset-shadow-light dark:inset-shadow-dark">
<h2 class="text-2xl sm:text-3xl font-bold text-stone-800 dark:text-stone-200 mb-4
text-shadow-light dark:text-shadow-dark">
Project Overview
</h2>
<p class="text-stone-700 dark:text-stone-300 text-sm sm:text-base leading-relaxed">
This table displays key metrics and status for ongoing projects. Each row represents a project with its current status, budget, and completion rate.
</p>
</div>
<div class="overflow-x-auto relative rounded-xl shadow-lg shadow-stone-400/50 dark:shadow-stone-950/50
border-t border-l border-stone-200 dark:border-stone-700
border-b border-r border-stone-400 dark:border-stone-900
inset-shadow-light dark:inset-shadow-dark">
<table class="w-full text-sm text-left text-stone-500 dark:text-stone-400">
<thead class="text-xs text-stone-700 uppercase bg-gradient-to-b from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800
rounded-t-lg
border-b border-stone-500 dark:border-stone-900
table-header-shadow">
<tr>
<th scope="col" class="py-3 px-4 sm:px-6 tracking-wider text-stone-800 dark:text-stone-200 font-semibold">
Project Name
</th>
<th scope="col" class="py-3 px-4 sm:px-6 tracking-wider text-stone-800 dark:text-stone-200 font-semibold hidden md:table-cell">
Manager
</th>
<th scope="col" class="py-3 px-4 sm:px-6 tracking-wider text-stone-800 dark:text-stone-200 font-semibold">
Status
</th>
<th scope="col" class="py-3 px-4 sm:px-6 tracking-wider text-stone-800 dark:text-stone-200 font-semibold hidden sm:table-cell">
Budget
</th>
<th scope="col" class="py-3 px-4 sm:px-6 tracking-wider text-stone-800 dark:text-stone-200 font-semibold hidden lg:table-cell">
Completion
</th>
<th scope="col" class="py-3 px-4 sm:px-6 tracking-wider text-stone-800 dark:text-stone-200 font-semibold">
Actions
</th>
</tr>
</thead>
<tbody>
<tr class="bg-stone-100 dark:bg-stone-850 border-b border-stone-200 dark:border-stone-700
even:bg-stone-200 dark:even:bg-stone-900
hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200">
<th scope="row" class="py-4 px-4 sm:px-6 font-medium text-stone-900 dark:text-stone-100 whitespace-nowrap">
Website Redesign
</th>
<td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden md:table-cell">
<div class="flex items-center space-x-2">
<img class="w-6 h-6 rounded-full inline-block border border-stone-400/50 dark:border-stone-600/50 shadow-sm shadow-stone-400/50" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
<span>Jane Doe</span>
</div>
</td>
<td class="py-4 px-4 sm:px-6">
<span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-100
shadow-sm-light dark:shadow-sm-dark">
Completed
</span>
</td>
<td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden sm:table-cell">
$25,000
</td>
<td class="py-4 px-4 sm:px-6 hidden lg:table-cell">
<div class="w-full bg-stone-300 dark:bg-stone-700 rounded-full h-2.5 shadow-inset-light dark:shadow-inset-dark">
<div class="bg-emerald-600 h-2.5 rounded-full" style="width: 100%"></div>
</div>
</td>
<td class="py-4 px-4 sm:px-6">
<a href="#" class="font-medium text-brown-600 dark:text-brown-400 hover:underline hover-button-inset-light dark:hover-button-inset-dark
px-2 py-1 rounded
transition-all duration-200">
View
</a>
</td>
</tr>
<tr class="bg-stone-100 dark:bg-stone-850 border-b border-stone-200 dark:border-stone-700
even:bg-stone-200 dark:even:bg-stone-900
hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200">
<th scope="row" class="py-4 px-4 sm:px-6 font-medium text-stone-900 dark:text-stone-100 whitespace-nowrap">
Mobile App Development
</th>
<td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden md:table-cell">
<div class="flex items-center space-x-2">
<img class="w-6 h-6 rounded-full inline-block border border-stone-400/50 dark:border-stone-600/50 shadow-sm shadow-stone-400/50" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<span>John Smith</span>
</div>
</td>
<td class="py-4 px-4 sm:px-6">
<span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-100
shadow-sm-light dark:shadow-sm-dark">
In Progress
</span>
</td>
<td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden sm:table-cell">
$75,000
</td>
<td class="py-4 px-4 sm:px-6 hidden lg:table-cell">
<div class="w-full bg-stone-300 dark:bg-stone-700 rounded-full h-2.5 shadow-inset-light dark:shadow-inset-dark">
<div class="bg-amber-500 h-2.5 rounded-full" style="width: 60%"></div>
</div>
</td>
<td class="py-4 px-4 sm:px-6">
<a href="#" class="font-medium text-brown-600 dark:text-brown-400 hover:underline hover-button-inset-light dark:hover-button-inset-dark
px-2 py-1 rounded
transition-all duration-200">
View
</a>
</td>
</tr>
<tr class="bg-stone-100 dark:bg-stone-850 border-b border-stone-200 dark:border-stone-700
even:bg-stone-200 dark:even:bg-stone-900
hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200">
<th scope="row" class="py-4 px-4 sm:px-6 font-medium text-stone-900 dark:text-stone-100 whitespace-nowrap">
Marketing Campaign
</th>
<td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden md:table-cell">
<div class="flex items-center space-x-2">
<img class="w-6 h-6 rounded-full inline-block border border-stone-400/50 dark:border-stone-600/50 shadow-sm shadow-stone-400/50" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
<span>Emily White</span>
</div>
</td>
<td class="py-4 px-4 sm:px-6">
<span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100
shadow-sm-light dark:shadow-sm-dark">
Planned
</span>
</td>
<td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden sm:table-cell">
$30,000
</td>
<td class="py-4 px-4 sm:px-6 hidden lg:table-cell">
<div class="w-full bg-stone-300 dark:bg-stone-700 rounded-full h-2.5 shadow-inset-light dark:shadow-inset-dark">
<div class="bg-blue-500 h-2.5 rounded-full" style="width: 10%"></div>
</div>
</td>
<td class="py-4 px-4 sm:px-6">
<a href="#" class="font-medium text-brown-600 dark:text-brown-400 hover:underline hover-button-inset-light dark:hover-button-inset-dark
px-2 py-1 rounded
transition-all duration-200">
View
</a>
</td>
</tr>
<tr class="bg-stone-100 dark:bg-stone-850 border-b border-stone-200 dark:border-stone-700
even:bg-stone-200 dark:even:bg-stone-900
hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200">
<th scope="row" class="py-4 px-4 sm:px-6 font-medium text-stone-900 dark:text-stone-100 whitespace-nowrap">
Q1 Financial Report
</th>
<td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden md:table-cell">
<div class="flex items-center space-x-2">
<img class="w-6 h-6 rounded-full inline-block border border-stone-400/50 dark:border-stone-600/50 shadow-sm shadow-stone-400/50" src="https://randomuser.me/api/portraits/men/88.jpg" alt="Avatar">
<span>David Lee</span>
</div>
</td>
<td class="py-4 px-4 sm:px-6">
<span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-100
shadow-sm-light dark:shadow-sm-dark">
In Progress
</span>
</td>
<td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden sm:table-cell">
$10,000
</td>
<td class="py-4 px-4 sm:px-6 hidden lg:table-cell">
<div class="w-full bg-stone-300 dark:bg-stone-700 rounded-full h-2.5 shadow-inset-light dark:shadow-inset-dark">
<div class="bg-amber-500 h-2.5 rounded-full" style="width: 85%"></div>
</div>
</td>
<td class="py-4 px-4 sm:px-6">
<a href="#" class="font-medium text-brown-600 dark:text-brown-400 hover:underline hover-button-inset-light dark:hover-button-inset-dark
px-2 py-1 rounded
transition-all duration-200">
View
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<style>
/* Base for defining custom CSS variables for skeuomorphic effects */
:root {
--shadow-light-color-1: rgba(255, 255, 255, 0.7);
--shadow-light-color-2: rgba(0, 0, 0, 0.2);
--shadow-dark-color-1: rgba(0, 0, 0, 0.7);
--shadow-dark-color-2: rgba(255, 255, 255, 0.05);
}
/* Light mode shadows */
.inset-shadow-light {
box-shadow: inset -2px -2px 5px var(--shadow-light-color-1),
inset 2px 2px 5px var(--shadow-light-color-2);
}
.shadow-sm-light {
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1), -1px -1px 3px rgba(255, 255, 255, 0.5);
}
.shadow-inset-light {
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1), inset -1px -1px 2px rgba(255, 255, 255, 0.5);
}
.text-shadow-light {
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7), -1px -1px 2px rgba(0, 0, 0, 0.1);
}
.table-header-shadow {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06),
0 2px 2px rgba(255, 255, 255, 0.5) inset;
}
.hover-button-inset-light {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2), -2px -2px 4px rgba(255, 255, 255, 0.7);
}
.hover-button-inset-light:hover {
box-shadow: inset 2px 2px 5px var(--shadow-light-color-2),
inset -2px -2px 5px var(--shadow-light-color-1);
}
/* Dark mode shadows using custom properties */
.dark .inset-shadow-dark {
box-shadow: inset -2px -2px 5px var(--shadow-dark-color-1),
inset 2px 2px 5px var(--shadow-dark-color-2);
}
.dark .shadow-sm-dark {
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8), -1px -1px 3px rgba(255, 255, 255, 0.05);
}
.dark .shadow-inset-dark {
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.8), inset -1px -1px 2px rgba(255, 255, 255, 0.05);
}
.dark .text-shadow-dark {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7), -1px -1px 2px rgba(255, 255, 255, 0.1);
}
.dark .table-header-shadow {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3),
0 2px 2px rgba(0, 0, 0, 0.7) inset;
}
.dark .hover-button-inset-dark {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), -2px -2px 4px rgba(255, 255, 255, 0.05);
}
.dark .hover-button-inset-dark:hover {
box-shadow: inset 2px 2px 5px var(--shadow-dark-color-2),
inset -2px -2px 5px var(--shadow-dark-color-1);
}
/* Define custom colors */
.text-brown-600 {
color: #795548; /* A warm brown */
}
.dark .text-brown-400 {
color: #a1887f; /* A lighter warm brown for dark mode */
}
</style>Related Components
ArtDecoCryptoDataTable
A simple, responsive data table component for cryptocurrency/blockchain applications, designed with Art Deco-inspired geometric patterns and an analogous color scheme. Includes dark mode support.
Retro Data Grid
A responsive data table component styled with a retro/vintage 80s/90s aesthetic using Tailwind CSS. It features a blocky design, vibrant color accents (purple/orange in light mode, green/neon in dark mode), and a monospace font for a nostalgic tech feel. The table includes distinct header and row styling, bordered elements like avatars and status badges, and supports dark mode via CSS. Placeholder data includes user avatars, contact information, status badges, roles, and join dates. The table is horizontally scrollable on smaller screens for better responsiveness.
Data Tables Component
A Data Tables Component designed with Brutalism style featuring high-saturation colors for e-commerce, responsive with dark theme support.