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>관련 구성 요소
Brutalist_ECommerce_Table
전자 상거래를 위한 브루탈리즘 스타일의 반응형 데이터 테이블 구성 요소로, 고대비, 보색 구성표(노란색/보라색) 및 다크 모드 지원을 특징으로 합니다. 제품 목록 또는 주문 관리를 위해 설계되었습니다.
데이터 테이블 구성 요소
Glassmorphism Data Tables 포트폴리오를 위한 생생한 색상을 가진 구성 요소, 다크 모드 지원으로 반응합니다. JavaScript가 필요하지 않으며 Tailwind CSS가 있는 HTML만 있으면 됩니다.