Cyberpunk_Fashion_Data_Table
Una tabla de datos receptiva con una estética cyberpunk, una combinación de colores apagados y acentos de neón, adecuada para listados de productos de moda y belleza, con soporte para modo oscuro y efectos de desplazamiento interactivos.
Código HTML
<div class="font-['Electrolize'] bg-gray-950 text-gray-300 min-h-screen p-4 sm:p-8 dark:bg-gray-950 dark:text-gray-300">
<div class="container mx-auto max-w-7xl relative">
<!-- Neon Border Effect -->
<div class="absolute inset-0 bg-gradient-to-br from-purple-600 via-pink-600 to-red-500 opacity-20 filter blur-xl rounded-xl animate-pulse-slow"></div>
<div class="relative bg-gray-900 rounded-xl shadow-lg border border-purple-800 dark:bg-gray-800 dark:border-purple-900 overflow-hidden">
<div class="p-4 sm:p-6 bg-gray-800 border-b border-purple-700 dark:bg-gray-700 dark:border-purple-800 flex flex-col sm:flex-row justify-between items-center">
<h2 class="text-2xl sm:text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-neon-purple to-neon-pink mb-4 sm:mb-0">Product Catalog // <span class="text-purple-400 font-normal text-xl sm:text-2xl">[LIVE]</span></h2>
<div class="flex space-x-2">
<button class="px-4 py-2 bg-purple-700 text-white rounded-md text-sm sm:text-base hover:bg-purple-600 transition duration-300 transform hover:scale-105 border border-purple-500 shadow-md shadow-purple-900/50">+</button>
<button class="px-4 py-2 bg-pink-700 text-white rounded-md text-sm sm:text-base hover:bg-pink-600 transition duration-300 transform hover:scale-105 border border-pink-500 shadow-md shadow-pink-900/50">~</button>
<button class="px-4 py-2 bg-red-700 text-white rounded-md text-sm sm:text-base hover:bg-red-600 transition duration-300 transform hover:scale-105 border border-red-500 shadow-md shadow-red-900/50">x</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-purple-800 dark:divide-purple-900">
<thead class="bg-gray-850 dark:bg-gray-750">
<tr>
<th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 text-left text-xs font-semibold uppercase tracking-wider text-purple-400 dark:text-purple-500 border-b border-purple-700">
<input type="checkbox" class="form-checkbox h-4 w-4 text-neon-pink border-purple-600 rounded-sm focus:ring-neon-pink bg-gray-700">
</th>
<th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 text-left text-xs font-semibold uppercase tracking-wider text-pink-400 dark:text-pink-500 border-b border-purple-700">
Product ID
</th>
<th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 text-left text-xs font-semibold uppercase tracking-wider text-neon-purple dark:text-neon-purple border-b border-purple-700">
Image
</th>
<th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 text-left text-xs font-semibold uppercase tracking-wider text-neon-pink dark:text-neon-pink border-b border-purple-700">
Name
</th>
<th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 text-left text-xs font-semibold uppercase tracking-wider text-neon-purple dark:text-neon-purple border-b border-purple-700">
Category
</th>
<th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 text-left text-xs font-semibold uppercase tracking-wider text-neon-pink dark:text-neon-pink border-b border-purple-700">
Price
</th>
<th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 text-left text-xs font-semibold uppercase tracking-wider text-neon-purple dark:text-neon-purple border-b border-purple-700">
Status
</th>
<th scope="col" class="relative px-4 py-3 sm:px-6 sm:py-4 border-b border-purple-700">
<span class="sr-only">Actions</span>
</th>
</tr>
</thead>
<tbody class="divide-y divide-purple-900 bg-gray-900 dark:bg-gray-800">
<!-- Row 1 -->
<tr class="hover:bg-purple-900/30 transition duration-200">
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
<input type="checkbox" class="form-checkbox h-4 w-4 text-neon-pink border-purple-600 rounded-sm focus:ring-neon-pink bg-gray-700">
</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-400 font-mono">#2C4B7E</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap">
<div class="flex-shrink-0 w-12 h-12 overflow-hidden rounded-md border border-purple-700">
<img class="w-full h-full object-cover" src="https://picsum.photos/id/1018/60/60" alt="Product Image">
</div>
</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm font-medium text-pink-300 transition-colors duration-200 hover:text-pink-400">Cybernetic Visor 3.0</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-purple-300">Accessories</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-green-400 font-bold">$120.99</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-300 border border-green-700">In Stock</span>
</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-right text-sm font-medium">
<a href="#" class="text-neon-pink hover:text-neon-purple mr-2 transition duration-200 font-bold">Edit</a>
<a href="#" class="text-red-500 hover:text-red-400 transition duration-200 font-bold">Delete</a>
</td>
</tr>
<!-- Row 2 -->
<tr class="hover:bg-purple-900/30 transition duration-200">
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
<input type="checkbox" class="form-checkbox h-4 w-4 text-neon-pink border-purple-600 rounded-sm focus:ring-neon-pink bg-gray-700">
</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-400 font-mono">#1E9F6A</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap">
<div class="flex-shrink-0 w-12 h-12 overflow-hidden rounded-md border border-purple-700">
<img class="w-full h-full object-cover" src="https://picsum.photos/id/1020/60/60" alt="Product Image">
</div>
</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm font-medium text-pink-300 transition-colors duration-200 hover:text-pink-400">Chromium Jacket</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-purple-300">Apparel</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-green-400 font-bold">$349.00</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-300 border border-green-700">In Stock</span>
</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-right text-sm font-medium">
<a href="#" class="text-neon-pink hover:text-neon-purple mr-2 transition duration-200 font-bold">Edit</a>
<a href="#" class="text-red-500 hover:text-red-400 transition duration-200 font-bold">Delete</a>
</td>
</tr>
<!-- Row 3 -->
<tr class="hover:bg-purple-900/30 transition duration-200">
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
<input type="checkbox" class="form-checkbox h-4 w-4 text-neon-pink border-purple-600 rounded-sm focus:ring-neon-pink bg-gray-700">
</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-400 font-mono">#5D3C8F</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap">
<div class="flex-shrink-0 w-12 h-12 overflow-hidden rounded-md border border-purple-700">
<img class="w-full h-full object-cover" src="https://picsum.photos/id/1025/60/60" alt="Product Image">
</div>
</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm font-medium text-pink-300 transition-colors duration-200 hover:text-pink-400">Quantum Beauty Serum</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-purple-300">Beauty</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-yellow-400 font-bold">$85.50</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-900 text-yellow-300 border border-yellow-700">Low Stock</span>
</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-right text-sm font-medium">
<a href="#" class="text-neon-pink hover:text-neon-purple mr-2 transition duration-200 font-bold">Edit</a>
<a href="#" class="text-red-500 hover:text-red-400 transition duration-200 font-bold">Delete</a>
</td>
</tr>
<!-- Row 4 -->
<tr class="hover:bg-purple-900/30 transition duration-200">
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
<input type="checkbox" class="form-checkbox h-4 w-4 text-neon-pink border-purple-600 rounded-sm focus:ring-neon-pink bg-gray-700">
</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-400 font-mono">#7F1A0B</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap">
<div class="flex-shrink-0 w-12 h-12 overflow-hidden rounded-md border border-purple-700">
<img class="w-full h-full object-cover" src="https://picsum.photos/id/1027/60/60" alt="Product Image">
</div>
</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm font-medium text-pink-300 transition-colors duration-200 hover:text-pink-400">Neo-Tokyo Boots</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-purple-300">Footwear</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-green-400 font-bold">$210.00</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-900 text-red-300 border border-red-700">Discontinued</span>
</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-right text-sm font-medium">
<a href="#" class="text-neon-pink hover:text-neon-purple mr-2 transition duration-200 font-bold">Edit</a>
<a href="#" class="text-red-500 hover:text-red-400 transition duration-200 font-bold">Delete</a>
</td>
</tr>
<!-- Row 5 -->
<tr class="hover:bg-purple-900/30 transition duration-200">
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
<input type="checkbox" class="form-checkbox h-4 w-4 text-neon-pink border-purple-600 rounded-sm focus:ring-neon-pink bg-gray-700">
</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-400 font-mono">#A32B9C</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap">
<div class="flex-shrink-0 w-12 h-12 overflow-hidden rounded-md border border-purple-700">
<img class="w-full h-full object-cover" src="https://picsum.photos/id/1035/60/60" alt="Product Image">
</div>
</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm font-medium text-pink-300 transition-colors duration-200 hover:text-pink-400">Aura Glo Lip gloss</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-purple-300">Cosmetics</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-green-400 font-bold">$29.99</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-300 border border-green-700">In Stock</span>
</td>
<td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-right text-sm font-medium">
<a href="#" class="text-neon-pink hover:text-neon-purple mr-2 transition duration-200 font-bold">Edit</a>
<a href="#" class="text-red-500 hover:text-red-400 transition duration-200 font-bold">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="p-4 sm:p-6 bg-gray-800 border-t border-purple-700 dark:bg-gray-700 dark:border-purple-800 flex justify-between items-center text-sm">
<div class="text-gray-400">Showing 1 to 5 of 120 Products</div>
<div class="flex space-x-1">
<button class="px-3 py-1 bg-gray-700 text-gray-400 rounded-md hover:bg-purple-800 hover:text-white transition duration-200">
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</button>
<button class="px-3 py-1 bg-purple-700 text-white rounded-md hover:bg-purple-600 transition duration-200">1</button>
<button class="px-3 py-1 bg-gray-700 text-gray-400 rounded-md hover:bg-purple-800 hover:text-white transition duration-200">2</button>
<button class="px-3 py-1 bg-gray-700 text-gray-400 rounded-md hover:bg-purple-800 hover:text-white transition duration-200">3</button>
<button class="px-3 py-1 bg-gray-700 text-gray-400 rounded-md hover:bg-purple-800 hover:text-white transition duration-200">
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<style>
/* Custom font import for Electrolize */
@import url('https://fonts.googleapis.com/css2?family=Electrolize&display=swap');
/* Custom properties for neon colors */
.text-neon-pink {
color: #FF69B4; /* Hot Pink */
}
.dark .text-neon-pink {
color: #FF5DAA; /* Slightly brighter for dark mode */
}
.text-neon-purple {
color: #BF00FF; /* Electric Purple */
}
.dark .text-neon-purple {
color: #D400FF; /* Slightly brighter for dark mode */
}
.bg-gradient-to-r.from-neon-purple.to-neon-pink {
background-image: linear-gradient(to right, #BF00FF, #FF69B4);
}
/* Animation for the background blur effect */
@keyframes pulse-slow {
0%, 100% { opacity: 0.2; transform: scale(1); }
50% { opacity: 0.3; transform: scale(1.02); }
}
.animate-pulse-slow {
animation: pulse-slow 6s infinite ease-in-out;
}
/* Tailwind checkbox custom styles */
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
vertical-align: middle;
background-origin: border-box;
user-select: none;
flex-shrink: 0;
height: 1rem;
width: 1rem;
color: #FF69B4; /* Default neon pink */
background-color: #4B5563; /* Gray-700 for background */
border: 1px solid #7C3AED; /* Purple-600 */
border-radius: 0.125rem; /* Rounded-sm */
transition: background-color 0.2s, border-color 0.2s;
}
input[type="checkbox"]:checked {
background-color: currentColor; /* Use the color set by text-neon-pink */
border-color: currentColor;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
input[type="checkbox"]:focus {
outline: none;
box-shadow: 0 0 0 2px var(--tw-ring-offset-color, transparent), 0 0 0 4px #FF69B4;
border-color: #FF69B4;
}
.dark input[type="checkbox"] {
background-color: #374151; /* Darker gray for dark mode */
border-color: #9333ea; /* Darker purple for dark mode */
}
.dark input[type="checkbox"]:focus {
box-shadow: 0 0 0 2px var(--tw-ring-offset-color, transparent), 0 0 0 4px #FF5DAA;
border-color: #FF5DAA;
}
</style>Componentes relacionados
Componente de tablas de datos
Un componente de tablas de datos responsivo diseñado en estilo skeuomórfico con soporte para temas oscuros utilizando Tailwind CSS.
Componente de tablas de datos
Un componente de tabla de datos minimalista y receptivo diseñado con Tailwind CSS que admite el modo oscuro.