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
Luxury_Premium_Manufacturing_Data_Table
A complex, responsive data table component for manufacturing/industrial use, featuring a luxury/premium design with a black and white color scheme and a single bright accent color. Includes dark mode support and interactive elements.
Brutalism Data Table
A simple, brutalist data table component with analogous colors for business/corporate websites. It is responsive and supports dark mode using Tailwind CSS.
Data Tables Component
A responsive Data Tables Component designed in Skeuomorphic style with dark theme support using Tailwind CSS.