Cyberpunk_Fashion_Data_Table
사이버펑크 미학, 차분한 색 구성표, 네온 액센트가 있는 반응형 데이터 테이블로, 패션 및 뷰티 제품 목록에 적합하며 다크 모드 지원 및 인터랙티브와 같은 호버 효과를 특징으로 합니다.
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>관련 구성 요소
종이/인쇄에서 영감을 받은 무지개 그라디언트 데이터 테이블
종이/인쇄물에서 영감을 받은 디자인과 미묘한 무지개 그라데이션 배경이 있는 단순하고 반응이 빠른 데이터 테이블 구성 요소로, 대시보드에 적합합니다. 다크 모드 지원이 포함됩니다.