Skeuomorphic_Earth_Tone_Data_Table
Una tabla de datos simple y receptiva con un estilo de diseño esqueuomórfico y una combinación de colores en tonos tierra, adecuada para sitios web comerciales / corporativos. Incluye soporte para modo oscuro.
Código HTML
<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>Componentes relacionados
Industrial_Gaming_Data_Table
Un componente de tabla de datos complejo y receptivo diseñado para sitios web de juegos, con una estética industrial con elementos expuestos y una combinación de colores otoñales. Incluye filtrado, ordenación, paginación y compatibilidad con el modo oscuro.
Componente de tablas de datos
Tabla de datos responsiva para panel de control con soporte de tema oscuro
Tabla de datos Rainbow Gradient inspirada en papel/impresión
Un componente de tabla de datos simple y receptivo con un diseño inspirado en el papel/impresión y un sutil fondo degradado de arco iris, adecuado para tableros. Incluye soporte para modo oscuro.