Cyberpunk_Fashion_Data_Table
Un tableau de données réactif avec une esthétique cyberpunk, une palette de couleurs sourdes et des accents néon, adapté aux listes de produits de mode et de beauté, avec prise en charge du mode sombre et des effets de survol interactifs.
HTML Code
<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>Composants associés
Composant Tableaux de données
Un composant de tables de données réactif conçu avec le style Neumorphism à l’aide de Tailwind CSS, avec la prise en charge des thèmes sombres et des images d’espace réservé aléatoires.
Tableau de données des médias sociaux Monochromatique 3D Simple
Un composant de table de données de conception 3D simple et monochrome pour les interfaces de médias sociaux avec prise en charge du thème sombre.